Transcript 플래시 Lesson 28-30 (pp 198-210

트위닝
1. 트위닝이란?
 트위닝(Tweening) 기법
 시작 프레임에서 마지막 프레임의 위치 값이나 변화를
적용하면 중간과정을 매 프레임마다 보여주는 기법
 애니메이션을 쉽게 구성 가능하게 도와준다.
 트위닝 기법의 구분
 모션 트위닝 (Motion Tweening)
 쉐이프 트위닝 (Shape Tweening)
-2-
2. 모션 트위닝 이란?
 모션 트위닝 (Motion Tweening)
 같은 모양을 가지고 위치 이동, 크기변화, 회전 같은 그
룹이나 심벌로 묶여 있는 객체를 움직여주는 기법
 모션 트위닝의 적용 범위
 위치 이동
 작아지는 애니메이션
 점점 투명해지는(어두워지는) 애니메이션
 색상이 변하는 애니메이션
 점점 빨리 움직이는 애니메이션
 중심축을 이용한 회전 애니메이션
 가이드라인을 이용해 마음대로 움직이는 애니메이션
-3-
3. 모션 트위닝의 적용 조건
 모션 트위닝의 적용 조건
 시작과 끝 프레임은 반드시 키프레임으로 정의
 키프레임에 객체는 반드시 심볼객체, 그룹객체이
 그룹객체는 트위닝을 만든 후 수정해서는 안됨
잘못된 모션 트위닝
올바른 모션 트위닝
-4-
4. 쉐이프 트위닝 이란?
 쉐이프 트위닝 (Shape Tweening)
 하나의 객체가 전혀 다른 모양의 객체로 자연스럽게 변
하는 효과로 일종의 몰핑효과로 볼 수 있음
 쉐이프 트위닝의 적용 범위
 글자가 이미지로 변화하는 애니메이션
 이미지가 글자로 변화하는 애니메이션
 이미지가 이미지로 변화하는 애니메이션
 글자가 글자로 변화하는 애니메이션
-5-
5. 쉐이프 트위닝의 적용 조건
 쉐이프 트위닝의 적용 조건
 시작과 끝 프레임은 반드시 키프레임으로 정의
 키프레임의 객체는 반드시 도형객체이어야 함
잘못된 모션 트위닝
올바른 모션 트위닝
-6-
6. Frame 패널(1/2)
 Frame 패널
 프레임에 라벨을 부여하거나 트위닝을 선택하는 옵션
 모션 트위닝 지정시 Frame 패널
③
①
⑤
④
⑥
②
⑦
⑧
⑨
⑦
① Frame : 프레임에 라벨을 입력 ② Label type : 라벨 타입 선택
③ Tweening : 트위닝의 종류 지정 ④ Easing : 애니메이션의 속도 조정
⑤ Scale : 크기 조정하는 모션 트위닝 지정시 선택
⑥ Rotate : 회전하는 애니메이션에서 회전방향과 회전의 횟수를 지정
⑦ Orient to Path, Snap : 경로 안내를 이용할 때 선택
⑧ Sync : 메인무비와 무비심벌의 프레임차이를 조정
⑨ Sound, Effect, Sync : 현재 프레임에 삽입된 사운드에 관련된 옵션
-7-
6. Frame 패널(2/2)
 쉐이프 트위닝 지정시 Frame 패널
②
①
③
④
⑤
① Frame, Label type : 모션 트위닝과 동일(프레임에 라벨을 입력)
② Tweening : 트위닝의 종류 지정
③ Easing : 애니메이션의 속도 조정
④ Blend : 트위닝 과정에서 그림처리 방법 지정
- Distributive : 중간 그림으로 만들어지는 도형을 부드럽게 처리
- Angular : 각진 모서리나 직선이 중간 그림에서도 유지되도록 처리
⑤ Sound, Effect, Sync : 현재 프레임에 삽입된 사운드에 관련된 옵션
-8-
7. 모션 트위닝 예제
 기와 위를 달리는 고양이
 고양이_캐릭터_달리기.fla 파일을 연다.
 Library에 how_01_m 무비클립을 연다.
 10 프레임 위치 고군에서 기와로 드래그 후 “F5”
드래그 후 “F5”
-9-
7. 모션 트위닝 예제
 기와 레이어의 10프레임 클릭 후 “F6”
클릭 후 “F6”
 Shift+Alt+Ctrl+R 을 누르면 눈금자가 생긴다.
- 10 -
7. 모션 트위닝 예제
 반복되는 기와 이미지를 Shift키를 누른 상태로 왼쪽으
로 옮겨준다.
 이 때, 부자연스럽지 않게 하기 위해 같은 그림에 맞춰
준다.
- 11 -
7. 모션 트위닝 예제
 기와 레이어의 가운데 프레임에 우클릭
나오는 메뉴 중 Create Motion Tween 선택.
바뀜
- 12 -
7. 모션 트위닝 예제 완성
- 13 -
8. 쉐이프 트위닝 예제
 모습을 서서히 드러내는 건물
 모습을 서서히 드러내는 건물.fla를 연다.
 50 프레임 위치에서 아래로 드래그 후 “F5”
- 14 -
8. 쉐이프 트위닝 예제
 빛 레이어의 50프레임 클릭 후 “F6”
 빛 레이어의 가운데 프레임 우클릭,
나오는 메뉴 중 Create Shape Tween 클릭
- 15 -
8. 쉐이프 트위닝 예제
 빛 레이어를 제외한 나머지 2개의 레이어에 잠금 활성
화를 시킨다.
잠금
 빛 레이어의 50 프레임 클릭 후 태양을 건물 상단으로
이동
이동
- 16 -
8. 쉐이프 트위닝 예제
 빛 레이어를 잠그고 지구 그림자 레이어의 잠금을 푼다
 지구 그림자 레이어의 50 프레임 클릭 후 “F6”
- 17 -
8. 쉐이프 트위닝 예제
 도구 상자의 Gradient Transform Tool 클릭
 Gradient Transform Tool로 지구 그림자 클릭
- 18 -
8. 쉐이프 트위닝 예제
 그라데이션 조절자를 클릭하여 가로 크기를 줄이고 가
운데 클릭 후 왼쪽 하단으로 이동시킨다.
클릭 후
크기 줄임
클릭 후
이동시킴
 지구 그림자의 레이어 가운데 클릭 후
Create Shape Tween 클릭
- 19 -
8. 쉐이프 트위닝 예제 완성
- 20 -
감사합니다.