제6강 키보드 활용과 충돌 감지 활용하기

1. 학습목표    ① 움직이는 무비클립을 만들 수 있다.    ② 움직이는 무비클립을 활용할 수 있다.   지난 강좌에서 배운 내용 복습하기   1. 조그마한 원의 무비클립을 만들고 사각형 모양의 장애물 무비클립을 만듭니다. 2. 원 무비클립과 장애물 무비클립의 속성에서 인스턴스 이름을 각각 정합니다. 3. 레이어를 하나 더 만든 후 첫번째 프레임에 다음과 같이 코딩합니다. function go() {    if (Key.isDown(Key.RIGHT)) {           //오른쪽 방향키를 누르면...       _root.ball._x += 5;       if (_root.ball.hitTest(_root.wall)) {  //ball과 wall이 충돌하면...          _root.ball._x -= 5;       }    } else if (Key.isDown(Key.LEFT)) {       _root.ball._x -= 5;    } else if (Key.isDown(Key.UP)) {       _root.ball._y -= 5;    } else if (Key.isDown(Key.DOWN)) {       _root.ball._y += 5;    } } setInterval(go, 25);       2. 움직이는 무비클립 만들기(움직이는 무비클립을 만들 수 있다.)   @ 일반적으로 만드는 움직이는 무비클립     1. Ctrl+F8을 눌러 무비클립을 생성하고 첫번째 프레임에 그림을 그려 넣는다. (위 그림의 1-1과    같이 무비클립 명이 나타난 상태에서 첫번째 프레임에 그림을 그려 넣어야 합니다. ^^) 2. 두번째 프레임을 마우스로 클릭한 후 오른쪽 버튼을 눌러 "빈 키프레임 삽입"을 선택한다. 3. 첫번째 프레임에 이어지는 그림을 그려 넣고 네번째 프레임을... 원하는 애니메이션이 완성    될 때까지 계속해서 빈 키프레임을 삽입하고 그림을 그려 넣는다. (1강에서 다루었던 가장    미련하게 애니메이션 구현하는 방법과 같습니다. ^^  저는 사람이 달려가는 그림을 구현해    보았습니다.[인터넷에서 따온 거이긴 하지만... ^^]) 4. 장면1을 크릭하여 무비클립을 빠져나가고 Ctrl+L을 눌러 라이브러이 창을 띄우고 무비클립을    바탕화면에 붙인 다음 Ctrl+Enter로 확인한다.   @ 움직이는 gif 파일을 이용하여 무비클립 만들기   1. 파일->라이브러리로 가져오기를 선택합니다. (문서에 라이브러리 항목이 이미 존재합니다     라는 경고창이 뜨기도 하지만 무시해도 좋습니다. 그래도 꺼림직하면 기존항목 교체 안함을     선택하면 되구요. ^^) 2. 해당파일을 찾아 열기 버튼을 누릅니다. 3. Ctrl+L을 눌러 라이브러리 창을 띄워보면 해당 무비클립이 생성되었음을 확인할 수 있다. 4. 무비클립의 아이콘 모양을 더블 클릭하면 무비클립을 편집할 수 있다. (이 때 자동으로     생성된 무비 클립을 보면 십자가 표시 오른쪽 아래로 들어가 있습니다. 위 그림의 4-1과     같이 x,y가 모두 0이죠.) 5. width값의 -절반 값(-25와 같이 마이너스를 붙여 주세요.)을 x에 넣고 height의 -절반 값을     y에 넣어 십자가가 가운데로 오도록 만들고 나머지 프레임에 있는 것들도 모두 십자가가     가운데 오도록 만든다. (나중에 무비 클립을 뒤집을 때나 회전할 때 가운데를 중심으로 변형     시키기 위해서입니다.)   사후 팁 :  라이브러리 정리하기   # 이것 저것 그림 복사해서 무비클립을 만들면 지저분한 비트맵 이미지가 생깁니다. 그렇다고    지울 수도 없습니다.(지우면 무비클립의 내용이 사라짐) 이 때 폴더 하나를 만들어서 비트맵    이미지를 모두 넣어서 보관할 수 있습니다. # 혹은 하나의 여러개의 무비클립으로 하나의 무비클립을 만드는 경우도 있는데요, 이 때 같은    계열의 무비클립을 폴더에 넣어 보기 좋고 활용하기 편하게 할 수 있습니다.   1. 자동으로 생성된 무비틀립의 이름 부분을 더블 클릭하면 이름을 변경할 수 있다. (아이콘    부분을 더블클릭하면 무비클립을 편집할 수 있게 됩니다.) 2. "새 폴더" 아이콘을 클릭하면 폴더가 생성되고 알아보기 쉽게 이름을 써 넣는다. 3. Ctrl키를 누른채 비트맵 이미지를 하나씩 선택하여 폴더에 드래그하여 넣는다. (탐색기 사용     하는 방법과 동일합니다. ^^)       3. 키보드를 이용한 움직이는 무비클립 제어(움직이는 무비클립을 활용할 수 있다.)     1. 두번째의 과정과 같은 방법으로 무비클립을 만들어 장면1의 바탕화면에 붙여 넣고 Ctrl+Enter로    확인해 보면 쉴새 없이 무비클립이 움직인다. 키보드를 누를 때 움직이는 모션을 나타내고 싶기    때문에 처음에는 움직이지 않아야 한다. 이를 위해서 라이브러리 창에 있는 움직이는 무비클립의    아이콘을 더블 클릭하여 무비 클립 편집 창을 만들고(위 그림의 1-1과 같은 상태) 레이어를 추가    (1-2)한 다음에 레이어 2의 첫번째 프레임에 다음과 같은 액션(1-3)을 쓴다. stop();   2. 장면1을 클릭하여 무비크립 편집창에서 나오고, Ctrl+L로 라이브러리 창을 띄운 후 장면1의 바탕    화면에 움직이는 무비클립을 붙여 넣는다. 그리고 속성에서 인스턴스 이름을 써 넣는다.   3. 레이어를 하나 더 추가한 후 첫번째 프레임에 다음과 같은 액션을 쳐 넣는다. function go() {    if (Key.isDown(Key.RIGHT)) {       _root.sonic._x += 5;       _root.sonic._xscale=100;  //원래 무비클립 그래로(오른쪽으로 향하는...)       _root.sonic.play();         //무비클립의 애니메이션이 실행되도록 합니다.    } else if (Key.isDown(Key.LEFT)) {       _root.sonic._x -= 5;       _root.sonic._xscale=-100; //무비클립 수평 뒤집기 (영구기님의 도움!)       _root.sonic.play();         //무비클립의 애니메이션이 실행되도록 합니다.    }else    {       _root.sonic.stop();  //키보드를 누르지 않았을 땐 애니메이션을 멈춥니다.    } } setInterval(go, 25);   4. Ctrl+Enter로 확인한다. (오른쪽 방향키를 누르면 오른쪽으로 뛰어가고 왼쪽 방향키를 누르면    왼쪽으로 뛰어가는 것을 확인할 수 있습니다.)       4. 움직이는 무비클립 자동 제어(움직이는 무비클립을 활용할 수 있다.)     1. 움직이는 무비클립을 만들고 장면1을 클릭하여 무비클립을 빠져 나간 후 Ctrl+L을 눌러 라이브러     리 창을 띄운다. (저는 벌레 그림의 움직이는 gif를 가지고 만들었습니다.  물론 x,y값을 변경하여     십자가가 무비클립의 가운데 오도록 만들었구요.(1-1) 이 벌레는 계속적으로 움직여야 하기     때문에 레이어를 추가해서 stop()이라는 액션을 쓸 필요가 없습니다.) 2. 레이어 1의 첫번째 프레임을 클릭한 후 움직이는 벌레를 드래그 하여 장면 1의 바탕화면에 붙여     넣는다. (액션을 전문으로 쓰는 레이어와 무비클립이 들어 있는 레이어를 분리하고자 합니다.     왜냐하면.... 전문가들이 다 이렇게 하니까.... ^^) 3. 무비클립을 클릭한 후 속성의 인스턴스 이름을 입력한다. 4. 레이어 2의 첫번째 프레임에 다음과 같이 벌레의 초기 속력을 정의한다. (go함수 앞에 쓰세요.     변수 명은 맘대로 해도 됩니다. 저는 벌레의 속도[velocity]를 따서...) worm_v=2; 5. 벌레 무비클립을 마우스 오른쪽 버튼으로 클릭한 후 "액션"을 선택한다. (첫번째 프레임이     아닙니다. 지금까지의 액션 입력과 조금 다름을 주의하세요.) 6. 다음과 같이 입력한다. onClipEvent (enterFrame) {            //항상 다음을 실행하라는 뜻입니다.    if (this._x>450 || this._x<300) {   //특정 범위를 벗어나면       _root.worm_v *= -1;                //속도가 -값을 가지게 합니다.     }                                      //속도가 -가 되면 방향이 반대로 바뀝니다.    this._x += _root.worm_v;        //속도를 이 무비클립(this)에 적용 } 6. Ctrl+Enter로 확인한다.     5. 과제(움직이는 무비클립을 활용할 수 있다.)   1. 주인공이 벌레와 부딪치면 주인공 그림의 위 아래가 뒤집어져서 아래로 떨어지게 할려면 어떻게    해야할까? (힌트 : hitTest, _yscale, _y) 2. 사다리와 같은 특정한 무비클립이 있는 부근에서만 위쪽으로 움직일 수 있도록 할려면 어떻게    해야할까? (힌트 : if, Key.isDown)   # 눈치 채셨는지 모르겠지만 추억의 게임 "너구리"를 플래쉬로 구현할려고 합니다. ^^ 다음 시간에   장애물을 건너 뛰는 것을 구현할 예정입니다. 포물선 운동이라는 고급 기능을 배울 것입니다.   그렇다고 두려워할 필요는 없습니다. 이해하는 것이 약간 까다롭긴 하지만 플래쉬로 구현하는   것은 2줄이면 끝나니까요. ^^   최대한 쉽게 이해하도록 강의를 준비해 보겠습니다.