3-09. 어항 만들기

제3강 애니메이션 기초

09. 어항 만들기

이번 강좌에서는 무비클립을 이용한 애니메이션 제작을 해보겠습니다.
플래시에서 심볼의 위력은 대단하다는 말씀을 지난 강좌에서 드린 적이 있습니다만, 이 예제 역시 무비클립 심볼을 이용한 것이어서 심볼의 위력을 다시 실감할 수 있으리라 생각됩니다.

가. 물고기 그리기

1) 스테이지에 브러쉬를 이용하여 다음과 같이 물고기를 한 마리 그립니다.

저도 그림은 잘 못그립니다만, 잘 그리려고 애를 쓰지 마십시오(^.^). 중요한 건 기능을 익히는 것이니까요.

2) 그린 고기를 선택하고 화살표 도구의 옵션에서 '매끄럽게'를 두어 번 눌어주십시오.
그러면 다음과 같이 윤곽이 매끄럽게 바뀝니다.
 



3) 페인트통을 이용하여 색상을 입힌 후,
F8 키를 눌러 심볼로 변환합니다.
이름은 알아볼 수 있도록 적당히 넣어주시고,
움직이는 물고기로 만들기 위해 비헤이비어는 반드시 '무비클립'으로 설정해줍니다.

[확인] 단추를 누릅니다.

4) 스테이지의 물고기1을 더블클릭합니다.
심볼로 변환된 개체를 더블클릭하면 편집 모드로 들어가게 됩니다.
5프레임 쯤에 F6키를 눌러 키프레임을 넣어줍니다.
그리고 지느러미와 입을 다음과 같이 편집합니다.

입을 벌리고, 꼬리 지느러미가 짧아진 상태를 지속시키기 위해 9프레임에 프레임 삽입(F5)을 해줍니다.

5) [장면1]을 눌러 본 스테이지로 빠져나옵니다.


Ctrl + Enter키를 쳐서 상영을 해보십시오. 무비클립은 무비테스트 상태에서만 동작을 확인할 수 있습니다.

반복 동작을 하는 물고기가 보일 것입니다.
이렇게 무비클립은 무비 속의 무비와 같은 성격을 지니며, 무비클립 제어 액션 스크립트를 이용하여 다양한 애니메이션 및 상호작용을 구현할 수 있습니다.

6) 50프레임 쯤에 키프레임을 넣어주고, 1프레임의 고기는 스테이지의 오른쪽 바깥 쪽에, 50프레임은 왼쪽 바깥 쪽에 놓습니다.
이 두 키프레임 사이를 [속성 > 트윈 > 모션]을 해주면 물고기가 왼쪽에서 오른 쪽으로 이동하면서 입과 지느러미를 움직이는 애니메이션이 되게 됩니다.

7) 레이어를 추가하고 6)의 방법으로 물고기의 움직임을 추가해주면 여러 마리의 고리가 어항에서 노는 모습을 만들 수 있습니다.




나. 수초 그리기

1) 레이어를 추가하고, 레이어 이름을 더블클릭해서 '수초'로 바꾸어 놓습니다.

2) 연필 도구를 이용하여 수초의 윤곽을 그립니다.
칠 색상표에서 녹색 그라디언트 색상을 선택한 후 [색상 혼합기]에서 [선형]으로 바꿉니다.


3) 페인트 통 도구로 수초 내부를 채워넣습니다.
그리고 [칠 변형 도구]를 이용하여 그라데이션의 형태를 그림과 같이 변경합니다.
(안내선의 끝자락에 있는 원을 드래그하여 방향을, 네모를 드래그하여 범위를 조정합니다)
 

4) F8키를 눌러 '수초'란 이름으로 '무비클립'으로 변환해줍니다.

5) '수초' 무비클립을 더블클릭하여 편집창으로 들어간 다음 약간씩의 움직임을 표현해줍니다.
가령 10프레임과 20프레임에 키프레임을 넣어주고, 10프레임에 있는 수초를 자유변형 도구를 이용하여 키와 넓이를 약간 키운 다음 키프레임 사이를 [속성 > 트윈 > 모양]을 해주면 자연스러운 움직임이 만들어집니다.

6) 라이브러리의 '수초'를 드래그하여 여럿을 배치한 후 자유변형도구로 크기와 넓이를 조절하여 자연스러운 수초 숲이 되도록 합니다.




다. 물방울 그리기

1) 작은 원을 그리고, 돋보기를 이용하여 확대한 후 테두리를 없앱니다.

2) 원을 선택한 후 [수정 > 모양 > 칠 가장자리 부드럽게]를 선택한 후 다음과 같이 적당한 값들을 설정하여 가장자리에 블러(Blur) 효과를 줍니다.


3) 화살표 도구로 드래그하여 선택한 후 F8키를 눌러 '물방울'이란 이름으로 [무비클립]으로 변환합니다.

4) '물방울' 무비클립을 더블클릭하여 편집창으로 들어가서는
다시 드래그하여 선택한 다음 F8키를 눌러 [이름]은 '물방울2'로, [비헤이비어]는 무비클립(혹은 그래픽)으로 다시 한번 변환해줍니다.
이유는 물방울이 올라가면서 점점 사라지는 [알파]효과를 주기 위해서입니다.

5) 안내선 레이어를 추가하고 물방울이 움직일 길을 연필로 그려준 다음 적당한 프레임에서 키프레임을 넣어주고 [트윈 > 모션]을 합니다.
 

6) 마지막 프레임에 있는 물방울을 선택하고 [속성 > 색상 > 알파]를 선택, 값을 10 이하로 줍니다.
 

7) [장면1]로 나와서 라이브러리의 '물방울'을 드래그해서 여러 개를 놓습니다.