3-08. 심볼 활용 - 움직이는 꽃 만들기

제3장 애니메이션 기초

08. 심볼 활용 - 움직이는 꽃 만들기

플래시에서 심볼은 대단한 위력을 가지고 있습니다.

첫째, 파일의 용량을 획기적으로 줄이는데 공헌을 합니다.
둘째, 세 종류의 심볼 즉, 무비클립, 단추, 그래픽은 보통은 단독으로 사용되지만, 서로를 내포할 수도 있다는 점입니다. 무비클립 속에 단추, 다시 그 속에 그래픽이 들어갈 수 있다는 것이지요.
셋째, 심볼이 쌓이는 창고인 라이브러리를 잘 관리하면 작업 효율을 올릴 수 있습니다.

이번 강좌에서는 위의 특징 중 두 번째 것을 중점적으로 알아보는 실습을 해봄으로써 심볼에 관한 개념을 정립해보기로 하겠습니다.
다음 예제를 잘 살펴보시고, 제작 과정을 생각해 보십시오.

이 작품은 심볼의 속성을 이해하는데 많은 도움이 되리라 생각합니다.

대략의 제작 과정은 이렇습니다.




[생각해보기]
마우스가 올려지기 전에는 아무 것도 보이지 않습니다. 이것은 버튼의 키프레임 중에서 히트 프레임에만 꽃 모양이 들어 있습니다.
이 버튼을 무비클립의 1프레임에 넣어 둡니다. 그래야 마우스에 반응을 하겠지요?
그리고 무비클립의 2프레임에서부터는 그래픽 심볼을 가져다 놓고 애니메이션을 나름대로 제작하면 될 것입니다.
무비클립의 1프레임에 Stop 액션을 주어 자동으로 재생되는 것을 막아주고, 버튼에는 마우스가 올려지면 2프레임으로 가서 재생을 하도록 하면 될 것입니다.




가. 그래픽 심볼 만들기

라이브러리를 열어보면(F11키를 누름) 꽃-그래픽 심볼이 들어 있습니다.


이 심볼을 기반으로 시작하겠습니다.



나. 무비 클립과 버튼 만들기

1) Ctrl + F8키를 눌러 [새 심볼]만들기를 실행합니다.
이름은 '꽃-무비클립'으로 주고, 비헤이비어는 [무비클립]으로 한 후 [확인]단추를 누릅니다.
 




2) 1프레임에서 다시 Ctrl + F8을 눌러 이번에는 버튼 심볼을 만듭니다.
이름은 '꽃-단추'로 주고, 비헤이비어는 [단추]로 한 후 [확인] 버튼을 누릅니다.
 




3) 버튼 심볼 편집창에서 히트 프레임에만 F6키를 눌러 키프레임을 생성한 다음 라이브러리에서 '꽃-그래픽' 심볼을 끌어다 넣어둡니다.
 




4) [장면 1]를 클릭하여 빠져 나온 다음 라이브러리의 미리보기에서 '꽃-무비클립'를 더블클릭하여 무비클립 편집창으로 들어갑니다.
그리고 라이브러리에 있는 '꽃-단추'의 미리보기 그림을 드래그하여 창의 가운데 있는 + 에 중심을 맞추어줍니다.
 




5) 2프레임에서 F7키를 눌러 빈 키프레임을 넣고, 다시 라이브러리에 있는 '꽃-그래픽을 드래그하여 + 에 중심을 맞춥니다.
 




6) 2프레임 이후에서 애니메이션을 만들어줍니다.
다음 그림은 20프레임에서 꽃을 왼쪽 아래에 놓고, 알파값을 10%로 조절한 것입니다.
 




7) 2프레임에서 다음 키프레임까지를 [속성 > 트윈 > 모션]을 해주고, 모션의 속성을 필요한 대로 지정해줍니다.
 






다. 액션 스크립트 넣기

1) '꽃-무비클립' 편집창 상태에서 1프레임을 마우스로 클릭하고 F9키를 눌러 액션 창을 불러냅니다.





2) [액션 > 무비제어 > Stop]을 더블클릭합니다.





3) 1프레임에서 스테이지의 버튼 심볼을 선택한 후 [액션 > 무비 > goto]를 더블클릭한 후 다음 그림과 같이 설정해줍니다.
마우스가 올려지면 실행되도록 하려면 [이벤트]를 [롤 오버]로 해주어야 합니다.
 




라. 테스트 및 완성

1) 장면1로 빠져나와서 파일을 저장한 후 Ctrl + Enter 키를 쳐보세요.

2) 다시 편집 모드에서 라이브러리에 있는 꽃-무비클립을 스테이지에 여러 개 가져다 놓으면(Ctrl + D킬를 적절히 이용합니다) 이 페이지의 첫머리에 있는 것과 같은 작품이 됩니다.
 




무비클립 속에 레이어를 더 추가해서 움직임을 다양화하고, 움직이는 무비클립에 필터 및 색상 효과를 추가한 예입니다.