트위닝.

Presentation on theme: "트위닝."— Presentation transcript:

1 트위닝

2 1. 트위닝이란? 트위닝(Tweening) 기법 트위닝 기법의 구분
시작 프레임에서 마지막 프레임의 위치 값이나 변화를 적용하면 중간과정을 매 프레임마다 보여주는 기법 애니메이션을 쉽게 구성 가능하게 도와준다. 트위닝 기법의 구분 모션 트위닝 (Motion Tweening) 쉐이프 트위닝 (Shape Tweening)

3 2. 모션 트위닝 이란? 모션 트위닝 (Motion Tweening) 모션 트위닝의 적용 범위
같은 모양을 가지고 위치 이동, 크기변화, 회전 같은 그룹이나 심벌로 묶여 있는 객체를 움직여주는 기법 모션 트위닝의 적용 범위 위치 이동 작아지는 애니메이션 점점 투명해지는(어두워지는) 애니메이션 색상이 변하는 애니메이션 점점 빨리 움직이는 애니메이션 중심축을 이용한 회전 애니메이션 가이드라인을 이용해 마음대로 움직이는 애니메이션

4 3. 모션 트위닝의 적용 조건 모션 트위닝의 적용 조건 시작과 끝 프레임은 반드시 키프레임으로 정의
키프레임에 객체는 반드시 심볼객체, 그룹객체이 그룹객체는 트위닝을 만든 후 수정해서는 안됨 잘못된 모션 트위닝 올바른 모션 트위닝

5 4. 쉐이프 트위닝 이란? 쉐이프 트위닝 (Shape Tweening) 쉐이프 트위닝의 적용 범위
하나의 객체가 전혀 다른 모양의 객체로 자연스럽게 변하는 효과로 일종의 몰핑효과로 볼 수 있음 쉐이프 트위닝의 적용 범위 글자가 이미지로 변화하는 애니메이션 이미지가 글자로 변화하는 애니메이션 이미지가 이미지로 변화하는 애니메이션 글자가 글자로 변화하는 애니메이션

6 5. 쉐이프 트위닝의 적용 조건 쉐이프 트위닝의 적용 조건 시작과 끝 프레임은 반드시 키프레임으로 정의
키프레임의 객체는 반드시 도형객체이어야 함 잘못된 모션 트위닝 올바른 모션 트위닝

7 ⑨ 6. Frame 패널(1/2) Frame 패널 모션 트위닝 지정시 Frame 패널
프레임에 라벨을 부여하거나 트위닝을 선택하는 옵션 모션 트위닝 지정시 Frame 패널 ③ ⑤ ⑨ ① ④ ⑥ ② ⑦ ⑧ ⑦ ① Frame : 프레임에 라벨을 입력 ② Label type : 라벨 타입 선택 ③ Tweening : 트위닝의 종류 지정 ④ Easing : 애니메이션의 속도 조정 ⑤ Scale : 크기 조정하는 모션 트위닝 지정시 선택 ⑥ Rotate : 회전하는 애니메이션에서 회전방향과 회전의 횟수를 지정 ⑦ Orient to Path, Snap : 경로 안내를 이용할 때 선택 ⑧ Sync : 메인무비와 무비심벌의 프레임차이를 조정 ⑨ Sound, Effect, Sync : 현재 프레임에 삽입된 사운드에 관련된 옵션

8 ⑤ ① 6. Frame 패널(2/2) 쉐이프 트위닝 지정시 Frame 패널
② ⑤ ① ③ ④ ① Frame, Label type : 모션 트위닝과 동일(프레임에 라벨을 입력) ② Tweening : 트위닝의 종류 지정 ③ Easing : 애니메이션의 속도 조정 ④ Blend : 트위닝 과정에서 그림처리 방법 지정 - Distributive : 중간 그림으로 만들어지는 도형을 부드럽게 처리 - Angular : 각진 모서리나 직선이 중간 그림에서도 유지되도록 처리 ⑤ Sound, Effect, Sync : 현재 프레임에 삽입된 사운드에 관련된 옵션

9 7. 모션 트위닝 예제 기와 위를 달리는 고양이 고양이_캐릭터_달리기.fla 파일을 연다.
Library에 how_01_m 무비클립을 연다. 10 프레임 위치 고군에서 기와로 드래그 후 “F5” 드래그 후 “F5”

10 7. 모션 트위닝 예제 기와 레이어의 10프레임 클릭 후 “F6” Shift+Alt+Ctrl+R 을 누르면 눈금자가 생긴다.

11 7. 모션 트위닝 예제 반복되는 기와 이미지를 Shift키를 누른 상태로 왼쪽으로 옮겨준다.
이 때, 부자연스럽지 않게 하기 위해 같은 그림에 맞춰준다.

12 7. 모션 트위닝 예제 기와 레이어의 가운데 프레임에 우클릭 나오는 메뉴 중 Create Motion Tween 선택. 바뀜

13 7. 모션 트위닝 예제 완성

14 8. 쉐이프 트위닝 예제 모습을 서서히 드러내는 건물 모습을 서서히 드러내는 건물.fla를 연다.

15 8. 쉐이프 트위닝 예제 빛 레이어의 50프레임 클릭 후 “F6”
빛 레이어의 가운데 프레임 우클릭, 나오는 메뉴 중 Create Shape Tween 클릭

16 8. 쉐이프 트위닝 예제 빛 레이어를 제외한 나머지 2개의 레이어에 잠금 활성화를 시킨다.
빛 레이어의 50 프레임 클릭 후 태양을 건물 상단으로 이동 잠금 이동

17 8. 쉐이프 트위닝 예제 빛 레이어를 잠그고 지구 그림자 레이어의 잠금을 푼다
지구 그림자 레이어의 50 프레임 클릭 후 “F6”

18 8. 쉐이프 트위닝 예제 도구 상자의 Gradient Transform Tool 클릭

19 8. 쉐이프 트위닝 예제 그라데이션 조절자를 클릭하여 가로 크기를 줄이고 가운데 클릭 후 왼쪽 하단으로 이동시킨다.
지구 그림자의 레이어 가운데 클릭 후 Create Shape Tween 클릭 클릭 후 크기 줄임 클릭 후 이동시킴

20 8. 쉐이프 트위닝 예제 완성

21 감사합니다.