제1강 액션스크립트의 기본 원리 이해하기

1. 학습목표    ① 애니메이션의 원리를 이해한다.    ② 액션스크립트의 기본 원리를 이해한다.       2. 애니메이션 만들기 (애니메이션의 원리를 이해한다.)   @ 조그만 원이 오른쪽으로 이동하는 애니메이션을 가장 미련하게 구현하는 방법      1. 타원형 도구를 선택한다. 2. "장면1"의 아무 곳에나 마우스를 클릭한 후에 조금 드래그하여 놓는다.(조그만한 원이 생김)       - 선이나 면의 색이 위에서 보여지는 것과 다르다고 염려하지 않아도 됩니다. (어차피 이건         가장 미련한 방법이거든요.^^)       -그래도 한번 따라 해 보면 플래쉬를 이해하는데 도움이 될 듯... 3. 마우스를 타임라인의 2번째 프레임에 위치시키고 마우스 오른쪽 버튼을 클릭하여     "키프레임 삽입"을 클릭한다.(키보드의 "F6"을 눌러도 됩니다. *_*) 4. 화살표 도구를 선택한다. 5. 조그마한 원을 클릭하여 오른쪽으로 조금 이동시켜 놓는다.     -테두리는 가만히 있고 가운데 빨간색면만 조금 이동한다면 Ctrl+z (컨트롤 키와 z키를 함께      누름)로 원래 상태로 만든 후 2번째 프레임을 마우스로 클릭합니다. 그러면 테두리와 면이      함께 선택됩니다. 이제 다시 드래그해보면 테두리와 면이 함께 이동됩니다.     -조그만 원의 왼쪽 위 부분에서 오른쪽 아래쪽까지 드래그해도 전체를 선택할 수 있습니다. 6. 3번째 프레임에 마우스를 놓고 오른쪽 버튼을 클릭하여... (3번부터 5번까지의 과정을     계속해서 반복하여 12번째 프레임까지 만듭니다.) 7. Ctrl+Enter 를 누르면 1초에 걸쳐 왼쪽에서 오른쪽으로 이동하는 점을 확인할 수 있습니다.      * 장점       -애니메이션의 원리를 이해할 수 있다. (만화 영화 만들 때 얼마나 힘든지 몸소 체험함)       -플래쉬의 구현 원리를 터득할 수 있다.    * 단점       -2초 동안 이동하게 하려면 24프레임까지, 5초 동안 이동하게 하려면 60프레임을 만들어야 함       -원이 삐뚤 빼뚤 이동할 수 있음. 정확히 이동하게 하려면 꽤 힘든 노가다가 됨       -원이 이동하는 방향을 바꾸고 싶어지면 처음부터 전부 다시 시작해야 함       -이런 방법으로 비가 오는 것을 애니메이션화 한다고 한다면?  O_O (눈 빠지는 수가 있음)     @ 조그만 원이 오른쪽으로 이동하는 애니메이션을 남들이 다 하는 방법으로 구현하기      1. 타원형 도구를 선택한다. 2. "장면1"의 아무 곳에나 마우스를 클릭한 후에 조금 드래그하여 놓는다.(앞의 방법과 동일) 3. 24번째 프레임(혹은 12번째나 30번째이어도 무방함)에 마우스 커서를 놓고 마우스 오른쪽    버튼을 클릭하여 "키프레임 삽입"을 클릭한다.(마우스로 원하는 프레임을 마우스로 클릭한    후 F6을 눌러도 됩니다.) 4. 화살표 도구를 선택한다. (여기까지는 앞의 방법과 동일합니다.) 5. 조그만 원을 오른쪽 멀리 이동시킨다.    -처음 위치를 뿌옇게라도 확인하고 싶으면 "어니언 스킨"(위 그림의 5번)을 눌러주면 됩니다.    -그 옆에 있는 것들도 하나씩 눌러보면 그 기능을 알 수 있을 것입니다. 6. 1번 프레임을 클릭한 후 Shift 키를 누른채 24번 프레임(맨 끝 프레임)을 클릭한다.(1번에서     24번까지 까맣게 선택됨)    -24번 프레임을 클릭한 후 Shift 키를 누른채 1번 프레임을 클릭해도 됨. ^^ 7. 마우스 오른쪽 버튼을 클릭하여 "모션 트윈 만들기"를 선택합니다. 8. 오른쪽을 가리키는 화살표가 보이면 완성된 것임(위 그림의 8번) Ctrl+Enter로 확인      *장점      -자동으로 중간 프레임을 생성하는 플래쉬의 장점을 활용하여 쉽게 애니메이션을 구현    *단점      -느리게 이동하게 한다거나 빨리 이동하게 하려면 첨부터 다시 해야함      -이런 방법으로 비가 오는 것을 애니메이션화 한다고 한다면?  (고된 작업이 됨-그래도 보통       사람들은 다 이렇게 함)     3. 무비클립 만들어 삽입하기(액션 스크립트의 기본 원리를 이해한다.)       1. Ctrl+F8을 눌러 "무비클립"을 선택한 후 자기가 알아 볼 수 있게 이름을 쓰고 확인 버튼을 클릭      -위 그림의 1-1과 같이 장면 1의 하위 개념으로 "조그만 원"이라는 이름을 볼 수 있습니다.      -위 그림의 1-2와 같이 장면의 중앙에 십자가 모양을 볼 수 있습니다.   2. 타원형 도구를 선택한다.   3. 십자가 주변에 마우스를 클릭한 후에 조금 드래그하여 놓는다. (십자가가 작은 원의 중앙에      놓이도록 만들면 더욱 좋습니다.)   4. "조그만 원"의 왼쪽에 있는 "장면1"을 클릭한 후에 Ctrl+L을 눌러 "라이브러리"를 뜨게 한다.      ("장면1"은 위 그림의 1-1 부분에 있으며 "라이브러리는 4번과 같이 확인할 수 있습니다.)      -"장면1"을 클릭하면 바탕에 아무것도 보이지 않게 되는데 놀랄 필요 없습니다.      -"조그만 원"이라는 무비클립을 마우스로 클릭하면 방금 전에 만든 것을 확인할 수 있습니다.   5. "조그만 원"이라는 무비클립을 마우스로 클릭한 후 "장면1"의 바탕화면에 드래그하여 놓는다.      -위치를 조정하고 싶으면 바탕화면에 놓인 무비클립을 드래하여 조정합니다.(라이브러리에        있는 무비클립이 아닙니다.)   6. 바탕화면에 있는 무비클립을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "속성"을 클릭한다.      -무비클립을 클릭하고 위 그림의 6-1과 같이 "속성"을 클릭해도 됩니다.   7. "인스턴스 이름"란에 본인이 알아볼 수 있도록 이름을 쓴 후 엔터키를 누른다.       (저는 "ball"이라고 했습니다.)      -위 그림의 6-1의 "속성"을 한번 더 클릭하여 창을 사라지게 할 수 있습니다.      -라이브러리 창 또한 닫아도 됩니다.       8. 1번 프레임을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "액션"을 클릭하거나 1번 프레임을       클릭한 후 위 그림의 8-1에서 볼 수 있는 "액션"을 클릭한다.   9. "보기 옵션"을 클릭한 후 "전문가 모드"를 선택한다.(와~, 나도 이제 전문가다! ^^)   10. 위 그림의 10과 같이 액션스크립트를 쳐 넣는다. (세미콜론[;] 넣는 거 잊지 말구요. 언제        써 넣어야하는지 앞으로 강좌를 보면서 생각해 보시구요. ^^)      -영타가 너무 느리면 여러가지로 어렵기 때문에 영타 연습을 해두는 것이 좋습니다.      -"_root.ball._x"는 바탕화면에 있는(_root) ball이라는 무비클립의(_root.ball) x좌표 값을        (_root.ball._x) 의미합니다.      -_root.ball._x=_root.ball._x+5;의 의미는 "바탕화면에 있는 ball이라는 무비클립의 x좌표 값에       5를 더해서 바탕화면에 있는 ball이라는 무비클립의 x좌표로 만들어라." 그런 뜻입니다.       그러니까 ball이라는 무비 클립이 아주 조금(5픽셀만큼) 오른쪽으로 이동하는 것입니다.      -function go(){  ...  } 와 같이 한줄로 써도 되지만 알아 보기 편하게 위와 같이 표현한       것입니다. 물론 처음에는 더 어색해 보이지만 조금 공부해 보면 이런 표현이 익숙해 질       것입니다.      -setInterval(go, 25);는 0.025초마다 go()라는 함수-function go(){  ...  }에 있는 ... 내용-를       실행하라는 뜻입니다. 그러니까 0.025초 후에 ball이라는 무비클립의 x좌표는 맨 처음보다       5만큼 오른쪽에 있게 됩니다. 그리고 또 0.025초 후에는 맨 처음보다 5만큼 오른쪽에 있는 그       위치 보다 5만큼 더 오른쪽으로 가게 됩니다. 그리고 0.025초 후에... 이런 식의 반복에 의해       ball이라는 무비클립이 오른쪽으로 이동하는 것처럼 보이게 되는 것입니다.      -5라는 숫자를 10으로 바꾸어 보면 더 빨리 이동함을 확인할 수 있습니다. 혹은 setInterval에       있는 25라는 숫자를 줄여도 빨리 이동함을 확인할 수 있습니다.      _"_x"대신에 "_y"나 "_width", "_height" 등으로 바꾸어 실행(Ctrl+Enter)시켜 보세요. ^^      *장점     -이동 방향이나 속도를 바꾸고자 할 때 10초 정도의 노력으로 변경할 수 있다.(영타가 좀 될때)     -비가 내리는 것과 같이 수십개의 애니메이션도 5분 이하의 노력으로 구현할 수 있다.     -추가 기능(고급 기능-화려한 애니메이션)의 구현이 아주 용이하다.     -수학적이나 과학적으로 정교한 움직임을 용이하게 구현할 수 있다.(리얼하게 보임)    *단점     -하나의 애니메이션을 구현하도록 하는데는 웬만큼 플래쉬를 만져본 사람이라면 다 할 수 있는      모션트위닝 기법보다 조금 복잡하다.   4. 생각해 보기   1. 무비클립을 오른쪽 아래로 비스듬히 이동시키려면 어떻게 해야할까요? (힌트 : _x, _y) 2. 무비클립이 오른쪽 아래로 비스듬히 이동하면서 커지도록 할려면 어떻게 해야할까?     (힌트 : _x, _y, _width, _height) 3. 무비클립이 오른쪽 아래로 비스듬히 이동하면서 커지면서 회전하도록 하게 하려면 어떻게     해야 할까? (힌트 : _x, _y, _width, _height, _rotation) 4. 무비클립이 오른쪽 아래로 비스듬히 이동하면서 커지면서 회전하면서 점점 투명하게 변하여    사라지게 하려면 어떻게 해야할까? (힌트 : _x, _y, _width, _height, _rotation, _alpha) 5. "물리나라 과제제출방"에 제출된 과제보다 더 멋있게 과제 제출하기. ^^