Create a 2D character animation

Learn how to create a 2D vector character animation, fine-tune its movements, import assets from Adobe Stock, and publish to a variety of formats.

Want to re-create this animation? Get the assets

If you want to re-create this animation, save the 2D Animation assets to your own Creative Cloud account. Once in your Creative Cloud Libraries, you can access these assets from the CC Libraries panel in Animate CC. 

Note: You need to be signed into your Creative Cloud account to save the library. Get an Adobe ID if you don't have one.

1. Prepare the animation Stage

Create an HTML5 Canvas document and set the stage and document properties to prepare your animation project. Access a vector image from Adobe Stock to use as the background to the animation.

2. Create the scene

Add layers to the composition and use drawing tools, such as the Rectangle, Pen, and Brush tools to finish drawing the background scene.

3. Import and prepare the character

Create a new layer for the character. Then, import the character, drawn in Illustrator CC, from the CC Libraries panel. Create movie clip symbols and separate the layers to prepare all parts of the character for animation. 

Note: Click 2D Animation assets to save the character to your CC Libraries account. 

4. Animate the character

Learn the difference between frames and keyframes and motion tweens and shape tweens. Then, apply these concepts to apply looping animation to the different parts of the character to create the appearance of realistic movement.

5. Add animation to the main timeline

Learn the difference between movie clip animation and animation on the main timeline. Animate the character across the main timeline and fine-tune its path. Define separate animation for a cloud in the sky and test your animation project.

6. Publish your project 

Use the publish settings to export your project for use on the web, in Dreamweaver, Muse, or InDesign projects, or to a custom publishing target.

7. Share your work

Share your animation on social media by tagging it with #MadeWithAnimate

 

That's it — you're done. Tell us what you think about this tutorial.

 

11/02/2016

Contributors: Joseph Labrecque, Ryan Bubnis