Juyayang's hiStory

2011년 2학기 플래시 애니메이션 제작 수업.

아홉번째 시간 : 컨버전
- 파일 포맷 컨버전, 동영상을 YouTube와 Facebook에 올리기

1. swf -> avi 컨버전 방법
   - Flash : File -> Export -> Export Movie -> Save as type : Window AVI 선택하여 저장 (Movie clip은 재생이 안 됨)
   - Sothink SWF to Video Converter v2.2
   - 다른 컨버전 틀 이용 (많은 종류가 있음)

2. Sothink SWF to Video Converter를 이용한 컨버전

3. YouTube와 Facebook에 업로드

4. 애니메이션 제작
   - 애니메이션 제작
   - 제작이 완료된 경우 YouTube와 Facebook에 업로드


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

여덟번째 시간 : 사운드
- 사운드 녹음/편집, 애니메이션에 사운드 추가

1. 애니메이션 사운드
   - 애니메이션에 사운드를 추가하여 더 큰 생동감을 줄 수 있음
   - 사운드를 직접 녹음하거나 편집 가능
   - 인터넷을 통해 사운드 파일을 구할수 있음

2. 플래시에 사운드 추가
   - 사운드 포맷 : wav와 mp3만 가능
   - 플래시 라이브러리에 사운드 파일 추가하는 방법
     - Import -> Import to Library -> 사운드 파일 선택 후 OK 클릭
   - 플래시에 사운드를 추가하는 방법
     - 사운드를 추가할 위치에 키프레임을 생성하여 해당 키프레임에서 라이브러리의 사운드 파일을 스테이지로 drag
     - 해당 키프레임의 Properties 탭에서 sound의 콤보박스를 통해 라이브러리에 등록된 사운드 선택

3. 사운드 녹음
   - Sound Recorder, Adobe Audition v.3.0 (Cool Edit)를 이용하여 목소리 녹음

4. 사운드 편집
   - Adobe Audition v.3.0 (Cool Edit)를 이용하여 잡음 제거, 볼륨 조절, 효과 추가 등의 사운드 편집

5. 애니메이션 제작
   - 사운드 녹음 및 편집


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

일곱번째 시간 : 텍스트 효과
- 텍스트 효과 연습 및 애니메이션 제목 화면 만들기

1. 필터
   - 필터는 Movie Clip, Button, Text에만 적용 가능
   - 종류 : Drop Shadow, Blur, Glow/Gradient Glow, Bevel/Gradient Bevel

2. 필터 사용 방법
   - Text Tool을 선택하여 스테이지에 텍스트 생성
   -> Conver to Symbol (movie clip)
   -> Properties 탭 옆에 위치한 Filters 탭 선택
   -> Add Filter 아이콘을 클릭하여 원하는 효과 선택
   * Filters 탭이 안 보이는 경우 Window -> Properties -> Filters 메뉴 선택

3. 텍스트 효과 연습(4가지)
   - outer text 만드는 방법

5. 애니메이션 제작
   - 제목 화면 만들기 : 제목 및 제작자


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

여섯번째 시간 : 카메라 효과
- 카메라 효과 연습

1. 카메라 효과
   - Close up
   - Zoom in
   - Zoom out
   - Panning

2. 샘플 파일을 이용한 카메라 효과 연습

3. 애니메이션 제작
   - 캐릭터 및 배경 제작
   - 애니메이션 첫 화면 제작


<수업 자료>

* 내용이 많지 않지만, 연습을 해야 하는 내용이라 2교시 분량으로 적당하다.
  아이들에게 최소한 2번은 보여줘야 제대로 따라하기 때문에 시간이 부족할 수도 있다.

2011년 2학기 플래시 애니메이션 제작 수업.

다섯번째 시간 : 애니메이션 효과
- 움직이는 캐릭터 만들기

1. 걷는 캐릭터 만들기
   - 모두 그림을 그려 frame by frame으로 걷는 캐릭터 구성
   - 머리, 몸통, 다리 부분을 나누어 심볼로 만든 후 걷는 캐릭터 구성

2. 각 부분으로 캐릭터 만드는 방법
   - 머리, 몸통, 다리 부분을 각각 그림
   -> 포토샵에서 편집(색칠)
   -> *.png 파일로 저장
   -> 플래시에 import
   -> movic clip 심볼 생성하여 각각의 레이어에 그림을 위치시킴 (움직이는 부분에 키프레임을 삽입하여 움직임 효과를 줌)
   -> bitmap을 Modify -> Bitmap -> Trace Bitmap으로 벡터화
   -> 테스트 무비

3. 애니메이션 효과 연습
   - 오브젝트 이동, 크기 변화, 색깔 변화
   - 캐릭터 얼굴 표현 : 눈을 깜박이고, 이야기 하는 얼굴

4. 애니메이션 제작
   - 캐릭터 및 배경 디자인
   - Stage size : 640 X 480 pixel


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

네번째 시간 : 배경 디자인
- 배경 및 기타 오브젝트 디자인

1. 배경 만드는 방법
   - 스케치 -> 스캔 -> 편집
   - 플래시나 포토샵에서 바로 그리기

2. 그림을 사용한 배경 디자인
   - 연필과 싸인펜으로 스케치 -> 스캔 -> 포토샵에서 편집 -> 플래시에 그림 파일 import
   - 단, 배경 디자인시 가장 큰 배경을 기준으로 디자인

3. 애니메이션 제작
   - 배경 및 기타 오브젝트 디자인

4. 숙제
   - 배경 및 기타 오브젝트 스케치/디자인


<수업 자료>

* XI TKJ1의 경우 3주차가 휴일이라 4주차에 캐릭터 디자인 수업과 병행하여 이루어졌기 때문에 내용을 짧게 구성했다.

2011년 2학기 플래시 애니메이션 제작 수업.

세번째 시간 : 캐릭터 디자인
- 플래시와 포토샵을 사용한 캐릭터 디자인

1. 캐릭터 만드는 방법
   - 스케치 -> 스캔 -> 편집
   - 플래시나 포토샵에서 바로 그리기

2. 그림을 사용한 캐릭터 디자인
   - 연필과 싸인펜으로 스케치 -> 스캔 -> 포토샵에서 편집 -> 플래시에 그림 파일 import

3. 플래시에서 그림 파일 사용하는 방법
   - 그림 파일 import 후 바로 사용하는 방법
     : 라이브러리에서 stage로 drag-> stage의 그림 선택 -> Modify > Bitmap > Trace Bitmap (minimum area : 1)
       -> Paint Bucket Tool 선택하여 색칠 -> 움직임을 위하여 부분적으로 심볼 등록
   - 플래시에서 다시 그리기
     : Insert New Layer -> Pencil Tool로 그림의 라인을 다시 그림 -> Paint Bucket Tool로 그림에 색칠 -> 심볼 등록

4. 컴퓨터 캐릭터 디자인
   - Oval Tool, Rectangle Tool, Paint Bucket Tool 등을 이용하여 캐릭터 디자인
   - 인터넷 참조 (링크 : http://shadow.pufs.ac.kr/Lecture/lecture.html -> Flash_Lec02.ppt)

5. 스캔한 그림 파일을 이용한 포토샵 캐릭터
   - 그림 파일 오픈 -> Create New Layer -> Pencil Tool 선택 -> 새로 추가한 레이어에 스케치한 그림의 선을 따라 그림
     -> Paint Bucket Tool로 그림에 색을 칠함 -> *.png 파일로 저장 -> Flash에 import

6. 애니메이션 제작
   - 캐릭터 디자인

7. 숙제
   - 캐릭터 스케치


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

두번째 시간 : Inbetween
- 화면 전환 방법 연습

1. Inbetween
   - 키 프레임 : 단일 스틸 이미지
   - 인비트윈 프레임 : 두 키 프레임 사이의 프레임
   - 애니메이션을 보다 자연스럽게 하기 위해 인비트윈 프레임 사용

2. 화면 전환 방법
   - Cut
   - Fade-in/Fade-out
   - Dissolve
   - Iris
   - Flip, Wipe, etc.

3. 카메라 움직임
   - Close up
   - Zoom in
   - Zoom out
   - Panning

4. 애니메이션 제작
   - 스토리보드(콘티) 작성

5. 숙제
   - 스토리보드 작성


<수업 자료>

2011년 2학기 플래시 애니메이션 제작 수업.

첫번째 시간 : 애니메이션 기초
- 애니메이션 제작 프로세스, 플래시 기초 복습

1. 수업 안내
   - 수업목표 : Macromedia Flash 8과 Adobe Photoshop 프로그램을 사용하여 10초 이상의 2D 애니메이션 제작
   - 수업 시간 : 화/수 오전 8:30~10:00
   - 수업 구성 : 학생들 발표(10~20분), 수업(40~50분), 애니메이션 제작(30분)

2. 애니메이션이란?
   - 여러장의 화면을 움직이도록 보이게 만든 것

3. 애니메이션 종류
   - 2D, 3D, 프레임, 벡터, 몰핑, 셀, 컴퓨터 등

4. 애니메이션 제작 프로세스
   - 프리 프로덕션 : 컨셉/시나리오, 캐릭터 디자인, 스토리보드 제작
   - 프로덕션 : (레이아웃,) 원화/동화 제작, 스캐닝, 채색(, 렌더링)
   - 포스트 프로덕션 : 사운드(더빙, 음악, 믹싱), 편집, 비주얼 이펙트, CD 제작

5. 애니메이션 원리 
   - Pose : 이야기에 대한 정보(감정 및 분위기)를 나타냄
   - Timing : 어떤 동작이 행해지는 시간을 결정
   - Spacing : 키프레임 사이의 시간을 채우는 것
   -> 좋은 포즈를 적절한 타이밍에 배치하고 세심하게 스페이싱하면 된다고...... (애니메이터 김정환 님의 자료 참조)
   - 12가지 원리 : 인니어설명, 한글설명

6. 플래시에서 사용하는 애니메이션
   - Frame by frame : 각 프레임마다 각각의 그림 배치
   - Motion tweening : 오브젝트의 이동, 크기 변화 등
   - Shape tweening : 오브젝트의 모양 변화 (예 : 원 -> 텍스트)

7. 플래시 애니메이션 복습
   - Motion Tweening, Shape Tweening, Guide, Masking

8. 애니메이션 제작
   - 시놉시스 작성
   - 테마 선택 : 1. 정보기술 / 2. 교육의 중요성 / 3. 애니메이션을 통한 Fun education / 4. 자연 / 5. 스마랑 또는 SMKN7

9. 숙제
   - 시놉시스 작성
  

<수업 자료>

* 본 단원이 애니메이터가 아니고, 고등학교 과정이므로 아주 깊이있는 애니메이션 수업은 아니라는 것을 미리 밝힌다.
  본 수업의 목적은 학생들이 애니메이션 대회에 참가할 수 있도록 연습하는 것이다.

2011년 2학기를 맞이하여 프로그래밍 수업 중에 플래시 애니메이션을 맡아 가르치게 되었다.
1학기에 이미 플래시 3주 동안 플래시 기초를 가르쳤기 때문에 아이들이 어느정도는 플래시를 다룰 줄 아는 상태였다.
이번 학기에는 Lomba(대회) 참여를 위한 애니메이션의 제작에 중점을 두었다.
그래서 그림을 그리고 스캔해서 플래시를 만드는 과정을 3개월에 걸쳐 가르치고 10초 이상의 애니메이션을 만드는 것이 목표였다. 물론 애니메이션을 제작할 때 이야기와 테마가 있어야 하고, 임의로 5가지 테마를 정해 주었다.

샘플 애니메이션을 찾아서 보여주기는 했지만, 역시나 가르치는데는 어느 정도 한계가 있어 내가 직접 애니메이션을 만들었다. 사실 지금까지 제대로 애니메이션을 만들어 본 적이 없었는데, 필요하면 다 하게 되어 있나보다.
그림에 영 소질이 없는 나도 인터넷으로 이것저것 찾아 보면서 결국 4일만에 뚝딱 애니메이션을 만들었다.
물론 퀄리티가 뛰어나진 않다. 예술에 소질 없는 내가 쉬엄쉬엄 만든 것인지라......
처음엔 한국 전래동화를 소재로 만들까 했는데, 인도네시아 아이들에게 너무 낯설을듯 싶어 아이들에게도 익숙한 '토끼와 거북이' 이야기를 패러디하여 애니메이션을 만들었다.
아무튼 아이들이 좋아해서 기분은 좋았다.^___^v

아이들에게 수업을 진행한 순서대로 시놉시스 -> 스토리보드 -> 캐릭터/배경 그리기 -> 플래시 애니메이션 -> 사운드 추가 -> 수정 -> 퍼블리시 -> 웹 업로드의 단계로 진행하였다.
시놉시스 및 자료 수집 : 하루 / 플래시 작업 : 이틀 / 사운드 레코딩 및 수정 : 하루 ==> 총 4일 소요

<플래시 애니메이션 시놉시스>

 

제목

ü  新 토끼와 거북이 (Baru Kelinci dan Kura-kura)

 

컨셉(테마)

ü  (인터넷을 통한) 정보의 중요성

 

기획 의도

ü  인터넷을 통한 정보 검색의 유용함을 알리기 위함

ü  미리 준비하는 자세의 중요성을 강조하기 위함

 

시놉시스

ü  옛날 옛날에 토끼 토돌이와 거북이 대북이가 경주를 했는데, 토돌이가 방심하여 잠든 사이에 대북이가 이겼다. 토돌이의 손자 토식이는 토돌이의 명예를 회복하기 위해 대북이 손자 소북이에게 이메일로 경주를 신청하였다. 다음날 아침에 경주를 시작하여 녹소산(綠小山, Gunung Kecil Hijau) 정상에 먼저 오르면 승리하는 것이다.

ü  녹소산에는 정상까지 2개의 길이 있다. 하나는 넓지만 빙글빙글 돌아가는 빙글길(jalan berbelak-belok)이고, 하나는 매주 좁은 지름길(memotong jalan)로 잘 알려져 있지 않다. 경주 전날 저녁, 소북이는 인터넷으로 녹소산을 검색하여 지름길이 있다는 것을 알아냈다. 하지만 토돌이는 컴퓨터 게임만 하였다.

ü  경주 당일, 토식이는 쉬지 않고 열심히 빙글길을 달렸고, 소북이도 쉬지 않고 지름길을 걸었다.

ü  처음에는 토식이가 빨랐지만, 결국 지름길로 오른 소북이가 간발의 차로 먼저 도착하였다.

ü  경주에서 진 토식이는 소북이에게 어떻게 먼저 도착했는지를 물었고, 토식이는 인터넷을 통해 지름길을 찾았다고 알려주었다. 토식이는 정보를 찾아보지 않은 것을 후회하였다.

 

캐릭터

ü  거북이 : 대북(Kurasar), 소북(Kuracil)

ü  토끼 : 토돌(Kelakak), 토식(Kelucu)

 

애니메이션 제작 소프트웨어

ü  Adobe Photoshop CS

ü  MacroMedia Flash 8

 

<<배경>

<애니메이션>

원래는 인니어 텍스트에 bgm을 깔아 만들었으나, 한글판으로 바꾸어 음성을 추가한 파일이다.
swf 원본 파일을 E.M. Magic Swf2Avi 프로그램을 사용하여 avi 파일로 컨버팅했는데 깨끗이 변환이 안 된다.
중간중간 깨진 부분도 있고, 무비 클립이 제대로 재생되지 않았다.
그래서 결국 Sothink SWF to Video Converter 로 다시 컨버팅하였다. 그나마 이게 좀 더 나은 것 같다.
컨버팅 결과는 Moyea swf to video 프로그램이 제일 좋았지만 정품은 너무 비싸고 트라이얼은 중간에 워터마크가 크게 나타나 결국 Sothink SWF to Video Converter를 선택하게 되었다.

<YouTube 동영상 업로드>

YouTube에 동영상 업로드 결과 ☞ http://www.youtube.com/watch?v=UXIGtYMkDBo