Transcript mm.sookmyung.ac.kr

제6장 애니메이션
멀티미디어의 이해
1
6.1 애니메이션의 개요

애니메이션의 원리


일련의 정지 이미지(still image)나 그래픽으로부터 생성
잔상 효과(persistence of vision) 이용


이미지가 이미 사라져도 사람의 눈이나 뇌에 계속 남아 있으려는 경향
일반적으로 초당 15~20장 이상의 그림이면 자연스러운 움직임

텔레비젼, 영사기, 비디오 플레이어는 모두 잔상효과를 이용.
원본 애니메이션(상)과 각 프레임(하)
2
6.1 애니메이션의 개요
애니메이션의 발전

애니메이션 영화의 역사




1908, 프랑스 Emile Cohl 의 '판타즈마고리(Fantasmagorie)'
1913, 미국 존 랜돌프가 셀 애니메이션 기법 개발
1937, 디즈니 '백설공주' : 최초의 장편 애니메이션
1942, 디즈니 ‘피노키오‘, ‘밤비’ : 1초당 24프레임
3
6.1 애니메이션의 개요

CG 활용 애니메이션 영화


1961, 존 휘트니 ‘카탈로그’ : 최초의 CG 활용 애니메이션
1992, 디즈니 ‘미녀와 야수’ : 3D CAD 활용
4
6.1 애니메이션의 개요

Full CG 애니메이션 영화


1995, 픽사 ‘토이스토리’ : full 3차원 CG 애니메이션
1998, 드림웍스 ‘개미’, 픽사 ‘벅스라이프’
5
6.1 애니메이션의 개요


픽사 시스템 : 2001 ‘Monster Inc.’, 04 ‘Incredibles’, 07 ‘Ratatouille’
드림웍스 : 2001 ‘Shrek’, 05 ‘Madagascar’, 08 ‘Kung Fu Panda’
6
6.1 애니메이션의 개요

CG 애니메이션이 사용된 일반 영화

1977, 조지 루카스 ‘스타워즈IV’

1989, ‘터미네이터2’
7
6.1 애니메이션의 개요

1993, ‘주라기 공원’

2002, ‘반지의 제왕’
8

한국 영화




1994 구미호
2005 웰컴 투 동막골
2006 괴물
2007 D-War
9
6.2 애니메이션의 종류



전통적인 애니메이션
컴퓨터 애니메이션
특수 효과
10
6.2 애니메이션의 종류
전통적인 애니메이션
(1) 플립북 애니메이션 (Flip-book Animation)


가장 기본이 되는 애니메이션
프레임(Frame-based) 애니메이션이라고도 함.



모든 프레임을 한장 한장 그려나가는 것
책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과
파일의 크기가 크다

인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다

[플립북 애니메이션 시연]
[플립북 시연]
(Web)

11
6.2 애니메이션의 종류
(2) 셀 애니메이션 (Cel Animation)

1913년 존 랜돌프가 개발





2차원 애니메이션 제작 시 사용
초기에는 수작업
1960년 Xerox 시스템을 사용하여 기계화
1990년 이후 컴퓨터를 활용하여 제작 기간 크게 단축
"CEL"

투명한 종이를 뜻하는 Celluloid의 "CEL"을 의미
기본적으로 하나의 배경 셀과 여러 장의 전경 셀이 필요
이러한 Cel들이 여러 개의 층을 이루어 하나의 프레임 구성

[20세기 폭스사 "Lion King"의 제작과정 ]


(Web)
12
6.2 애니메이션의 종류
컴퓨터 애니메이션

컴퓨터는 애니메이션에 혁명적인 변화를 가져왔음



기존의 수작업을 단순히 컴퓨터로 대신하는 것부터 3차원 애니메
이션과 특수효과까지 제작
디지털화 된 애니메이션은 수정 및 편집, 전송과 저장이 수용
복제가 수월하여 수백명의 군중 scene 제작에 용이
13
6.2 애니메이션의 종류
(1) 스프라이트 애니메이션 (Sprite-based Animation)

스프라이트(Sprite)



애니메이션에서 독립적으로 움직이는 개체
아케이드 게임 속에 등장하는 캐릭터들의 애니메이션
스프라이트 애니메이션은 스프라이트 만을 다시 그려주면 된다

파일 크기나 데이터 전송 속도의 요구도 플립북 애니메이션보다 적음
14
6.2 애니메이션의 종류
(2) 벡터 애니메이션 (Vector Animaton)


인터넷에서 사용되는 플래쉬(Flash) 파일 포맷이 사용하는 방법
스프라이트가 비트맵이 아닌 수학적인 공식으로 표현

파일의 크기는 스프라이트 애니메이션 보다 작음
크기에 상관 없이 깨끗하게 보여짐

[벡터 애니메이션 시연 ]

(Web)
15
6.2 애니메이션의 종류
(3) 키 프레임과 트위닝 (Key-frame and Tweening)

기존의 애니메이션/만화영화 제작 시

키 프레임(Key frame) : 숙련된 애니메이터는 중요한 장면만 작성


트위닝: 나머지 중간 부분은 트위닝 기법으로 완성


가장 중요한 장면, 중요한 액션이 등장하는 장면, 시점이 변하는 곳 등
키 프레임 사이(Between)를 채운다는 의미의 IN-BETWEENING에서 유래
컴퓨터 환경에서도 유사

애니메이터는 키프레임만 완성



시간선(time-line) 중간 중간에
키 애니메이션 작성
중간 과정은 컴퓨터가 생성
Frame Rate: 초당 프레임 수
[키프레임과 트위닝 시연]
(Web)
16
6.2 애니메이션의 종류
특수효과
(1) 모핑 (Morphing)

2개의 이미지나 3차원 모델 사이에 서서히 변화하는 과정을 표현


3차원 모핑 사용 예 : 마이클 잭슨의 뮤직 비디오 "Dangerous“, 영화 "
터미네이터 2", 우리나라의 영화 "구미호", "은행나무 침대" 등
모핑의 원리

처음 프레임과 마지막 프레임을 지정
각 프레임 사이에 서로 매핑되는 점들을 지정
나머지는 컴퓨터가 생성,
이 과정을 보간(Interpolation)이라고 함

[예제]



[시연] (Web)
17
6.2 애니메이션의 종류
(2) 로토스코핑 (Rotoscoping)


Betty Boop과 뽀빠이에게 생명을 불어넣기 위해서
1915년 경 Max Fleischer가 개발
로토스코핑은 크게 2가지 의미로 사용


영화의 한 장면에 애니메이션을 삽입하는 셀 애니메이션
액션 장면의 정지 프레임을 추적하여 움직임을 표현
18
6.2 애니메이션의 종류
(3) 입자시스템 (Particle System)

비, 불, 연기, 폭발 등의 자연 현상의 애니메이션을 제작



영화에서 폭발 등의 특수효과에 사용
영화 트위스터는 토네이도를 시뮬레이션
입자들에 대해 그 행동과 특성을 하나하나 부여
19
6.3 애니메이션 기법



전통적인 기법
효과적인 애니메이션을 위한 기법
3차원 컴퓨터 애니메이션
20
6.3 애니메이션 기법
전통적인 기법

양파껍질 효과 (Onion-skinning)

셀 애니메이션에서 셀을 여러 장 겹쳐도 아래의 셀이 보임



양파 껍질은 투명해서 무언가를 덮어도 내용물이 보인다는 의미
프레임의 처음부터 끝까지 볼 수 있어, 프레임의 개요를 볼 수 있음
2차원 애니메이션 프로그램들이 Onion-skinning을 지원
21
6.3 애니메이션 기법

도려내기 효과 (Cut-out)


셀 애니메이션에서 사용되었던 방법
캐릭터의 동작 일부만을 다시 그린다.


(Web)
가감속 (Ease-out/Ease-in)

실세계에서 출발, 정지, 회전과 같은 동작은 같은 속도가 아니다


[시연]
차가 출발할 때 서서히 가속, 커브를 돌 때는 속도가 줄어듬.
반복 (Cycling)

여러 개의 프레임을 하나의 cycle이나 loop로 만들 수 있음.

많은 동작들은 반복적이며, 가장 기본적인 cycle은 걷기 동작
22
6.3 애니메이션 기법
효과적인 애니메이션을 위한 기법

찌그러짐과 늘어남 (Squash and Stretch)

물체의 유연성이나 탄성을 표현


보조 액션과 중첩 액션 (Secondary /Overlapping Action)


물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때
예) 슈퍼맨의 동작은 주액션이고, 펄럭이는 망토는 보조액션
과장 (Exaggeration)

애니메이션에 강한 인상을 주어 이용자의 눈에 띄도록 함.
23
6.3 애니메이션 기법
3차원 컴퓨터 애니메이션

키프레임 애니메이션 (Key-frame animation)


2차원 및 3차원 애니메이션에서 가장 널리 사용되는 기법
스토리보드의 작성, 물체의 표현, 키 프레임의 설정, 그리고 인비
틴(In-between) 프레임의 생성 과정을 거침.
24
6.3 애니메이션 기법

역운동학 (Inverse Kinematics)

인간이나 로보트와 같이 계층적으로 구성된 구조체의 동작을 표현



각 관절의 움직임을 말단 부분의 움직임에서부터 역으로 계산
역운동학을 사용하면 물체의 한 부분이 움직였을 때 연결된 부분들이
자연스럽게 그 부분을 따라가도록 할 수 있다.
단점 : 관절을 하나씩 제어하는 것이 아니므로 팔이 뒤로 꺾이는
등의 부자연스러운 움직임이 연출 될 수 있음
운동학(좌)과 역운동학(우)
25
6.3 애니메이션 기법

모션 캡쳐 (Motion Capture)



모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운 방법
3차원 컴퓨터 애니메이션의 생성을 위해 가장 많이 사용되는 기술
인간의 움직임을 직접 캡쳐(Capture)하여 움직임의 정보를 저장

마커(Marker) 또는 트랙커(Tracker)센서 사용
[시연]
(Web)
26
6.3 애니메이션 기법

절차적 애니메이션 (Procedural Animation)



물체에 대한 알고리즘/물리공식을 만들어 움직임을 생성하는 기술
미립자 시스템(Particle system)이나 유동 표면(Flexible surface)과
같은 자연 현상이나 복잡한 시스템에 적용
물리기반 시뮬레이션 분야에서 연구 중
27
6.4 웹 애니메이션



기본적인 웹 애니메이션
Embed 방식의 플러그인 애니메이션
스트리밍 기술을 이용한 애니메이션
28
6.4 웹 애니메이션
기본적인 웹 애니메이션

애니메이션 GIF (Animated GIF)


GIF 포맷은 미국 CompuServe 사에서 개발
연속적인 그림으로 구성된 GIF를 애니메이션 GIF라 함


GIF에 포함된 각 그림의 순서를 정하고 각 그림의 지속 시간과 반복되
는 횟수를 정의
가장 기본적인 웹 애니메이션으로 HTML 문서에 자주 사용
<img src=“animationGIF.gif”>
29
6.4 웹 애니메이션

자바 애플릿(Java Applet)


인터넷 환경의 자바 프로그램 : 웹에서 다운로드 하여 실행
GIF 애니메이션은 단순히 연속된 그림들의 나열인데 비해 Java는
프로그래밍 언어이기 때문에 여러 가지 효과를 만들어 낼 수 있음.
<applet code="java.class">
</applet>
[시연: Web]

ActiveX

<Object> 태그를 사용하여 프로그램을 웹페이지에 포함


인터넷 익스플로러에서 동작
Visual Basic 이나 C++ 등의 프로그래밍 언어를 사용하여 제작
30
6.4 웹 애니메이션

SVG(Scalable Vector Graphics)


웹컨소시엄(W3C)에서 정한 2차원 벡터 그래픽스 표준 언어
XML언어를 기반


다른 XML 언어와 결합하여 다양한 웹 애플리케이션으로 응용 가능
모바일 환경에서도 최적화 될 수 있는 특성을 제공
31
6.4 웹 애니메이션
Embed 방식의 플러그인 애니메이션



<embed> 태그를 사용하여 웹이지에 삽입되는 애니메이션
적절한 플러그인이 설치되어야만 애니메이션이 가능
VRML (Virtual Reality Modeling Language)


웹에서 상호작용이 가능한 3D 세계를 구축하기 위해 제정된 언어
1994년 VRML 1.0, VRML 97을 거쳐 현재 X3D 로 수정 보안
<embed src=“vrml.wrl”>

AVI (Audio Video Interleaved)


Microsoft사에 의해 정의
현재 가장 대표적인 비디오 파일 : AVI, MPEG, QuickTime MOV
<embed src=“education.avi”>
[시연: Web]
32
6.4 웹 애니메이션

Shockwave Flash


Macromedia 사에서 개발한 애니메이션 기술
웹에서 상호작용을 할 수 있고 텍스트, 이미지, 사운드, 비디오 등
이 통합된 멀티미디어 콘텐츠를 포함
<embed src=“dilbert.swf”>

QuickTime


초기에는 매킨토시에서 동영상을 보이기 위한 Player에서 사용
현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에
서 동화상이나 애니메이션을 재생하기 위한 플러그인으로 사용
<embed src=“quicktime.mov”>
[시연: Web]
33
6.5 애니메이션의 활용





만화영화
영화
광고
게임
사이버 캐릭터
34
6.6 애니메이션 저작도구



2차원 애니메이션 저작도구
3차원 애니메이션 저작도구
웹 애니메이션 저작도구
35
6.6 애니메이션 저작도구
2차원 애니메이션 저작도구

Animo



Cambridge Animation Systems 사의 만화영화 제작 소프트웨어
캐릭터 애니메이션은 벡터 포맷(vector format)이나 해상도 독립적
인 포맷(resolution-independent format)으로 작성
애니메이션은 캐릭터에 독립적으로 저장되기 때문에 다른 캐릭터
에도 적용 가능
36
6.6 애니메이션 저작도구

TOONZ


초기에 캐나다의 소프트이미지(SoftImage)사에서 개발
주로 애니메이션의 후반 작업 프로그램을 지원

전통적인 애니메이션 제작 방법에서와 같은 작업 구성이지만 비능률
적이고 시간 소모적인 작업을 향상시키는 강력한 기능을 갖추고 있음.
37
6.6 애니메이션 저작도구
3차원 애니메이션 저작도구

SoftImage XSI


애니메이션만을 비교해 볼 때 다른 제품에 비해 가장 우수한 성능
을 지니며 모델링은 상대적으로 미흡
Matrix, 쥬라기 공원, 마스크에서의 짐캐리의 얼굴 변화, 토이스토
리에서의 병사들의 행진, 타이타닉의 스턴트 배우 추락 등에 사용
38
6.6 애니메이션 저작도구

MAYA




NURBS를 이용하여 모델링 된 캐릭터를 애니메이션 시켰을 때 이
음새가 보이지 않고 자연스럽게 움직일 수 있음
MEL이라는 스크립트 언어 제공
C++ API를 사용하여 플러그인으로 제작 가능
3차원 소프트웨어 중에서 가장 뛰어나다고 평가 받고 있으나 고가
로 인해 대형 프로젝트에서만 주로 사용
39
6.6 애니메이션 저작도구

3D Studio MAX



비교적 낮은 가격에 높은 품질의 기능을 제공
일반 PC에서도 사용 가능하다는 점 때문에 3차원 그래픽스와 애
니메이션 분야에서 가장 많은 사용자를 확보
대형 프로젝트보다는 주로 중소 CG프로덕션에서 게임 및 멀티미
디어 타이틀을 제작할 때 사용됨.
40
6.6 애니메이션 저작도구
웹 애니메이션 저작도구

Flash


웹에서 벡터 애니메이션을 제작하는 소프트웨어
인터랙티브한 홈페이지를 제작할 때 필수적,



사용법이 간단하면서 출력물의 결과가 만족스러워 많은 인기
트위닝 기법을 사용하며, 간단한 형태에 대한 모핑을 제공
Director



셀 애니메이션과 트위닝 제작에 필요한 기능을 제공
링고라는 스크립트 언어를 제공하여 다른 미디어와의 연결 가능
제작한 내용을 자바(Java) 애플릿으로도 저장 가능
41