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의 좌표값을 현재 마우스가 화면에 위치하고 있는 좌표값을 구해서 계속해서 바꾸라는 것이다
