3-10. 무비클립을 활용한 어항 만들기

제3장 애니메이션 기초

3-10. 무비클립을 활용한 어항 만들기

앞에서 만들어 본 어항을 변형시켜 다음과 같이 만들어봅시다.
아래 그림을 보시면 고기가 왕복을 하고 있습니다. 그리고 고기들의 움직이는 속도가 각기 달라서 좀더 자연스러움을 느낄 수 있을 것입니다.

이것은 무비클립을 적절히 활용하면 가능합니다.

가. 물고기 무비클립 만들기

앞서에서는 입과 지느러미만 움직이는 무비클립을 만들어 활용하였습니다만, 이번에는 그 무비클립을 다시 무비클립 속에 넣어 왕복 운동을 하도록 제작해봅시다.
위의 예제를 다운로드하여 불러오기를 하십시오.




1) [삽입 > 새 심볼] 혹은 Ctrl + F8키를 눌러 다음과 같이 새로운 심볼을 만듭니다.





2) '물고기-무비1' 편집창에서 라이브러리에 있는 '물고기1'을 드래그하여 가져다 놓습니다.
그리고 [속성] 창을 이용하여 물고기의 크기(W, H 중 W값)과 X, Y 좌표를 확인해 둡니다.
 

여기서 좌표의 개념을 이해하고 넘어갑시다.
다음 그림에서 표시해 두었습니다만, 주 스테이지에서의 X, Y 좌표와 무비클립 스테이지에서의 X, Y 좌표는 중심점이 다릅니다.

주 스테이지에서는 스테이지의 왼쪽 위 모서리가 (0,0)가 됩니다.
하지만 무비클립 편집창에서는 가운데 있는 + 표시 부분이 (0,0)이 되는 것입니다.

플래시의 기본 해상도는 가로 550, 세로 400 픽셀입니다.
따라서 무비클립 스테이지의 중심점(0,0)을 중심으로 물고기가 주 스테이지에서 보일 수 있는 영역은 가로 좌표를 중심으로 해상도 550의 절반인 -225에서 +225 사이가 될 것입니다.

위에서 다소 장황하게 좌표 개념을 말씀드렸습니다만, 이것은 뒤에서 다룰 콜백함수를 이용한 액션 스크립트 구현에서 자주 사용할 개념이므로 이해를 해둘 필요가 있습니다.




3) 이제 물고기가 스테이지 안에서 왕복 운동을 하도록 해봅시다.
'물고기-무비' 편집창에서 1프레임의 물고기를 x 좌표 상으로 225 위치에 둡니다.(실제 물고기는 꼭 어항의 끝까지 갔다가 돌아오는 법은 없지만, 원리 이해를 위해 이런 작업을 하는 것입니다)
물고기를 선택하고, [속성] 창에서 x 값을 키보드로 입력해주면 됩니다.





4) 60프레임 쯤에 F6키를 눌러 키프레임을 넣습니다.
그리고 물고기를 선택한 후 [속성]에서 -만 추가하여 x 좌표 값을 중심점을 기준으로  반대 위치가 되도록 합니다.




5) 70프레임에 키프레임을 넣습니다. 그리고 [수정 > 변형 > 수평 뒤집기]를 합니다.




6) 다시 130프레임에 키프레임을 넣어주고 물고기의 x 좌표를 225로 변경해줍니다.




7) 140프레임에 키프레임을 넣어주고 물고기를 선택한 후 [수정 > 변형 > 수평 뒤집기]를 합니다.




8) 1프레임을 클릭하고, Shift키를 누르고 마지막 140프레임을 클릭하여 타임라인 전체를 불록으로 설정합니다.




9) [속성 > 트윈 > 모션]을 해줍니다.
어항의 양쪽 끝점으로 간 고기가 찌그러지면서 방향을 돌리게 될 것입니다. 이 문제는 60~70, 130~140 프레임 사이의 모션을 해제해 줌으로써 어색함을 다소 줄일 수 있습니다.

이로써 물고기의 왕복 운동이 완성이 되었습니다.





10) [장면1]로 나가서 [라이브러리]의 '물고기-무비1'을 드래그하여 스테이지의 가로상의 가운데에 놓습니다.
Ctrl + Enter키를 눌러 테스트 해보십시오.




나. 무비클립 복제를 통해 다양한 무비클립 만들기

한 마리의 고기가 어항 속을 노닐고 있습니다. 여러 마리의 고기가 다양한 행동 반경과 속도로 움직이게 하려면 어떻게 하면 될까요?




1) 가장 손쉬운 방법은 무비클립 복제 후 수정입니다.
라이브러리에서 '물고기-무비1'을 클릭하고, 마우스 오른쪽 단추를 눌러 [복제]를 선택합니다.





2) [심볼 복제]문답 상자에서 이름을 '물고기-무비2'로 고치고, [비헤이비어]는 [무비클립]을 설정한 후 [확인]단추를 누릅니다.

이로써 '물고기-무비1'과 똑같은 무비클립이 만들어졌음을 리스트를 통해 확인할 수 있을 것입니다. 




3) 라이브러리의 '물고기-무비2' 미리보기 그림을 더블클릭하여 편집 모드로 들어갑니다.

타임라인의 키프레임 사이를 클릭하고 Shift + F5키를 누르면 프레임을 삭제할 수 있습니다.
F5키를 누르면 프레임을 추가할 수 있습니다.
프레임을 삭제하면 물고기의 운동 속도가 빨라질 것이고, 늘려주면 느리게 됩니다.

왼쪽 끝점과 오른쪽 끝점 키프레임에서 물고기의 X 좌표를 조정해주면 운동 반경이 달라지게 됩니다.




4) 1)~3)의 방법으로 몇 개 더 무비클립을 만들어 보십시오.
그리고 만들어진 무비클립은 [장면1]의 스테이지에 가져다 놓고, Ctrl + Enter키를 쳐서 상영을 해보십시오.




다. 무비클립 크기와 색상 바꾸기

[장면1]에서 물고기의 크기를 [자유 변형 도구; Free Transform Tool]를 이용하여 크기 변경이나 모양 변경을 하면 그것이 무비클립 전체에 그대로 적용됩니다.

물고기를 반대로 움직이게 하려면 무비클립을 선택하고, [수정 > 변형 > 수평 뒤집기]를 하면 되죠.

또한, 색상을 변경하여 다양한 색깔의 물고기를 만들 수도 있습니다.




1) 스테이지의 물고기 한 마리를 선택합니다.




2) [속성]에서 [색상 > 고급]을 선택합니다.
[설정] 단추를 누르면 다음과 같은 문답 상자가 나옵니다.

물고기를 보면서 색상을 조절하면 됩니다.
원하는 색상이 되었다면 [확인]단추를 눌러줍니다.

3) 레이어를 몇 개 만들어 수초와 물방울 레이어를 사이에 두고 아래 위로 배치한 다음 물고기 무비클립들을 위치시키면 실감나는 어항이 됩니다.