『 MX : 쉐이프 힌트를 이용한 쉐이프 트위닝 애니메이션(Shape Tweening Animation) 』

오늘은 저번 강좌에 이어서 쉐이프 트위닝 애니메이션에 대해서 다룰 겁니다. 저번과 다르게 이번에는 쉐이프 힌트라는 것을 사용해서 같은 애니메이션을 조금더 다르게 표현해 보고자 합니다. 시작합니다. 먼저, 두개의 플래시 무비를 비교해서 봅니다. 위의 무비는 단순한 쉐이프 트위닝 효과를 낸 것입니다. 그래서 시계방향으로 비틀면서 애니메이션이 됩니다. 아래는 쉐이프 힌트를 사용해서 좀더 알맞게 고친 효과의 무비입니다. 이번 것은 동그라미의 좌상/좌하/우상/우하를 사각형의 각각의 자리로 변하도록 만든겁니다. 여러분도 그렇게 보이죠? 쉐이프 힌트의 기능에 대해서 대충 눈치 채셨나요? 네 맞습니다. 쉐이프 트위닝 효과를 좀 더 제작자의 의도대로 표현되기 위한 보충적인 기능이 바로 쉐이프 힌트입니다. 그러면, 어떻게 사용하는지 한번 예제를 통해서 따라해 보도록 합니다. 먼저, 1프레임에 Oval툴로 동그라미를 하나 그립니다. 다음으로, 40프레임쯤에 빈키프레임을 삽입합니다.(메뉴 Insert > Blank Keyframe) 빈 키프레임이기 때문에 스테이지에는 아무것도 없게됩니다. 이제 40프레임에 새로 사각형을 하나 그려넣습니다. 저는 구분되게 하기 위해서 색깔도 바꿨습니다. 타임라인상에서 1~40프레임 중간을 마우스로 선택하시고, Properties 패널의 Tweening 부분에서 Shape를 선택합니다. 그러면, 타임라인의 모습은 아래처럼 바뀌겠죠? 이제 우리는 쉐이프 힌트라는 것을 사용하기 위해서 1프레임을 선택하고 메뉴의 Modify > Shape > Add Shape Hint (Ctrl+Shift+H)를 선택합니다. 스테이지를 보세요. 동그라미 안에 ⓐ라는 표시가 나타나죠? 이것이 바로 쉐이프 힌트입니다. 위의 과정을 세번더 합니다. 그러면, ⓑ, ⓒ, ⓓ도 생겨날 겁니다. 네개의 쉐이프 힌트는 겹쳐져 있기 때문에 마우스로 끌어보면, 뒤에 다 있을 겁니다. 이제 40프레임을 선택하고, 스테이지의 사각형을 보세요. ⓓ가 보일 겁니다. ⓐ, ⓑ, ⓒ는 ⓓ뒤에 겹쳐져 있기 때문에 역시 마우스로 드래그 해 보세요. 이제 우리는 이 쉐이프 힌트들을 잘 정렬해서 원하는 스타일로 쉐이프 트위닝 효과가 일어나도록 해 보겠습니다. ⓐ는 왼쪽 위, ⓑ는 왼쪽 아래, ⓒ는 오른쪽 아래, ⓓ는 오른쪽 위로 배치를 해 보겠습니다. 1프레임과 40프레임에 있는 쉐이프 힌트를 다 배치합니다. 아래는 1프레임에 있는 쉐이프 힌트를 배치한 모습입니다. 40프레임에 있는 쉐이프 힌트를 배치한 모습입니다. 이제 이 애니메이션을 테스트 해 봅니다. 처음에 보여드렸던 무비와 비슷하게 바뀌죠? 여러분들은 쉐이프 힌트 들을 이곳저곳으로 옮겨보면서, 테스트 해보세요. 색다른 쉐이프 트위닝 효과를 보실 수 있을 겁니다. 참고로, 이 쉐이프 힌트를 다시 없애기 위해서는 메뉴의 Modify > Shape > Remove All Hints를 선택하면 됩니다. 젠 이만 물러갑니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 본 게시물은 //xen.new21.org, //cafe.daum.net/macromedia, //www.bcpark.net 외의 이동/불펌을 금지합니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ //xen.new21.org