교컴로고초기화면으로 header_kyocom
교컴메뉴
교컴소개 이용안내 소셜교컴 나눔마당 배움마당 자료마당 교과마당 초등마당 특수마당 글로벌교컴 온라인프로젝트학습 교컴 UCC
회원 로그인
정보기억 정보기억에 체크할 경우 다음접속시 아이디와 패스워드를 입력하지 않으셔도 됩니다.
그러나, 개인PC가 아닐 경우 타인이 로그인할 수 있습니다.
PC를 여러사람이 사용하는 공공장소에서는 체크하지 마세요.
소셜네트워크 서비스를 통해서 로그인하시면 별도의 로그인 절차없이 회원서비스를 이용하실 수 있습니다.
교컴 키우기 자발적 후원


:::: 교컴가족 로그인(0)

  • 주간 검색어
  • 현재 검색어
  1. 수학
  2. 수학여행
기간 : 현재기준

교컴 포토갤러리

플래시수업

교플강5(화면을 못 벗어나게, 그리고 마우스를 따라다니는 움직임) - 벽돌깨기를 위하여

김정식 | 2005.06.12 20:03 | 조회 4165 | 공감 0 | 비공감 0
 

2. 변수를 이용하여 운동의 방향을 바꿀 수 있다.

가. 공 무비클립이 화면을 벗어나지 못하도록 조건문을 이용하여 잡아둘 수 있다.

이번에는 공이 화면을 벗어나지 않고 계속해서 움직이게 만들어보자. 화면오른쪽 끝까지 가면 방향을 왼쪽으로 바꾸고, 화면 왼쪽 끝까지 오면 다시 방향을 오른쪽으로 바꾸게 해보자. 마찬가지로, 공을 계속해서 x축방향으로 움직이게 해야 할 것이다. 그리고 공이 오른쪽 끝을 벗어나는 순간 -x축방향으로 움직이게 해야 할 것이다.

그러기 위해서 우리는 speed 라는 변수를 만들어 공의 움직임을 제어해 보고자 한다.



공의 움직임을 화면안에서만 돌아다니게 하기 위해서는 아래와 같은 스크립트를 만들어 주면 된다.

speedx = 5;

onEnterFrame = function () {

        ball._x = ball._x+speedx;

        if (ball._x>500) {

                speedx = speedx*-1;

        }

        if (ball._x<0) {

                speedx = speedx*-1;

        }

};

즉 화면밖으로 벗어나려는 경우에 speedx 의 값을 음수로 바꾸어 줌으로써 ball 의 움직임을 반대방향으로 바꿀 수 있는 것이다. 그런데 한가지 문제점이 있다 모든 무비클립의 위치는 중심점을 기준으로 이루어 지기 때문에 위처럼 하면 공의 끝이 벽에 부딪히면 방향이 바꾸는 것이 아니라 공의 중심이 벽에 부딪혀야 방향이 바뀌게 된다. 따라서 공의 끝이 부딪히면 방향이 바뀌도록 액션스크립트를 수정해 주어야 할 것이다.


\"\" 


if (ball._x + ball._width/2 >500) // 공의 중심+공의 반경이 500보다 크면


나 .변수를 이용하여 공의 속력을 바꿀 수 있다.


공의 속력을 바꾸기 위해서는 speedx의 값을 바꾸어 주면 될 것이다. 이제 우리는 공이 움직이는 속력도 변수하나로 바꿀 수 있게 되었다.


<토의> 자 그럼 같은 방법으로 공이 x축 뿐만 아니라 y축에서도 화면을 벗어나지 않고   움직이게 만들어 보아라 (단 화면의 크기는 500*400이라고 가정)

1)고려해야 할 사항에 대해 토의해 보고 변수명을 정해보자.

공1의 인스턴스명 (ball)

화면의 넓이 (500)

화면의 높이 (400)

공의 x축속도 (speedx)

공의 y축속도 (speedy)

2) 소스를 보지말고 직접 만들어 본 후 비교해보자

//초기 스피드

speedx = 10;

speedy = 10;

//반복실행

onEnterFrame = function () {

        ball._x = ball._x+speedx;

        ball._y = ball._y+speedy;

        //벽을 벗어나려고 할때의 조건문들

        if (ball._x+ball._width/2>500) {

                speedx = speedx*-1;

        }

        if (ball._x-ball._width/2<0) {

                speedx = speedx*-1;

        }

        if (ball._y+ball._height/2>400) {

                speedy = speedy*-1;

        }

        if (ball._y-ball._height/2<0) {

                speedy = speedy*-1;

        }

};

<토의>

speedx 나 speedy 의 값을 바꾸면 어떻게 될까

ball._height 대신 ball._width 로 바꾸면 어떻게 될까

화면크기를 더 줄이려면 어떻게 해야 할까



3. 마우스를 따라다니는 운동을 이해할 수 있다.

이번에는 조절바를 만들어 마우스를 따라 다니게 해보자.

가. startDrag 의 사용법을 익힌다.

조절바 무비클립을 만들어 ‘bar\'라는 인스턴스 네임을 주어 화면에 위치 시킨후 마우스를 따라 움직이게 해보자. 마우스를 따라 조절바가 움직이기 위해서는 2가지 방법이 있다. 우선 가장 쉬운 방법인 startDrag를 사용하는 방법을 알아 보자.

무비클립 인스턴스명.startDrag(true,[left,top,right,bottom])

마우스를 따라다니게 하고싶은 무비클립명을 써주고, 뒤에 startDrag(true)라고 적어 주면 된다. 그럼 무비클립은 마우스를 따라 다니게 된다. 가끔은 따라다니는 범위를 제한을 두고 싶을때가 있다. 그럴때는 [left,top,right,bottom]에 범위를 적어 주면 된다.

나. 조절바를 마우스를 따라다니게 만든다.

예를 들어 bar.startDrag(true); 라고 적어주면 조절바(bar)가 마우스를 따라 움직이게 된다. 마우스를 움직여 보면 조절바(bar)가 마우스를 따라 다니는 것을 보게 될 것이다. 하지만 우리가 궁극적으로 만들고자 하는 것은 벽돌깨기 이므로 조절바가 화면 상단으로 움직이지 못하도록 해야 할 것이다.

다. 조절바가 일정한 범위내에서만 움직이도록 만든다.

bar.startDrag(true, 0, 350, 500, 350);

라고 적어주면 조절바(bar)는 y좌표는 350 인 지점에서 x좌표는 0부터 500 사이에서만 움직이게 된다. 이런 방법으로 조절바의 움직임을 제한 할 수 있다.

우리가 만들고 있는 벽돌깨기의 시작 부분에 위 스크립트를 추가해 넣음으로써 조절바를 마우스로 조절할 수 있게 된다.

라. 조절바가 마우스를 따라다니게 하는 다른 방법을 익힌다.

startDrag 는 큰 단점이 하나 있다. 그것은 동시에 두개의 무비클립이 따라 다니게 할 수 없다는 것이다. 따라서 때로는 startDrag를 사용하지 않고도 무비클립이 마우스를 따라 다니게 할 필요가 있다. 이럴때는 다음과 같은 방법으로 무비클립이 따라다니게 만들면 된다.

onEnterFrame = function () {

bar._x = _root._xmouse;

bar._y = _root._ymouse  }

즉 bar라는 이름을 가진 무비클립의 x와 y의 좌표값을 현재 마우스가 화면에 위치하고 있는 좌표값을 구해서 계속해서 바꾸라는 것이다.

좋아요! 싫어요!
twitter facebook me2day
448개(5/23페이지) rss
플래시수업
번호 제목 글쓴이 조회 날짜
공지 [활용] 수업 활용 감동 플래시 150편 [37+1] 함영기 163147 2003.08.21 18:57
367 답글 [플래시수업] RE:플래시학습자료제작-연습파일 첨부파일 [1] 김정식 3035 2005.08.18 11:11
366 답글 [플래시수업] RE:[문제만들기 옛날 빵없는 소스] 첨부파일 [1] 유춘모 2557 2005.08.17 20:48
365 [이미지자료] 백일홍이야기-플래시앨범 첨부파일 김은정 3135 2005.07.30 21:45
364 [플래시유틸] 플래시 앨범 - 동해 일출 첨부파일 함영기 3106 2005.07.29 09:04
363 [기타플래시] 플래시 배너 만들기 연습 첨부파일 함영기 3306 2005.06.28 19:42
362 [플래시유틸] [앨범] 나모 플래시 크리에이터로 만든 앨범2 함영기 2535 2005.06.28 19:30
361 [플래시유틸] [소개] 나모 플래시 크리에이터로 만든 앨범 함영기 2615 2005.06.28 16:28
360 [플래시수업] 플래시파일을 파워포인트에서 사용하려면? 정온정 3590 2005.06.13 20:59
359 답글 [플래시수업] RE:플래시파일을 파워포인트에서 사용하려면? 함영기 4083 2005.06.15 18:40
358 [플래시강좌] 교플강6(벽돌깨기 만들기 - 충돌이해)-벽돌깨기를 위하여 첨부파일 김정식 4246 2005.06.12 20:09
>> [플래시강좌] 교플강5(화면을 못 벗어나게, 그리고 마우스를 따라다니는 움직임) - 벽 첨부파일 김정식 4166 2005.06.12 20:03
356 [플래시강좌] 교플강4(무비클립과 화면상에서 움직임 이해) - 벽돌깨기를 위하여 사진 첨부파일 김정식 3911 2005.06.12 19:40
355 [플래시강좌] 교플강3(구구단 문제 출제 프로그램 만들기) 첨부파일 김정식 4689 2005.05.29 13:26
354 [플래시강좌] 교플강2(구구단 화면에표시하기,생각한 숫자 맞추기게임) 첨부파일 김정식 5016 2005.05.29 13:24
353 [플래시강좌] 교플강1(구구단 만들기를 위한 기초개념) 첨부파일 [1] 김정식 6658 2005.05.29 13:23
352 [플래시강좌] <b>[강의] 민서아빠의 교사를 위한 플래시 강의(교플강)&l 첨부파일 [5] 김정식 14834 2005.05.29 13:18
351 [기타플래시] 플래시로 만든 손접기 첨부파일 김정식 3413 2005.04.30 20:16
350 [플래시게임] [게임] 알쏭달쏭 게임 플래시 첨부파일 [1] 함영기 4740 2005.04.26 14:46
349 [플래시수업] [공통] 초중고 독도 플래시 학습자료 [1] 함영기 4637 2005.04.04 08:12
348 [플래시게임] 퀴즈부저2.0 - 소스 첨부파일 김정식 4726 2005.03.24 20:50