3-02. 간단한 모션 트윈(Motion Tween)

제3장 애니메이션 기초

02. 간단한 모션 트윈

타임라인을 이용하여 개체가 움직이도록 하는 애니메이션은 두 가지 방법이 있습니다.
이번 강좌에서 가장 간단한 모션 트위닝 방법을 익혀봅니다.

1) [파일 > 새파일]을 선택하거나 새 파일 아이콘을 눌러 아무 객체도 들어 있지 않은 새로운 스테이지를 엽니다.
 

2) [도구]에서 [타원형 도구]를 선택하여 원을 그립니다.

* Shift 키를 누르고 그리면 정원이 그려집니다.
 

3) 그려진 개체를 선택하고 마우스 오른쪽 단추를 눌러 [심볼로 변환... ; Convert to symbol]을 실행합니다.
(단축키 : F8)
 

4) 다음과 같은 대화 상자가 나오면 이름을 '원'이라고 주고 [유형 ; Behavior]는 [무비클립 ; Movie Clip]으로 해줍니다.

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

5) 타임라인으로 마우스를 옮겨 20프레임에서 마우스 오른쪽 단추를 눌러 [프레임 삽입 ; Insert Frame]을 실행합니다.(단축키 : F5)
이제 여러분의 타임라인이 아래 그림과 같이 될 것입니다.

 

6) 타임라인에서 1번 프레임을 클릭합니다.
마우스 오른쪽 단추를 눌러 [모션 트윈 만들기; Create Motion Tween]를 실행해봅니다.
([속성] 패널에 있는 [트윈 > 모션]을 해도 됩니다) 

7) 타임라인의 1~20 프레임이 엷은 하늘색으로 바뀌고, 점선이 나타날 것입니다.

* 점선이 나타나는 것은 키프레임과 키프레임 사이의 트윈(Tween)이 완성되지 못했다는 뜻입니다.
 

8) 10번 프레임에서 마우스 오른쪽 단추를 눌러 [키프레임 삽입 ; Insert Key Frame]을 선택합니다. 같은 방법으로 5, 15,20프레임에도 키프레임을 삽입합니다.(단축키 : F6)

 키프레임 삽입 후에는 타임라인의 모양이 다음과 같이 보일 것입니다.

 

9) 이제 다음과 같이 개체를 속성을 변화시켜 보십시오.

1) 프레임 1 : 동그라미를 마우스로 끌어서 스테이지의 왼쪽 위에 가져다 놓으십시오.

2) 프레임 5 : 동그라미를 마우스로 끌어서 스테이지의 오른쪽 아래에 가져다 놓으십시오. 

3) 프레임 10 : 동그라미를 스테이지의 오른쪽 위에 가져다 두십시오.  

4) 프레임 15 : 동그라미를 스테이지의 왼쪽 아래에 가져다 놓으십시오. 

5) 프레임 20 : 동그라미를 마우스로 끌어서 스테이지의 왼쪽 위에 가져다 놓으십시오.

모션 트위닝의 여러 가지 방법 1. 위와 같이 첫 프레임에 키프레임을 넣고, 프레임을 원하는 만큼 늘린 후, [속성 > 트윈 > 모션]을 한 후 키프레임을 삽입하고 개체에 변화를 주는 방법 2. 프레임을 원하는 만큼 늘린 후 [속성 > 트윈 > 모션]을 준 다음, 타임라인에서 키프레임을 삽입할 프레임을 선택하고, 스테이지에서 개체를 변화시키는 방법 3. 키프레임들을 먼저 삽입하고, 해당 키프레임의 개체에 변화를 준 후, 키프레임과 키프레임 사이를 클릭하고 [속성 > 트윈 > 모션]을 실행하는 방법 4. 위의 3 방법과 같이 하되, 첫 프레임과 마지막 프레임을 블록으로 설정한 후 [속성 > 트윈 > 모션]을 실행하는 방법 * 키 프레임과 키프레임 사이를 클릭한 후 타임라인에서 마우스 오른쪽 단추를 눌러 [모션 트윈 만들기]를 하는 방법은 간단한 애니메이션의 경우는 별 문제가 없으나 복잡한 트윈의 경우는 바람직한 방법이 아닙니다.

 

10) [파일] 메뉴에서 [저장]을 선택하고, '원'이란 파일 이름으로 저장합니다.
 

11) Ctrl + Enter 키를 눌러 쇽웨이브 무비를 확인해보십시오.