『 MX : Motion Tweening Animation 』

안녕하세요. 젠입니다. 어느덧 기초적인 플래시 프로그램의 전체적인 인터페이스를 살펴봤습니다. 물론 몇몇 잘 사용하지 않는 것에 대해서는 설명을 드리지 않았습니다. 이제부터 본격적으로 플래시에 대해서 실용적인 사용법을 배워보도록 하겠습니다. 아마도 플래시를 처음 접하시는 분들에게 제일 궁금한 점은 어떠한 오브젝트가 이리저리 움직이는 것일 겁니다. 즉, 플래시에서는 이를 모션트위닝 효과를 사용했다고 합니다. 기본적으로 액션을 사용하여 애니메이션 시키는 것을 제외하고는 애니메이션을 할 경우, 모션트위닝 애니메이션, 쉐이프트위닝 애니메이션으로 나눠지게 됩니다. 이중 이번 강좌에서는 모션트위닝 애니메이션에 대해서 알아볼까 합니다. 상당부분 Flash5 버젼의 강좌와 비슷하겠지만, 다시 한번 천천히 mx만의 강좌를 진행할까 합니다. 이제 천천히 따라와 보세요. 모션트위닝 애니메이션은 어떠한 오브젝트의 크기, 위치등을 바꾸기 위해서 사용합니다. 예를 들어, 아래처럼 왼쪽에 위치한 동그라미를 오른쪽 끝으로 위치를 옮기다던지... 또한 아래처럼 동그라미의 크기를 작게하거나, 크게 하던지... 아니면, 위치를 옮기면서 동시에 크기를 바꿀 경우... 에 사용하게 됩니다. 여기까지는 쉽게 이해되시죠? "자, 그럼 이러한 효과를 어떻게 낼 수 있는가" 가 여러분들에게는 중요하겠죠? 해당 애니메이션 효과를 내기 위해서 먼저 알아두셔야 하는 것은... 모션트위닝 애니메이션 효과가 적용하기 위해서는 먼저, 해당 오브젝트를 심볼화 시켜야 한다는 겁니다. 뒤에 배울 쉐이프 트위닝 애니메이션의 경우, 심볼화 시키지 않아도 상관없지만, 모션트위닝 애니메이션의 경우는 꼭 심볼화 시켜야 합니다. 플래시를 조금 사용해 보신 분은 아시겠지만, 제일 기본이 되는 심볼은 어떤 것이 있죠? 네. 맞습니다. 버튼심볼, 그래픽심볼, 무비클립심볼이 있습니다. (심볼에 대한 자세한 것들은 다음강좌에서 설명을 해 드리죠....) 이 중 우리는 특별히 액션스크립트를 사용하지 않을 것이므로, 위의 세개의 예제를 그래픽 심볼로 만들어서 애니메이션을 시켜보도록 하겠습니다. 또한 우리는 위의 세개의 예제를 직접 만들어 보면서, 모션트위닝이란 어떤것인지 자연스럽게 알 수 있도록 해보죠. 먼저, 플래시 프로그램을 실행하시고 스테이지에 Oval Tool로 동그라미를 그려넣습니다. (이정도는 자세히 설명 안 드리겠습니다. 앞 강좌에 다 있으니깐요...) 이제 우리는 이 빨간색 동그라미를 그래픽 심볼로 만들겁니다. 먼저, 스테이지 위의 동그라미를 선택한 후, 메뉴의 Insert > Convert to Symbol... 을 누르시던지, 동그라미위에서 오른쪽 마우스 버튼클릭으로 열리는 메뉴에서 Convert to Symbol...을 누르세요. 전 개인적으로 단축키인 F8을 누른답니다. 이 정도는 기본적인 단축키이니 단축키로 연습하시는게 좋을 겁니다. 이제 아래와 같은 대화상자가 뜰겁니다. 여기서 Linkage 부분과 Source 부분은 생각하지 않습니다. 우리가 설정할 부분은 바로 그 위의 Name, Behavior 부분이니깐요. Name 부분에 알맞는 이름을 적습니다. '동그라미'라고 적어도 좋구요. 'Circle'이라고 적어도 좋지요... 이제 그 아래의 Behavior 부분에서 Graphic 을 체크하시고, OK 버튼을 누르세요. 위의 과정으로 빨간색 동그라미는 그래픽심볼로 만들어진 것입니다. F11이나 메뉴의 Window > Library를 누르셔서 라이브러리 패널에 보시면, 우리가 만든 그래픽 심볼이 등록되어 있는 것을 보실 수 있을 겁니다. 기본적으로 우리가 준비해야 될 사항은 다 준비가 됐습니다. 이제 타임라인에 프레임/키프레임등을 삽입해서 애니메이션 효과만 주면 되겠습니다. 타임라인을 보시면, 현재 빨간색 동그라미 그래픽 심볼은 1프레임에 위치해 있을 겁니다. 이제 이 그래픽 심볼이 위치해 있는 레이어의 60프레임에 키프레임을 삽입합니다. 삽입하는 방법은 60프레임을 선택하고, 메뉴의 Insert > Keyframe을 누르시던지 단축키 F6, 또는 마우스 오른쪽 버튼 클릭해서 나오는 메뉴중 Insert Keyframe 하시면 됩니다. 위의 그림처럼 나왔죠? 이제 60프레임에 플레이헤드가 위치한 상태에서 스테이지에 있는 동그라미 그래픽 심볼을 오른쪽으로 옮깁니다. 여러분이 생각하시는 위치로 옮겨주세요. 이제 마지막으로 1프레임에서 60프레임 사이의 아무 프레임이나 마우스로 선택하시고 메뉴의 Insert > Create Motion Tweening 을 선택하시던지, 마우스 오른쪽 클릭 메뉴에서 Create Motion Tweening 을 선택, 또는 Properties 패널의 Tween 부분에서 Motion을 선택합니다. 그러면, 타임라인상의 프레임 구조가 아래의 그림처럼 될 겁니다. 1프레임과 60프레임에는 검정색 점이 표시가 되어있고, 중간 프레임들은 푸른색 배경을 띄게 되며, 화살표시가 나타나게 되죠. 이렇게 되면, 모션트위닝 애니메이션 효과가 1~60 프레임에 적용된 겁니다. 이제 이 무비를 테스트 해보겠습니다. 메뉴의 Control > Test Movie를 클릭하시던지, 단축키 Ctrl+Enter를 눌러주세요. 여러분들도 위처럼 제대로 되나요? 나머지, 크기를 크게 하는 것과 크기와 위치를 동시에 바꾸는 것은 여러분들이 직접 해보세요. 참고로, 크기를 크게 하기 위해서는 60프레임에 위치한 그래픽 심볼의 크기를 자유변형툴(Free Transform Tool)로 조절하면 되구요. 단 위치는 바꾸실 필요가 없습니다. 크기와 위치를 동시에 바꾸는 것은 첫번째 우리가 만든 것에서 30프레임쯤에 키프레임을 삽입하시고, 자유변형툴로 크기를 크게 하면 됩니다. 젠, 이만 물러가겠습니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 본 게시물은 //xen.new21.org, //cafe.daum.net/macromedia, //www.bcpark.net 외의 이동/불펌을 금지합니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ //xen.new21.org