플래시 해외명작 무작정 따라하기

첫째마당. 내셔널지오그래픽의 Kelp Forest

01. 전체 작업과정 살펴보기
● Monterey Bay의 Kelp Forest를 예제로 선택한 이유
완성된 kelp.fla 파일의 사이즈 리포트(Size Report)

● 내비게이션 분석하기
잠깐만요 - SWF 파일과 HTML 파일을 구별하는 방법

02장. 초기화면 만들기
● 전체 작업과정 살펴보기

1. 제작할 플래시 무비의 기본 속성 설정하기
과정1 플래시 무비 다운받기
열어본 파일 삭제하기
필요한 플래시 무비 찾기
과정2 원작 플래시 무비 사이즈 파악하기
과정3 무비 속성 설정하고 저장하기
잠깐만요- 불러올 예제, 준비된 소스, 완성된 예제 사용하는 방법

2. 잠수정1, 잠수정2 만들기
과정1 일러스트레이터에서 잠수정 그려 플래시로 가져오기
일러스트레이터에서 잠수정 그리기
일러스트레이터에서 그린 그림을 SWF 파일로 익스포트하기
익스포트한 잠수정 그림을 플래시에서 임포트하기
잠깐만요-플래시 포맷 옵션 대화상자
과정2 잠수정1, 잠수정2 무비클립으로 등록하기
화살표 도구로 드래그해 선택하기
라이브러리에 등록하기
잠깐만요-심벌을 만드는 세 가지 방법
과정3 잠수정1,잠수정2 무비클립 배치하기
잠수정1 무비클립 배치하기
잠수정2 무비클립 배치하기

3. 잠수정 뚜껑 무비클립과 작업 아웃라인 만들기
과정1 잠수정 뚜껑 무비클립 만들기
과정2 무비의 아웃라인 그리기
잠깐만요-복사하기와 붙여넣기

4. 시작 텍스트 버튼 만들기
과정1 텍스트 입력해 깜박이는 효과 만들기
깜빡이는 효과 만들기
과정2 시작 버튼 영역 만들기
버튼 영역 그리기
버튼 심벌로 만들기

5. 잠수정 설명글과 내비게이션 버튼 만들기
과정1 잠수정 설명글1 만들기
레이어 추가한 후 텍스트 복사해서 배치하기
설명1 무비클립 만들기
과정2 내비게이션 버튼 만들기
화살표 만들기
화살표를 버튼 심벌로 만들기
왼쪽으로 향하는 화살표 버튼 만들기
처음과 마지막 화살표 버튼에 Break Apart하기
화살표 버튼에 Go To 액션 스크립트 넣기
프레임에 Stop 액션 넣기
잠수정 설명글2 만들기
잠깐만요-디바이스 폰트 사용하기(Use Device Fonts)

03장. surface와 수초 만들기
● 전체 작업 과정 살펴보기

6. surface(해안풍경) 만들기
과정1 바다사진 만들기
잠깐만요-트레이스 비트맵(Trace Bitmap)
과정2 바다 무비클립을 하늘과 바다로 나누기
과정3 수평선이 멀게 느껴지도록 효과주기

7. 수초 만들기
과정1 일러스트레이터에서 수초 그려 플래시로 가져오기
잠깐만요-개체 선택하고 변형하기

도전! 파워플래셔-강력한 그레이디언트 마스터하기
1. 여섯 개의 그레이디언트로 만든 눈알-gradient1.fla
2. 바닥에 비치는 입체적인 육면체 만들기-gradient2.fla

04장. 내비게이션에 맞게 애니메이션 만들기
● 전체 작업과정 살펴보기

8. 원작 내비게이션을 단순화한 모형 애니메이션
과정1 애니메이션 만들기
라이브러리 공유하기
black 무비클립이 사라지는 애니메이션
surface에서 canopy로 진행하는 애니메이션
canopy에서 surface로 역진행하는 애니메이션
나머지 애니메이션
과정2 레이블 넣고 액션 설정하기
레이블 넣기
Stop 액션 넣기
Go To 액션 넣기

9. 내비게이션 버튼 만들기
과정1 작은 잠수정과 내비게이션 버튼 만들기
작은 잠수정 만들기
비활성화된 내비게이션 버튼 만들기
활성화된 내비게이션 버튼 만들기
잠깐만요-모니터의 해상도 설정

10. 초기화면에서 surface로 진행하는 애니메이션
과정1 시작버튼과 설명1, 2 점차 사라지게 만들기
과정2 잠수정 뚜껑이 열리는 애니메이션 만들기
label 레이어에 레이블 이름 붙이기
action 레이어에 Stop 액션 설정하기
시작 버튼에 Go To 액션 설정하기

11. surface에서 canopy로 진행하는 애니메이션I
과정1 바다시진 애니메이션하기
과정2 바다 속 배경 만들기
그레이디언트 만들기
canopy에 알맞게 밝기 조절하기

12. surface에서 canopy로 진행하는 애니메이션II
과정1 수초 애니메이션 만들기
수초 관련 무비클립 만들기
수초에 초록빛이 나도록 효과주기
수면수초 무비클립 수정하기
모든 수초에 그레이디언트 적용하기
과정2 수초에 애니메이션 주기
잠깐만요-플래시 처리 속도

13. surface에서 canopy로 진행하는 애니메이션III
과정1 어색함1 해결하기
과정2 어색함2, 3, 4 해결하기
어색함2 해결하기(바다경계 만들기)
어색함3 해결하기
어색함4 해결하기(태양빛 추가)

14. surface에서 canopy로 진행하는 애니메이션Ⅳ
과정1 내비게이션 버튼에 Go To 액션 넣기

15. canopy에서 surface로 역진행하는 애니메이션
과정1 역진행하는 애니메이션 복사해 만들기
Reverse Frames 적용하고 애니메이션 왜곡현상 보정하기
잠깐만요-Frame 패널 / Reverse Frames 할 때 주의할 점

16. canopy에서 understory로 진행하는 애니메이션
과정1 키프레임 만들기
understory 상태에 맞게 수초 위치 수정하기
과정2 바다 속 색상 진하게 만들기
17. understory에서 canopy로 역진행하는 애니메이션
과정1 understory에서 canopy로 역진행하는 애니메이션
과정2 understory에서 canopy로 진행 및 역진행하는 애니메이션

도전! 파워플래셔-플래시 무비의 애니메이션 속도에 관하여
1. 플래시 무비가 풀(Full) 스크린으로 보여질 때 느려집니다.
2. 큰 심벌의 움직임은 느려집니다.
3. 움직이는 개체의 수가 많을수록 느려집니다.
4. 애니메이션이 느려지는 것은 파일 용량과는 아무 상관 없습니다.

05장. 버튼, 사운드 추가하고 마무리하기
● 전체 작업과정 살펴보기

18. 갈매기 버튼 만들기
과정1 갈매기 그려 애니메이션 만들기
날갯짓하는 갈매기 만들기
과정2 모션 가이드로 날아가는 갈매기 만들기
갈매기진행 무비클립 만들기
모션가이드 만들기
과정3 갈매기 버튼 만들기
버튼 영역 만들기
Tell Target 액션 사용하기
Get URL 액션 사용하기
잠깐만요-Orient to Path, 그리고 중심점이 다른 심벌의 회전

19. 물고기 버튼과 산호 버튼 만들기
과정1 포토샵에서 이미지 편집하여 PNG 파일로 만들기
과정2 플래시에서 PNG 파일 임포트하기
해당 이미지를 배치할 프레임으로 이동하기
과정3 PNG 이미지를 버튼 기능을 하는 무비클립으로 만들기
물고기1 무비클립을 만들어 다시 버튼 심벌로 만들기
과정4 헤엄치는 물고기 무비클립 만들기
Tell Target 액션 넣기
잠깐만요-산호를 비롯한 바다 밑바닥에 대해

20. 사운드 추가하기
과정1 사운드 추가하기

도전! 파워플래셔 - 사운드 멈추기와 사운드에 효과주기
1. 특정 사운드 멈추기
2. 모든 사운드 멈추기
3. Sound 패널

21. Html 파일 만들고 마무리하기
과정1 제작한 파일을 원작과 동일한 상황에서 보기
HTML 파일에 SWF 파일 삽입하기


둘째마당, Gabo Mendoza의 Gabocorp Trailer

06 전체 작업과정 살펴보기
● Gabo Mendoza의 Gabocorp Trailer를 예제로 선택한 이유
● 스토리보드 분석하기

07 Scene1의 로고 애니메이션 만들기
● 전체 작업과정 살펴보기
1. 해상도가 다른 모니터에 유연한 플래시 무비 만들기
과정1 1200x200 사이즈로 보여줄 마스크 만들기
마스크 만들고 무비의 아웃라인 그리기
과정2 퍼블리시해 브라우저에서 무비 확인하기

2. 포토샵에서 Motion Blur 필터로 로고 만들기
과정1 포토샵에서 Gabocorp 로고에 Motion Blur 적용하기
logoblur1.png 파일과 logoblur2.png 파일 만들기

3. 로고 프레임 바이 프레임 애니메이션 만들기Ⅰ
과정1 logoblur1 심벌이 왼쪽에서 오른쪽으로 날아가는 애니메이션 만들기
과정2 logoblur2 심벌이 왼쪽에서 오른쪽으로 날아가는 애니메이션 만들기

4. 로고 프레임 바이 프레임 애니메이션 만들기Ⅱ
과정1 모션트위닝 적용해 애니메이션 만들기
과정2 logoblur1, logoblur2 애니메이션 만들기

08 Scene2의 언덕 애니메이션 만들기
● 전체 작업과정 살펴보기
5. 고목 만들기
과정1 무시무시한 고목 만들기
일러스트레이터에서 고목 그려서 플래시로 가져오기
포토샵에서 고목에 질감 넣기
포토샵에서 그려준 고목의 질감만을 PNG 파일로 만들기
잠깐만요-포토샵에서 문지르기 도구(Smudge Tool)

6. 잡초 만들기
과정1 잡초1 무비클립 만들기
과정2 잡초2, 잡초3 무비클립 만들기

7. 언덕 만들기
과정1 언덕 만들고 Scene2 추가하기
잠깐만요-Scene 이용하기(Scene 패널)
과정2 언덕, 고목, 잡초 배치하기
언덕 배치하기
고목 배치하기
잡초 배치하기
잠깐만요-확대 변형에서 발생하는 문제점

8. 언덕 애니메이션 만들기
과정1 언덕1이 가까워지는 애니메이션 만들기
과정2 언덕2가 가까워지는 애니메이션 만들기
과정3 언덕3, 4, 5 애니메이션 만들고 수정하기
수정하기

9. 까마귀 만들기
과정1 날갯짓하는 까마귀 애니메이션 만들기
까마귀 그리기
과정2 멀리 사라지는 까마귀 무리 만들기
사실감 넘치게 효과주기
수정하기

10. 땅을 뚫고 나오는 손 만들기
과정1 손과 흙 무비클립 만들어 배치하기
일러스트레이터에서 손과 흙 그려 가져오기
손가락과 흙을 각각의 무비클립으로 만들기
손가락 중심점 바구기
과정2 손가락과 흙 애니메이션 만들기
꿈틀거리는 손가락 애니메이션 만들기
잠깐만요-중심점을 바꾸는 다른 방법
모션가이드로 흙이 튀는 애니메이션 만들기
손이 땅을 뚫고 올라오는 효과내기

● Scene3의 괴물인간 만들기
일러스트레이터에서 괴물인간 그리기
포토샵에서 괴물인간의 얼굴 그리기
괴물인간 구성하기
번개치는 효과 만들기
Gabocorp의 타이틀 만들기
달, 언덕, 괴물인간의 애니메이션 만들기
괴물인간의 얼굴이 클로즈업되는 애니메이션 만들기

도전! 파워플래셔 셰이프트위닝 애니메이션 마스터하기
1. 셰이프트위닝을 이용해 물결 효과 만들기
2. 셰이프트위닝을 이용한 물방울 만들기


셋째마당. Craig Frazier의 Greenville

09 전체 작업과정 살펴보기
● Craig Frazier의 Greenville을 예제로 선택한 이유
● 스토리보드 분석하기

10 Scene1, Scene2 만들기
● 전체 작업과정 살펴보기
1. 풍경1 만들기(Scene1)
과정1 애니메이션을 위해 필요한 개체 만들기
일러스트레이터에서 드로잉하고 익스포트해 플래시에서 임포트하기
과정2 언덕을 돌아 달리는 자동차 만들기
과정3 카메라 이동 효과 만들기

2. 풍경2의 말 만들기(Scene2)
과정1 모든 개체를 포함하는 all2 무비클립 만들기
all2 무비클립 심벌 구성하기
과정2 고개를 들어 올리는 말 애니메이션 만들기]
말 그림자 만들기

3. 풍경2의 호수에 비친 자동차 만들기(Scene2))
과정1 달리는 노란 자동차 애니메이션 만들기
과정2 마스크를 이용해서 호수에 비친 풍경 만들기
노란 자동차 마스크 처리하기
과정3 메인스테이지에서 카메라 이동효과 만들기

도전! 파워플래셔 마스크 마스터하기
1. 마스크의 원리
2. 마스크의 적용
3. 마스크는 무비클립이어도 되고 아니어도 됩니다.
4. 마스크가 적용될 애니메이션은 모션트위닝이어도 되고 셰이프트위닝이어도 됩니다.
5. 마스크가 애니메이션될 수도 있습니다.

4. 풍경2의 자동차1 만들기(Scene2)
과정1 자동차1 애니메이션 만들기

5. 풍경3과 풍경4 만들기(Scene2)
과정1 모든 개체를 포함하는 all3 무비클립 만들기
과정2 풍경3 애니메이션 만들기
과정3 풍경4 애니메이션 만들기

6. Scene2 마무리하기
과정1 달리는 자동차 만들기
과정2 호수에 비친 풍경 만들기
과정3 메인스테이지로 돌아와 마무리하기

11 Scene3, 4, 5, 6 만들기
● 전체 작업과정 살펴보기

7. Scene3, 4 만들기
과정1 Scene3의 풍경5 만들기
젖소 애니메이션 만들기
과정2 Scene4의 자동차2 만들기

8. 목장1 만들기(Scene5)
과정1 배경 만들기
과정2 걸어가는 사람 만들기
걸어가는 동작 만들기
과정3 Scene5에서 목장1 마무리하기

9. 목장2 만들기(Scene5)
과정1 우유를 짜는 주인공 만들기
젖짜는 모습의 애니메이션 만들기
과정2 Scene5에서 목장 1, 2 연결하기
잠깐만요-man2 무비클립을 복잡하게 페이드 아웃한 이유

10. 목장3 만들기(Scene6)
과정1 장면 배치하고 구름 애니메이션 만들기
과정2 우유를 뿌리는 애니메이션 만들기
과정3 우유를 뿌리는 주인공의 큰 모습 만들어 연결하기

11. 목장4 만들어 목장3과 연결하기(Scene6)
과정1 목장4 만들어 목장3과 연결하기
얼룩무늬 애니메이션 젖소 만들기
과정2 Scene6에서 목장3 장면과 연결하기
얼룩무늬가 애니메이션되지 않는 소1c 무비클립 만들기
얼룩무늬 애니메이션


<특집> 일러스트레이터를 이용한 드로잉
펜 도구를 이용한 드로잉의 기본 익히기
Gabocorp Trailer의 고목 그리기
Kelp Forest의 수초 그리기
Gabocorp Trailer의 로고 그리기
Gabocorp Trailer의 언덕 그리기
Greenville의 자동차 그리기
Greenville의 풍경3 그리기
캐리커처 그리기
과정1 사진 가져와서 외형 그리기
과정2 얼굴의 명암을 표헌하기 위한 작업
과정3 눈, 코, 입 등을 구체화하기
과정4 그려둔 각 객체에 색상 적용하기
과정5 재미있는 몸 그리기