주제 : 플래시로 구현해보는 운동과 벽돌깨기
☐ 주제설정의 취지 및 목적
아무리 좋은 프로그램이라 할지라도 화면상에 원하는 형태로 표현할 수 없다면 좋은 프로그램이라고 할 수 없다. 필자는 새로운 프로그램을 접할 때 마다 구구단문제와 벽돌깨기를 꼭 만들어 본다. 이 2가지 프로그램을 쉽게 만들어 낼 수 있는 프로그램이라면 사용하기에 있어서 편리한 프로그램이라고 볼 수 있다. 이런 관점에서 본다면 벽돌깨기는 반드시 만들어 보아야 할 프로그램 중에 하나이다. 우리는 벽돌깨기를 만들어 봄으로써 화면상 원하는 위치에 물체를 표현해내는 방법과, 모니터상에서의 좌표체계, 또 플래시를 이용한 그래픽처리 방법에 대해서 배우게 될 것이다. 아울러 화면상의 물체를 제어하는 방법과, 충돌처리방법 그리고 마우스나 키보드를 이용한 움직임 처리방법에 대한 것들도 배우게 될 것이다. 화면상에서 어떤 물체를 원하는 좌표에 위치시킬 수 있고, 제어할 수 있다면 못 만들 것이 무엇이 있겠는가. 이제 우리의 생각을 컴퓨터 화면상에 만들어 보자.
☐ 학습목표
○. 속력에 따른 물체의 움직임을 표현할 수 있다.
○. 변수를 이용하여 운동의 방향을 바꿀 수 있다.
○. 마우스를 따라다니는 운동을 만들 수 있다. .
○. 무비클립간의 충돌을 이해하고, 충돌후 반응을 처리할 수 있다.
1. 속력에 따른 물체의 움직임을 표현할 수 있다.
가. 실제좌표와 컴퓨터에서 나타내는 좌표를 이해할 수 있다.
우리가 실제로 수학시간에 사용하는 좌표는 데카르트 좌표계를 사용한다. 데카르트 좌표계는 양의 y축 방향이 위쪽이라는 점을 주목해야 한다. 불행히도, 모니터 상에서는 데카르트 좌표계를 사용하지 않는다. 컴퓨터 화면상에서 사용하는 좌표계를 정확히 이해하는 것이 무엇보다 중요하다 하겠다. 컴퓨터 화면상에서는 양의 y축 방향이 아래로 내려가게 된다.
- 좌표 A (10,15) , B (5,7) , C(14,18), D(8,13), E(19,3)
<토의> 화면의 오른쪽으로 이동해 가면 어떤 좌표갑이 증가하는가? ( )
화면의 아래쪽으로 이동해 갈수록 어떤 좌표값이 증가하는가?( )
우리가 일반적으로 사용하는 모니터의 해상도는 바로 화면좌표계를 말하는 것이다. 예를 들면 모니터 해상도가 800×600 이라 함은 x좌표가 최대 800 y좌표가 최대 600 이라는 말이다. 앞으로 화면좌표와 해상도의 의미를 생각하면서 다음 작업을 진행해 보자.
나. 공 무비클립을 만들어 움직이는 방법을 알 수 있다.
(무비클립 속성의 이해)
이제 우리는 화면상에 공하나를 만들어 원하는 위치로 움직이게 할 것이다. 화면상에 나타나는 공을 움직이게 하기 위해서는 우리는 무비클립이라는 것을 사용할 것이다.
무비클립이란 화면 첫메인의 움직임이 멈춘 상태에서도 독자적으로 움직임을 가지는 심볼을 말하며 또한 독자적인 Instance Name을 가질 수 있다.. 흔히, 액션 스크립트의 객체로 "무비 속의 또다른 무비"의 역할을 하기도 한다. 우선 무비클립을 한개 만들어 보자. 화면상에 원을 하나 그리고 [F8]키를 눌러 무비클립으로 만든다. 무비클립 심벌의 이름을 ‘공’이라고 하자.
완성된 무비클립을 제어하기 위해서는 Instance Name을 부여해야 한다. 프레임스크립트에서 공을 제어하기 위해서는 반드시 무비클립 객체에 이름을 주어야 한다. 무비클립을 선택했을때 나타나는 아래 Properties 창에 Instance Name을 부여해 보자. 여기에서는 ‘ball’ 이라고 Instance Name을 부여하기로 하자.
Properties(속성)창을 좀더 자세히 살펴볼 필요가 있다. 아마 여러분은 ‘공’이라는 이름을 주었는데 'ball'이라는 이름을 왜 또 주어야 하는지 궁금해 할 것이다. 처음에 준 ‘공’이라는 이름은 무비클립심벌의 이름이고, 두 번째 Instance Name 에 부여한 'ball'이라는 이름은 실제 우리가 제어할 객체의 이름이라고 생각하면 된다. 이렇게 생각해 보자. 우리가 영화를 만들기 위해 ‘안성기’라는 영화 배우를 섭외해서 거지왕자를 찍는다고 가정해 보자. 우리는 ‘안성기’라는 영화배우를 1인 2역으로 사용할 예정이다. 안성기는 우리영화에서 왕자로 출연할 것이고, 또한 거지로도 출연할 것이다. 그렇다면 우리가 영화대본에서 ‘안성기 지금 오른쪽으로 이동한다’라고 표현한다면 과연 왕자와 거지중 누가 이동해야 하겠는가. ‘안성기’ 라는 이름은 배우의 본명일뿐 실제 무대상에 출연한 배역의 이름이 될 수는 없다. 따라서 영화대본에서는 안성기라는 이름이 아닌 왕자, 또는 거지 라는 이름으로 불리워 져야 할 것이다. 플래시에서도 마찬가지이다. 첫번째. 무비클립이라는 심벌을 만들면서 준 이름은 ‘공’이라는 배우를 만든것과 같고, 두 번째 화면상에 위치한 ‘공’에게 준 'ball'이라는 이름은 실제 배역의 이름이라고 할 수 있다. 따라서 우리가 화면상에 나타나 있는 공을 움직이기 위해서는 어떤이름에게 명령을 주어야 하겠는가? 그렇다 'ball'이라는 이름에 명령을 주면 될 것이다.
위에서 설명한 것처럼 ‘공’ 이라는 심벌에서 필요하다면 ball 이라는 객체뿐만 아니라 여러개의 객체를 만들어 사용할 수도 있다는 것도 알아두자. 그밖에도 Properties 창에는 무비클립 객체의 넓이, 높이, 그리고 위치(x,y) 가 나타나 있음을 알 수 있다.
<활동> Properties 창에 X 와 Y의 값을 입력하면서 ball 무비클립의 위치가 어떻게 변화되는지 살펴보자.
X의 값만을 0부터 500 까지 증가시켜 보면서 관찰해 보자.
Y의 값만을 0부터 400 까지 증가시켜 보면서 관찰해 보자.
W와 H의 값을 변화시켜 보자
화면상에 있는 ball 무비클립을 마우스로 선택해서 이동시킨후 properties 창의 X와 Y 값이 어떻게 변하는지 관찰해 보자.
다. 현재 무비클립의 위치를 추적할 수 있다.
그럼 ball 무비클립을 화면상에서 액션스크립트를 이용해서 움직여 보자.
메인프레임에 아래와 같은 액션스크립트를 적어보자.
| ball._x = 100; //ball 이라는 이름을 가진 무비클립의 x 좌표를 100이 되게 |
값을 바꾸어 가면서 화면상에 나타나는 공의 위치를 관찰해 보자.
무비클립에 명령을 주는 방법은 먼저 이름을 부르고, 속성을 지정한 다음 값을 주면 된다.
| 무비클립이름.속성=값 |
자 그럼 ball 무비클립을 왼쪽에서 오른쪽으로 이동하도록 만들어 보자. 오른쪽으로 위치가 이동하려면 x좌표의 값을 계속해서 증가하게 만들면 될 것이다.
| for (i=1; i<=500; i++) { ball._x = i; } |
자 위와 같이 명령을 준다면 어떤 결과가 나타나겠는가? ball 무비클립의 x 위치가 1서부터 500까지 증가하니까 ball 무비클립이 왼쪽에서 오른쪽으로 이동하지 않겠는가? 하지만 실행시켜 보면 이동하는 모습이 나타나지 않고, ball 의 x 위치가 500 에 가있는 것만을 보게 될 것이다. 도대체 무엇이 잘못 되었단 말인가? 명령 자체는 잘못된 것은 없다. 프로그램 특성상 빠른 계산을 위해서 계산중간과정은 화면성에 보여주지 않고, 결과만을 화면상에 보여주기 때문에 위아같이 명령을 준다면 우리는 마지막 ball 의 위치만 보게 되는 것이다. 그렇다면 중간에 이동하는 모습을 보려면 어떻게 해야 할까? 한번 계산하고 계산한 결과를 화면상에 보여주고, 또 다음 계산을 하고 계산한 결과를 화면상에 보여주고, 이런식으로 계속해서 보여 주게 한다면 우리는 ball 이 이동해 가는 모습을 볼 수 있게 될 것이다.
플래시에서는 화면상의 이동모습을 보기 위해서 onEnterFrame 이라는 액션을 사용한다. 자 우선 아래와 같이 액션스크립트를 적고 실행 시켜 보자.
| onEnterFrame = function () { ball._x = ball._x+1; } |
자 이제는 화면상에서 ball 이 이동하는 모습이 보이는가? onEnterFrame 이라는 액션이 가지는 의미는 계속 같은 프레임을 반복실행하면서 프레임을 반복실행할 때 마다 onEnterFrame 안에 들어 있는 명령어를 실행하고, 화면상에 표시하라는 의미로 생각하면 된다. 이것도 이해가 안되면 일단은 무조건 외워 두자.
위처럼 액션스크립트를 코딩해주면 계속해서 오른쪽으로 이동하다가 화면을 벗어나는 것을 볼 수 있다. 그렇다면 어느 일정한 지점에서 다시 맨 왼쪽으로 돌아와 다시 오른쪽으로 움직이게 하려면 어떻게 해야할까? 아래 스크립트처럼 조거문이 하나 더 추가되야 할 것이다.
| ball._x=0; onEnterFrame = function () { ball._x = ball._x+1; //조건문을 만족하면 ball 의 위치를 맨 왼쪽으로 옮김 if(ball._x>500){ ball._x=0; } } |
즉 ball 의 x 좌표가 500보다 커지면 그순간에 baal 의 x 좌표를 0으로 만들어 주면 다시 왼쪽으로 돌아와 오른쪽으로 움직이기 시작할 것이다.
실행을 멈추게 하려면 어떻게 해야 할까?
| ball._x=0; onEnterFrame = function () { ball._x = ball._x+1; //조건문을 만족하면 onEnterFrame 문의 반복실행을 없앰 if (ball._x>500) { delete onEnterFrame; } } |
<토의>
2개의 공이 동시에 움직이게 하려면 어떻게 해야 할까
delete onEnterFrame; 문을 사용 않하고 공의 움직임을 멈추게 할 수 있을까
라. 간단한 경주게임을 만들어 볼 수 있다.
공2개를 등장시켜서 결승선까지 누가 빨리 가는지 경주를 하는 게임을 만들어 보자.
1)고려해야 할 사항에 대해 토의해 보고 변수명을 정해보자.
| 2번프레임에서 경주 실행, 1 번프레임 시작화면 및 정지화면 공1의 인스턴스명 (ball1) 공2의 인스턴스명 (ball2) 결승선 위치 (x좌표가 500) 누가 더 빨리 들어왔는지 판단 기준 (1등이 들어오면 프레임을 이동시켜 전체가 멈추게) 시작 버튼 인스턴스명(start_ok) 컴퓨터가 임의로 속도 차이나도록 구상 (Math.random()문 사용) |
2) 화면구성
 |
3) 액션스크립트
1번프레임 액션
| stop(); // 1번프레임에서 정지 //시작 버튼을 누르면 ball1과 ball2의 위치를 왼쪽끝으로 옮기고 // 2번프레임으로 이동 start_btn.onRelease = function() { ball1._x = 0; ball2._x = 0; gotoAndPlay(2); } |
2번프레임 액션
| //계속반복실행 onEnterFrame = function () { //ball1과 ball2를 기본적으로 x좌표로 5씩 이동시키면서 //random문을 이용하여 임의로 5이내의 값만큼 이동 ball1._x = ball1._x+5+Math.floor(Math.random()*5); ball2._x = ball2._x+5+Math.floor(Math.random()*5); // 결승선위치까지 도달하면 반복실행을 중지하고 1번프레임으로 이동 if (ball1._x>500 || ball2._x>500) { delete onEnterFrame; gotoAndStop(1); } } stop(); |
2번프레임 액션에서 주목해야 할 액션스크립트는
ball1._x = ball1._x+5+ Math.floor (Math.random()*5); 일 것이다.
즉 ball1 의 x 좌표는 원래의 좌표에서 5씩 계속해서 더해가면서 임의로 Math.floor(Math.random()*5) 만큼 즉 0 부터 4사이의 임의의 정수 만큼 더 움직이라는 것이다. 그렇기 때문에 난수값에 의해 어떤 ball 이 먼저 들어올지 알수가 없게 되는 것이다.
<응용> 공을 2개가 아닌 5개가 동시에 움직이게 하려면 어떻게 해보자
또 공대신 멋진 자동차나 비행기로 바꾸어서 경주를 시켜 보자.
