Your First Steps into 2D Animation

Adobe Animate is one of the most accessible entry points into professional 2D animation. Whether you want to create short cartoons, animated web content, or character sequences, this guide walks you through the essentials to get your first animation up and running.

What You'll Need Before You Start

  • Adobe Animate (available via Adobe Creative Cloud subscription)
  • A drawing tablet (recommended) or a mouse for simpler shapes
  • Basic familiarity with any creative software — no animation experience required

Step 1: Setting Up Your Document

Open Adobe Animate and select File > New. You'll be presented with several presets. For web or social media animation, choose HTML5 Canvas at 1920×1080px with a frame rate of 24fps — the standard for smooth animation.

If you're creating something for broadcast or film, stick with the ActionScript 3.0 preset at the same resolution. Save your file immediately and give it a clear name.

Step 2: Understanding the Timeline

The Timeline panel is the heart of Animate. Here's what each element means:

  1. Frames — Each cell represents a moment in time. At 24fps, 24 frames = 1 second.
  2. Keyframes — Frames where you define a specific state or drawing. Press F6 to insert a keyframe.
  3. Layers — Separate channels for different elements (background, character body, face, etc.).
  4. Blank Keyframes — Empty frames useful for clearing content. Press F7 to insert one.

Step 3: Drawing Your First Character

Select the Brush Tool (B) and draw a simple character on the stage — even a basic stick figure works perfectly for practice. Keep your character on its own layer labeled "Character." Add a separate layer below for your background.

Use the Selection Tool (V) to move elements, and the Free Transform Tool (Q) to resize or rotate them.

Step 4: Creating a Simple Walk Cycle

A walk cycle is the classic beginner animation exercise. Here's a simplified version:

  1. On Frame 1, draw your character in a neutral standing pose — this is your contact pose.
  2. Insert a keyframe on Frame 6. Draw the character mid-stride with one leg forward.
  3. Insert a keyframe on Frame 12. Return to the contact pose (mirrored).
  4. Insert a keyframe on Frame 18. Draw the opposite mid-stride position.
  5. On Frame 24, copy Frame 1 to loop seamlessly.

Press Enter to preview your animation. Don't worry if it looks rough — animation is all about iteration.

Step 5: Using Motion Tweens

For moving objects across the screen (like a bouncing ball), Motion Tweens do the heavy lifting. Right-click between two keyframes and select Create Motion Tween. Animate will interpolate the position, scale, and rotation automatically.

For character animation, however, most professionals use frame-by-frame drawing rather than tweens — it gives you full artistic control.

Step 6: Exporting Your Animation

Go to File > Export > Export Movie. Choose MP4 (H.264) for sharing on social media or embedding in websites. For web-based interactive animation, use the Publish Settings to export as an HTML5 file.

Tips for Improvement

  • Study the 12 Principles of Animation — they apply directly to everything you'll create.
  • Watch your animation flipped horizontally to spot drawing errors.
  • Keep a sketchbook and study real movement before animating it.
  • Use onion skinning (the ghost overlay feature) to see adjacent frames while drawing.

Starting simple is the key. Master a bouncing ball, then a walk cycle, then a full character scene. Each project builds the muscle memory and instinct that defines a skilled animator.