Transcript MM배움터2.0_5장
멀티미디어 배움터2.0 5장 애니메이션 5.1 5.2 5.3 5.4 5.5 5.6 애니메이션의 개요 전통적인 애니메이션 컴퓨터 애니메이션 웹 애니메이션 애니메이션의 활용 애니메이션 저작도구 1 5.1 애니메이션의 개요 애니메이션의 원리 일련의 정지 이미지(still image)나 그래픽으로부터 생성 잔상 효과(persistence of vision) 이용 이미지가 이미 사라져도 사람의 눈이나 뇌에 계속 남아 있으려는 경향 일반적으로 초당 15~20장 이상의 그림이면 자연스러운 움직임 텔레비젼, 영사기, 비디오 플레이어는 모두 잔상효과를 이용. 원본 애니메이션(상)과 각 프레임(하) 3 5.1 애니메이션의 개요 애니메이션을 구성하는 프레임들 인접한 프레임들간에는 약간의 차이만 나지만, 멀어질수록 차이가 커짐 4 5.1 애니메이션의 개요 애니메이션의 구분 2차원 기반의 전통적인 애니메이션 컴퓨터 애니메이션 스프라이트 애니메이션, 벡터 애니메이션, 키프레임과 트위닝 3차원 컴퓨터 애니메이션 플립북 애니메이션, 셀 애니메이션 운동학과 역운동학, 모션 캡쳐 특수 효과 로토스코핑, 모핑, 절차적 방법, 입자시스템 5 5.1 애니메이션의 개요 애니메이션의 발전 애니메이션의 발전역사 1908, 프랑스 Emil Cohl 의 '판타즈마고리(Fantasmagorie)' 1913, 미국 존 랜돌프가 셀 애니메이션 기법 개발 1937, 디즈니 '백설공주' : 최초의 장편 애니메이션 6 5.1 애니메이션의 개요 1961, 존 휘트니 ‘카탈로그’ : 최초의 CG 활용 애니메이션 1992, 디즈니 ‘미녀와 야수’ : 3D 활용 7 5.1 애니메이션의 개요 1995, 픽사 시스템 ‘토이스토리’ : Full 3차원 CG 애니메이션 1998, 드림웍스 ‘개미’, 픽사 시스템 ‘벅스라이프’ 8 5.1 애니메이션의 개요 2002, Disney/Pixar사의 ‘몬스터 주식회사’ 2003, Disney/Pixar사의 ‘니모를 찾아서’ 9 5.2 전통적인 애니메이션 전통적 애니메이션의 종류 전통적인 기법 효과적인 애니메이션을 위한 기법 10 5.2 전통적인 애니메이션 전통적인 애니메이션의 종류 (1) 플립북 애니메이션 (Flip-book Animation) 가장 기본이 되는 애니메이션 프레임(Frame-based) 애니메이션이라고도 함. 모든 프레임을 한장 한장 그려나가는 것 책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과 파일의 크기가 크다 인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다 11 5.2 전통적인 애니메이션 (2) 셀 애니메이션 (Cel Animation) 1913년 존 랜돌프가 개발 2차원 애니메이션 제작 시 사용 초기에는 수작업 1960년 Xerox 시스템을 사용하여 기계화 1990년 이후 컴퓨터를 활용하여 제작 기간 크게 단축 "CEL" 투명한 종이를 뜻하는 Celluloid의 "CEL"을 의미 기본적으로 하나의 배경 셀과 여러 장의 전경 셀이 필요 이러한 Cel들이 여러 개의 층을 이루어 하나의 프레임 구성 디즈니 애니메이션 ‘라이온 킹’ 12 5.2 전통적인 애니메이션 전통적인 기법 양파껍질 효과 (Onion-skinning) 셀 애니메이션에서 셀을 여러 장 겹쳐도 아래의 셀이 보임 양파 껍질은 투명해서 무언가를 덮어도 내용물이 보인다는 의미 프레임의 처음부터 끝까지 볼 수 있어, 프레임의 개요를 볼 수 있음 2차원 애니메이션 프로그램들이 Onion-skinning을 지원 진한부분은 현재 작업하고 있는 프레임이고, 흐리게 처리된 부분은 전/후 프레임들 13 5.2 전통적인 애니메이션 도려내기 효과 (Cut-out) 셀 애니메이션에서 사용되었던 방법 캐릭터의 동작 일부만을 다시 그린다. 가감속 (Ease-out/Ease-in) 실세계에서 출발, 정지, 회전과 같은 동작은 같은 속도가 아니다 하나의 동작에서 다른 동작으로의 이동은 전형적인 키프레임 기법으로 제어 곤란 차가 출발할 때 서서히 가속, 커브를 돌 때는 속도가 줄어듬 특정 키프레임을 정해서 그 프레임으로 다가갈 때 속도를 변화시킴 반복 (Cycling) 여러 개의 프레임을 하나의 Cycle이나 Loop로 만들 수 있음. 많은 동작들은 반복적이며, 가장 기본적인 Cycle은 걷기 동작, 반복을 통해 계속 움직이게 만들 수 있음 14 5.2 전통적인 애니메이션 반복 (Cycling) 여러 개의 프레임을 하나의 Cycle이나 Loop로 만들 수 있음. 많은 동작들은 반복적이며, 가장 기본적인 Cycle은 걷기 동작, 반복을 통해 계속 움직이게 만들 수 있음 http://www.biomotionlab.ca/Demos/BMLwalker.html 15 5.2 전통적인 애니메이션 효과적인 애니메이션을 위한 기법 찌그러짐과 늘어남 (Squash and Stretch) 물체의 유연성이나 탄성을 표현 물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때 부피를 보전하면서 무게감을 표시한다 16 5.2 전통적인 애니메이션 효과적인 애니메이션을 위한 기법 보조 액션과 중첩 액션 (Secondary /Overlapping Action) 예) 수퍼맨의 동작은 주액션이고, 펄럭이는 망토는 보조액션 과장 (Exaggeration) 애니메이션에 강한 인상을 주어 이용자의 눈에 띄도록 함. 17 5.3 컴퓨터 애니메이션 컴퓨터 애니메이션의 개념 특수효과 3차원 동작의 애니메이션 18 5.3 컴퓨터 애니메이션 컴퓨터 애니메이션 컴퓨터는 애니메이션에 혁명적인 변화를 가져왔음 기존의 수작업을 단순히 컴퓨터로 대신하는 것부터 3차원 애니메 이션과 특수효과까지 제작 디지털화 된 애니메이션은 수정 및 편집, 전송과 저장이 용이 복제가 수월하여 수 백명의 군중 scene 제작에 용이 19 5.3 컴퓨터 애니메이션 (1) 스프라이트 애니메이션 (Sprite-based Animation) 스프라이트(Sprite) 애니메이션에서 독립적으로 움직이는 래스터 객체 아케이드 게임 속에 등장하는 캐릭터들의 애니메이션 스프라이트 애니메이션은 스프라이트 만을 다시 그려주면 된다 파일 크기나 데이터 전송 속도의 요구도 플립북 애니메이션보다 적음 20 5.3 컴퓨터 애니메이션 (2) 벡터 애니메이션 (Vector Animaton) 인터넷에서 사용되는 플래쉬(Flash) 파일 포맷이 사용하는 방법 스프라이트가 비트맵이 아닌 수학적인 공식으로 표현 파일의 크기는 스프라이트 애니메이션 보다 작음 크기에 상관 없이 깨끗하게 보여짐 21 5.3 컴퓨터 애니메이션 (3) 키 프레임과 트위닝 (Key-frame and Tweening) 기존의 애니메이션/만화영화 제작 시 키 프레임(Key frame) : 숙련된 애니메이터는 중요한 장면만 작성 트위닝: 나머지 중간 부분은 트위닝 기법으로 완성 가장 중요한 장면, 중요한 액션이 등장하는 장면, 시점이 변하는 곳 등 키 프레임 사이(Between)를 채운다는 의미의 IN-BETWEENING에서 유래 컴퓨터 환경에서도 유사 애니메이터는 키프레임만 완성 시간선(time-line) 중간 중간에 키 애니메이션 작성 중간 과정은 컴퓨터가 생성 Frame Rate: 초당 프레임 수 22 5.3 컴퓨터 애니메이션 키프레임 애니메이션 (Key-frame animation) 2차원 및 3차원 애니메이션에서 가장 널리 사용되는 기법 스토리보드의 작성, 물체의 표현, 키 프레임의 설정, 그리고 인비 틴(In-between) 프레임의 생성 과정을 거침. 23 5.3 컴퓨터 애니메이션 특수효과 (1) 모핑 (Morphing) 2개의 이미지나 3차원 모델 사이에 서서히 변화하는 과정을 표현 3차원 모핑 사용 예 : 마이클 잭슨의 뮤직 비디오 "Dangerous“, 영화 " 터미네이터 2", 우리나라의 영화 "구미호", "은행나무 침대" 등 서로 완전히 다른 두 물체 사이의 그림들을 생성함 모핑의 원리 처음 프레임과 마지막 프레임을 지정 각 프레임 사이에 서로 매핑되는 점들을 지정 나머지는 컴퓨터가 생성, 이 과정을 보간(Interpolation)이라고 함 24 5.3 컴퓨터 애니메이션 (2) 로토스코핑 (Rotoscoping) Betty Boop과 뽀빠이에게 생명을 불어넣기 위해서 1915년 경 Max Fleischer가 개발 로토스코핑은 크게 2가지 의미로 사용 영화의 한 장면에 애니메이션을 삽입하는 셀 애니메이션 액션 장면의 정지 프레임을 추적하여 움직임을 표현 말이 달리는 동작을 연속적인 사진으로 찍은 후, 사진위에 투명종이를 놓고 말의 동작을 한장씩 그려 애니메이션화 25 5.3 컴퓨터 애니메이션 (3) 입자시스템 (Particle System) 비, 불, 연기, 폭발 등의 자연 현상의 애니메이션을 제작 영화에서 분수, 폭포, 폭발 은 물론, 군중의 이동 등의 특수효과에 사용 영화 트위스터는 토네이도를 시뮬레이션 입자들에 대해 그 행동과 특성을 하나하나 부여 26 5.3 컴퓨터 애니메이션 (4) 절차적 애니메이션 (Procedural Animation) 물체에 대한 알고리즘/물리공식을 만들어 움직임을 생성하는 기술 미립자 시스템(Particle system)이나 유동 표면(Flexible surface)과 같은 자연 현상이나 복잡한 시스템에 적용 물리기반 시뮬레이션 분야에서 연구 중 27 5.3 컴퓨터 애니메이션 3차원 동작의 애니메이션 역운동학 (Inverse Kinematics) 인간이나 로봇과 같이 계층적으로 구성된 구조체의 동작을 표현 각 관절의 움직임을 말단 부분의 움직임에서부터 역으로 계산 역운동학을 사용하면 물체의 한 부분이 움직였을 때 연결된 부분들이 자연스럽게 그 부분을 따라가도록 할 수 있다. 단점 : 관절을 하나씩 제어하는 것이 아니므로 팔이 뒤로 꺾이는 등의 부자연스러운 움직임이 연출 될 수 있음 운동학(좌)과 역운동학(우) 28 5.3 컴퓨터 애니메이션 모션 캡쳐 (Motion Capture) 모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운 방법 3차원 컴퓨터 애니메이션의 생성을 위해 가장 많이 사용되는 기술 인간의 움직임을 직접 캡쳐(Capture)하여 움직임의 정보를 저장 마커(Marker) 또는 트랙커(Tracker)센서 사용 29 5.4 웹 애니메이션 기본적인 웹 애니메이션 애니메이션 파일의 Embed 방식 30 5.4 웹 애니메이션 기본적인 웹 애니메이션 애니메이션 GIF (Animated GIF) GIF 포맷은 미국 CompuServe 사에서 이미지를 빨리 전송할 수 있도록 개발한 압축 포맷 연속적인 그림으로 구성된 GIF를 애니메이션 GIF라 함 GIF에 포함된 각 그림의 순서를 정하고 각 그림의 지속 시간과 반복되 는 횟수를 정의 가장 기본적인 웹 애니메이션으로 HTML 문서에 자주 사용 31 5.4 웹 애니메이션 자바 애플릿(Java Applet) 자바언어로 구성된 작은 응용 프로그램 인터넷 환경의 자바 프로그램 : 웹에서 다운로드 하여 실행 GIF 애니메이션은 단순히 연속된 그림들의 나열인데 비해 Java는 프로그래밍 언어이기 때문에 여러 가지 효과를 만들어 낼 수 있음. 32 5.4 웹 애니메이션 SVG(Scalable Vector Graphics) Adobe사의 플래시기반 애니메이션은 상용제품이어서, 다른 사람 이 애니메이션을 편집/수정 곤란할 뿐만 아니라, 휴대폰 및 가전기 기에 적용 불가 웹컨소시엄(W3C)에서 정한 2차원 벡터 그래픽스 표준 언어 XML언어를 기반 다른 XML 언어와 결합하여 다양한 웹 애플리케이션으로 응용 가능 모바일 환경에서도 최적화 될 수 있는 특성을 제공 33 5.4 웹 애니메이션 애니메이션 파일의 Embed 방식 Shockwave Flash <embed> 태그를 사용하여 웹이지에 삽입되는 애니메이션 적절한 플러그인이 설치되어야만 애니메이션이 가능 Macromedia 사에서 개발한 애니메이션 기술 웹에서 상호작용을 할 수 있고 텍스트, 이미지, 사운드, 비디오 등 이 통합된 멀티미디어 콘텐츠를 포함 QuickTime 초기에는 매킨토시에서 동영상을 보이기 위한 Player에서 사용 현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에 서 동화상이나 애니메이션을 재생하기 위한 플러그인으로 사용 VRML(X3D): 웹환경에서 상호작용이 가능한 3D세계를 구축 AVI: Microsoft사에서 정의한 멀티미디어 파일교환의 일반적 포맷 34 5.4 웹 애니메이션 스트리밍 기술을 이용한 애니메이션 (1) Shockwave 일반적으로 애니메이션의 결과(영화같이)는 압축되지 않은 상태 에서 사용되지만, 인테넷에서 데이터의 전송은 제약이 있으므로 압축된 데이터, 즉 압축되어 있는 애니메이션을 요구 Shockwave는 압축된 애니메이션임과 동시에 데이터의 일부만이 도착하여도 애니메이션을 가능케하는 기술 Shockwave를 제작하기 위한 도구로는 Macromedia의 Flash(.swf) 와 Director(.dcr) 35 5.4 웹 애니메이션 (2) QuickTime QuickTime은 초기에 매킨토시에서 동화상을 보이기 위한 재생기 (Player)였으나, 현재는 거의 모든 운영체제에서 수행되는 동화상 재생기이자 웹에서 동화상이나 애니메이션을 재생하기 위한 플러 그인 36 5.5 애니메이션의 활용 만화영화 영화 광고 게임 37 5.5 애니메이션의 활용 만화영화 세계 각국의 주요 애니메이션 만화영화 백설공주(1937, 디즈니): 최초의 장편 애니메이션 미녀와 야수(1992, 디즈니): 2차원 캐릭터, 3차원 애니메이션 기법 토이스토리(1995, 픽사): 세계 최초의 3차원 애니메이션 몬스터 주식회사(2001, 디즈니/픽사), 니모를 찾아서(2003, 디즈니 /픽사), 슈렉(2001~2007, 드림웍스) 38 5.5 애니메이션의 활용 영화 컴퓨터 애니메이션이 사용된 영화 1982, 트론(디즈니): 최초로 3차원 애니메이션 도입 1993, 주라기공원 39 5.1 애니메이션의 개요 1997, 타이타닉( 20세기폭스): 모션캡쳐를 이용한 컴퓨터 애니메이션 2001~2003, 반지의 제왕(뉴라인 시네마): 장대한 규모의 전쟁장면, 기이한 형태의 다양한 생명체 - 3부작으로 대성공 40 5.5 애니메이션의 활용 광고 및 게임 광고 상업광고 : 강한 인상을 남겨야하는 광고의 속성상 컴퓨터 애니 메이션은 유용한 수단, 불가능한 장면의 구현 가능 인터넷 광고 : GIF, VRML, Java 이용 게임 광고 게임 41 5.6 애니메이션 저작도구 2차원 애니메이션 저작도구 3차원 애니메이션 저작도구 웹 애니메이션 저작도구 42 5.6 애니메이션 저작도구 2차원 애니메이션 저작도구 Animo 만화영화 제작용 소프트웨어, 키프레임에 기반하여 제작 캐릭터 애니메이션은 벡터 포맷, 해상도 독립적인 포맷으로 작성 TOONZ SoftImage사 개발, 셀 애니메이션 제작을 위한 소프트웨어 Animo TOONZ 43 5.6 애니메이션 저작도구 3차원 애니메이션 저작도구 SoftImage XSI MAYA 애니메이션만을 비교해 볼 때 다른 제품에 비해 가장 우수한 성능을 지니 며 모델링은 상대적으로 미흡 NURBS를 이용하여 모델링, 3D SW 중에서 가장 뛰어나다는 평가 모델링된 캐릭터를 움직일 때, 이음새가 보이지않고 자연스런 동작가능 C++ API를 사용하여 Plug-in으로 외부 기능 제작 가능 3D Studio MAX 비교적 낮은 가격에 높은 품질의 기능을 제공 SoftImage XSI 3D Studio MAX 44 5.6 애니메이션 저작도구 웹 애니메이션 저작도구 Director Macromedia사에서 개발한 셀 애니메이션과 트위닝 제작에 필요한 기능 지원 SW Lingo 라는 스크립트 언어를 제공하여 다른 미디어와의 연결 가능 Flash 웹에서 벡터 애니메이션을 제작하는 소프트웨어 인터랙티브한 홈페이지를 제작할 때 필수적, 사용법이 간단하면서 출력물의 결과가 만족스러워 많은 인기 트위닝 기법을 사용하며, 간단한 형태에 대한 모핑을 제공 Director 작업화면 Flash로 만든 eCard 45 디렉터 기본 화면 디렉터 저장하기 • 디렉터의 확장자는 dir 이다 • 최종 사용자가 볼 수 있도록 컴파일된 실행 파일을 내보낸다. • 인터넷을 통한 쇽웨이브 무비 형태로 만들어 지면 확장자는 dcr 이된다. • 내부 정보를 보호할 수 있는 파일은 dxr,cxt 가 있다. Director MX 디렉터 메뉴 살피기 (1) Director MX 디렉터 메뉴 살피기(2) Stage Window Score Window 프로젝트를 만들어서 내보내면 최종 내용을 볼 수 있는 부분. 프레임을 편집할 수 있는 창. FPS, 장면전환, 사운드, 스크립트를 삽입할 수 있다. Cast Window •외부에서 불러오거나 또는 직접 생성한 디렉터에서 사용하는 모든 요소들을 등록시킬 수 있다. •마우스 오른쪽 버튼으로 팝업 메뉴 호출, import를 사용해서 이미지 를 선택. Director MX 디렉터 메뉴 살피기 (3)