제5강 키보드 활용과 충돌 감지 이해하기

1. 학습목표    ① 키보드를 활용하여 무비클립을 움직일 수 있다.    ② 충돌을 감지하는 액션을 작성할 수 있다.    지난 강좌에서 배운 내용 복습하기       1. Ctrl+F8 을 눌러 무비클립을 만든다.(가운데 십자가가 나오면 그 십자가를 복사해둔 그림을      붙여 넣습니다.) 장면 1을 클릭하여 무비클립에서 빠져나온다.(위 그림의 1-1) 같은 방법으      로 무비클립을 하나 더 만든다.   2. Ctrl+L 을 눌러 라이브러리 창을 띄우고 무비클립을 드래그 하여 장면1의 바탕화면에 붙여      넣는다. (무비클립이외에 비트맵 이미지가 있어도 절대로 지우면 안됩니다.)   3. 바탕화면에 있는 무비클립을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "속성"을 클릭하고      인스턴스 이름을 정한다.   4. 레이어 삽입 버튼을 클릭하여 레이어 2를 만들고 1번 프레임을 클릭한 후(위 그림의 4-1)      마우스 오른쪽 버튼을 클릭하여 "액션"을 클릭하고 다음과 같이 무비클립을 써 넣는다.    function go() {    if (ok && _root.kjh._alpha>0) {                 _root.kjh._alpha -= 2;    }else if (!ok && _root.kjh._alpha<100) {             _root.kjh._alpha += 2;    } } setInterval(go, 25); _root.onMouseDown = function() {      if (ok) {                   ok = 0;              } else {       ok = 1;    } };   사전 팁 :  if문 제대로 활용하기   # 처음 배울 때 제가 언급은 안했지만 if문을 좀 엉성하게 활용하였습니다. 만약 300픽셀까지만    가고 멈추게 하고 싶을 때 if(_root.car._x<300)이라고 했었는데요, 엄밀히 말해서 이렇게    하면 300픽셀을 넘을 수가 있습니다. 예를 들어 다음과 같이 코딩했다고 합시다.   function go() {    if (_root.car._x<300) {       _root.car._x = _root.car._x + 2;    } else {       _root.car._x = 300;    } } setInterval(go, 25);   만약  _root.car._x 값이 299이었다고 합시다. 그러면 300보다 작을 때라는 if문을 만족하기   때문에 x값에 2를 더해주게 됩니다. 그러니까 _root.car._x는 301이 되는 거죠. 그리고 나서   300인 자리로 돌아가게 되는 것입니다. 그래서 interval을 느리게 해주면 300을 넘었다가   300인 자리로 가는 것을 확인할 수 있습니다. 이러한 점을 개선하기 위해서는 다음과 같이   코딩해 주어야 합니다. function go() {    if (_root.car._x+2<300) {       _root.car._x = _root.car._x + 2;    } else {       _root.car._x = 300;    } } setInterval(go, 25);     위와 같이 if문에서 실행할 내용을 미리 실행시켜 본 값을 가지고 비교해 보아야 합니다.   만약 x좌표값이 297이라면 299가 될 테고, 299라면 301이 300보다 작지 않기 때문에 else를   실행하여 300인 좌표로 가는 것입니다. 이렇게 하면 300인 위치를 넘었다가 되돌아가는 일이   없게 되는 거죠. (상당한 노하우입니다. 전문가만의.... ^^)     2. 키보드 활용하기 (키보드를 활용하여 무비클립을 움직일 수 있다.)   1. Ctrl+F8을 눌러 무비클립을 만들고 조그마한 원을 그려 넣는다. (지금까지 쭉 해왔던 내용이라     그림 설명은 생략하겠습니다. ^^) 2. 장면1을 클릭하여 무비클립을 빠져 나오고 Ctrl+L을 눌러 라이브러리 창을 띄운다음 무비클립을     바탕화면에 붙여 넣는다. (역시 생략...) 3. 무비클립의 속성에서 인스턴스 이름을 정한다. (마우스 오른쪽 버튼 눌러 속성 선택. 아시죠? ^^) 4. 레이어를 삽입한 후 2번째 레이어의 1번째 프레임에 다음과 같은 액션을 써 넣는다. (역시 1번    프레임 클릭 후 마우스 오른쪽 버튼 눌러 액션을 선택하는 거 아시죠? *_~) function go() {    //대문자와 소문자를 가립니다. 지켜 써 넣으세요.    if (Key.isDown(Key.RIGHT)) { //오른쪽 방향키를 눌렀을 때       //위의 빨간색 부분이 if문의 조건입니다. 결국 맨 오른쪽에 )가 2개       //들어감을 확인하세요. 하나는 isDown(), 나머지 하나는 if()       _root.ball._x += 5;               //한번에 오른쪽으로 5만큼 이동시킨다.    } else if (Key.isDown(Key.LEFT)) { //왼쪽 방향키를 눌렀을 때       _root.ball._x -= 5;    } else if (Key.isDown(Key.UP)) {   //위쪽 방향키를 눌렀을 때       _root.ball._y -= 5;    //아래쪽으로 갈수록 y는 커지기 때문입니다.    } else if (Key.isDown(Key.DOWN)) { //아래쪽 방향키를 눌렀을 때       _root.ball._y += 5;      } } setInterval(go, 25); 5. Ctrl+Enter를 눌러 확인한다. (키보드의 방향키로 무비클립을 움직일 수 있음을 확인하세요. ^^)       3. 충돌 감지하기(충돌을 감지하는 액션을 이해할 수 있다.)   1. 조그마한 원의 무비클립을 만들고 사각형 모양의 장애물 무비클립을 만듭니다. (Ctrl+F8     누르고... 하는 과정은 앞으로 생략할 예정입니다. 지금까지 쭉~ 연습해왔던 거라서... ^^) 2. 원 무비클립과 장애물 무비클립의 속성에서 인스턴스 이름을 각각 정합니다. (저는 하나는 ball,     다른 하나는 wall이라고 했습니다. 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);       4. 과제(충돌을 감지하는 액션을 작성할 수 있다.)   1. 현재는 오른쪽으로 가다가 충돌해야만 멈춥니다. 위나 아래, 왼쪽으로 가다가 충돌해도 멈추도록    할려면 어떻게 해야할까? 2. 마우스와 충돌하였을 때 점점 사라지게 할려면 어떻게 해야할까?    (힌트 : hitTest( _root._xmouse, _root._ymouse, false) )