2D 벡터 캐릭터 애니메이션을 만들고, 움직임을 세밀하게 조정하고, Adobe Stock에서 에셋을 가져오고, 다양한 포맷으로 제작하는 방법을 살펴봅니다.

이 애니메이션을 따라 만들어 보려면 에셋을 다운로드하십시오.

이 애니메이션을 따라 만들어 보려면 2D 애니메이션 에셋을 자신의 Creative Cloud 계정에 저장합니다. Creative Cloud Libraries에 에셋을 저장하면 Animate CC의 CC Libraries 패널을 통해 이러한 에셋을 이용할 수 있습니다. 

참고: 라이브러리를 저장하려면 Creative Cloud 계정에 로그인해야 합니다. Adobe ID가 없는 경우 Adobe ID를 만듭니다.

1. 애니메이션 스테이지 준비

HTML5 Canvas 문서를 만들고 스테이지 및 문서 속성을 설정하여 애니메이션 프로젝트를 준비합니다. Adobe Stock에서 벡터 이미지에 액세스하여 애니메이션의 배경으로 사용합니다.

2. 장면 만들기

합성 이미지에 레이어를 추가하고 사각형 툴, 펜 툴 및 브러시 툴과 같은 드로잉 툴을 사용하여 배경 장면을 완성합니다.

3. 캐릭터 가져오기 및 준비

캐릭터에 해당하는 새 레이어를 만든 다음 CC Libraries 패널에서 Illustrator CC로 그린 캐릭터를 가져옵니다. 무비 클립 심볼을 만들고 레이어를 분리하여 애니메이션을 위해 캐릭터의 모든 부분을 준비합니다. 

참고: 2D 애니메이션 에셋을 클릭하여 캐릭터를 자신의 CC Libraries 계정에 저장합니다.

4. 캐릭터에 애니메이션 적용

프레임과 키프레임의 차이점과 모션 트윈과 모양 트윈의 차이점을 살펴봅니다. 그런 다음 이 기능들을 사용하여 반복되는 애니메이션을 캐릭터의 다른 부분에도 적용하여 사실적인 움직임을 표현합니다.

5. 기본 타임라인에 애니메이션 추가

무비 클립 애니메이션과 기본 타임라인에 있는 애니메이션의 차이점을 살펴봅니다. 기본 타임라인에서 캐릭터에 애니메이션을 적용하고 패스를 세밀하게 조정합니다. 하늘에 있는 구름에 대해 다른 애니메이션을 정의하고 애니메이션 프로젝트를 테스트합니다.

6. 프로젝트 제작

제작 설정을 사용하여 프로젝트를 웹용으로, Dreamweaver, Muse 또는 InDesign 프로젝트용으로 또는 사용자 정의 제작 대상으로 내보내는 방법을 살펴봅니다.

7. 작품 공유

소셜 미디어에서 #MadeWithAnimate로 태그를 지정하여 애니메이션을 공유하세요.

 

이상입니다. 이제 모든 작업이 끝났습니다. 이 튜토리얼에 대한 여러분의 의견을 보내주십시오.

 

02/13/2017

Contributors: Joseph Labrecque, Ryan Bubnis

이 페이지가 도움이 되었습니까?