In this walkthrough, we've outlined how to use Adobe Animate CC to create 2D character animations in various media formats.
Prepping Your Stage
First, start a new document and choose "HTML5 Canvas" under the Create New section. HTML5 doesn't require a plugin to run in a web browser, so it's extremely user-friendly.
Now, go to the Properties panel and click on the Stage Color icon to change it, depending on your creative needs. In this panel, you can also adjust the stage's width and height. Generally, a 16:9 ratio is recommended for video animations, because the video won't be stretched if you play it on a TV or YouTube.
To the right of your stage, you should see a thin vertical panel with various tools. Click on the CC Libraries icon at the bottom of this panel. Here, you can search Adobe's database for media assets, or you can drop in media from an existing library.
Click and drag on any item (such as a background image or vector-based character) to add it to your stage. Your media asset may be larger than the current stage dimensions, but you can choose the Free Transform tool (in the main Tools panel) and drag on an object to resize it.
Adding a Character
Next, you'll need to create a separate layer for your character animation. At the bottom of the screen, you should see a Timeline panel, which lists the current layers along a frame-based timeline. Click the New Layer icon in the bottom left corner, and rename it for your character.
With the layer still selected, go back to the CC Libraries panel and find some character artwork to drop into the scene. When you drag the artwork onto the project, you'll see a dialog with various import settings. In the "Convert Layers to" section, make sure to select "Single Animate Layer".
Now, you can drag the character anywhere on the stage to start your animation. Since vector-based characters are composed of many different shapes, it's fairly easy to animate. You won't have to draw an entirely new character every frame. Instead, you can adjust the individual vector shapes with your mouse.
Animating the Character
Before creating an animation, take a look at the Timeline. There should be a red line and box over your frame, called a "playhead", and it tells you which frame is currently displayed.
There should also be a black dot on Frame 1 of each layer. This is your keyframe, and it determines the properties for your object. With multiple keyframes, you can seamlessly change these properties across time.
Click and drag anywhere on the Timeline to start selecting empty boxes. If you choose "Insert" > "Timeline" > "Frame", those boxes will be filled in with the current frame.
Now the fun can begin! If you select a frame range in the Timeline, and then choose "Insert" > "Motion Tween", you can start to animate vectors. Ctrl+click on the character sections that you want to animate in tandem, and then move them to a new position. You can rotate, stretch, or simply reposition these objects.
Finally, you can preview the animation by dragging (or "scrubbing") the playhead through your Timeline. Now that you've learned how to use Adobe Animate CC on a basic level, it's time to experiment with different animation ideas!