ANIM
TECH
Chapter 08 · 2D Digital Animation
Animation
Techniques
From keys and breakdowns to walk cycles and inverse kinematics — the complete technical toolkit for bringing characters to life.
What’s Inside
The mechanics behind every convincing movement
This chapter covers the core animation techniques used in 2D digital production — timing, spacing, arcs, lip sync, bone tools, and cyclic animation — with a focus on practical Flash/Animate workflows.
- 01Keys, Breakdowns & In-Betweens
- 02Path of Action
- 03Timing & Spacing / Ease-in & Ease-out
- 04Bouncing Ball Animation
- 05Stretch & Squash
- 06Head Turns & Turnarounds
- 07ARC Principle & Solid Drawing
- 08Lip Synching & Facial Animation
- 09Animating with Bone Tools (IK)
- 10Walk, Run & Fly Cycles
Animation Techniques
Keys, Breakdowns & In-Betweens
This is the foundational animation concept that every animator starts with. A character moves from position A (extreme 1) to position B (extreme 5). The positions at A and B are called extremes, while positions 2, 3, and 4 between them are called in-betweens. The line connecting A and B is called the Path of Action.
A Breakdown pose is a critical intermediate pose inserted between two extremes to guide the natural arc of movement. Without a breakdown, in-betweens are calculated mechanically by the software, resulting in incorrect — often linear — motion. Adding a breakdown corrects this.
💡 Breakdown poses are not optional — they are the difference between mechanical-looking and genuinely natural animation. Always insert a breakdown before relying on software interpolation.
Animation Techniques
Path of Action
The Path of Action is the imaginary line that indicates the suggested movement of an element or object during animation. It is a planning tool that allows an animator to visualize movements in advance and correct any flaws before production begins.
A clear path of action prevents the most common beginner mistake: letting software interpolate positions along a straight line when the real motion should arc. Whether it’s a bouncing ball, a swinging arm, or a turning head — the path of action is always a curve, never a straight line.
📐 Sketch the path of action before placing a single keyframe. It is your blueprint — every in-between should respect it.
Animation Techniques
Timing, Spacing & Ease-in / Ease-out
Time is the essence of animation. The speed of real-world objects varies at the beginning, middle, and end of a movement. Getting an object to convey a sense of weight depends entirely on how it moves — and natural movement depends on correct timing and spacing of animated poses.
Uniform spacing between frames creates mechanical, unnatural movement. The solution is Ease-in / Ease-out: frames are clustered closer together at the start and end of a motion (slow-in, slow-out) and spread farther apart in the middle (faster movement).
Frames clustered at the start — movement begins slowly and accelerates. Object gradually increases speed.
Frames clustered at the end — movement decelerates before stopping. Object gradually reduces speed.
🚗 Think of a car: it gradually increases speed when starting (ease-out) and gradually slows down before stopping (ease-in). Uniform speed looks robotic — it has no weight.
Animation Techniques
Bouncing Ball Animation
The bouncing ball is a classic beginner exercise that reveals many important animation concepts at once. The ball rises and falls in parabolic curves. Due to gravity, the height of each curve gradually reduces until the ball comes to a halt.
The key insight: the ball does not move at uniform speed. At the top of each arc it slows (ease-in) and as it falls and rises it moves faster. This speed variation must be represented by adjusting the spacing between frames — frames spaced farther apart at the peak (slow) and closer together on the way down and up (fast).
To complete the exercise, add Stretch and Squash: the ball squashes flat when hitting the floor and stretches vertically when in fast motion. This makes the animation look far more natural and elastic.
Animation Techniques
Stretch & Squash
Flexible materials like rubber squash their shape when they hit a harder surface. When they move fast, they slightly elongate in the direction of movement. This principle — known as Stretch and Squash — is one of the classic 12 principles of animation and can be applied across many situations beyond just rubber balls.
Stretch and squash can be applied to character faces (cheeks stretching on a fast turn), full bodies (exaggerated crouching before a jump), and props. The key rule is that volume must remain consistent — when an object squashes wider, it becomes shorter; when it stretches taller, it becomes narrower.
The more squash and stretch you apply, the more life and energy the movement conveys — but the volume of the object must never change.— Animation Principle
Animation Techniques
Head Turns & Turnarounds
The head turn is one of the most frequently used animation movements. The number of in-betweens controls the speed: more in-betweens create a slower, more deliberate turn; fewer in-betweens produce a quicker snap.
Define the start (left profile) and end (right profile) extreme poses. Align facial features horizontally so they are consistent between views.
Add a front-facing breakdown pose in the middle. Close the eyes in this pose and push the head level slightly downward to simulate the natural dip of the head during a turn.
Create two more in-betweens on each side of the breakdown, referencing each extreme. Eyes are half-closed in these transition frames. The result is a 5-pose head turn sequence.
For Turnaround Animation, a full 360° rotation requires drawing eight distinct views: Front, ¾ front right, Profile right, ¾ back right, Back, ¾ back left, Profile left, and ¾ front left. All body parts and facial features must be carefully aligned across views to avoid jitters. More intermediate drawings produce a smoother turnaround but significantly increase workload.
Animation Techniques
ARC Principle & Solid Drawing
Movements of living beings generally follow an arc path rather than a linear (straight) path. This concept is fundamental to creating more natural action. The arc path is visible in a head turn from side to side, the swing of arms, and the movement of fingers — all follow curved trajectories, never straight lines.
The Solid Drawing principle addresses a key challenge of 2D animation: simulating a three-dimensional space with two-dimensional objects. Characters must look real and volumetric when they move — not like flat cutouts. When body parts on left and right sides are perfectly symmetrical and identical, the result looks stiff and artificial. Varying each side slightly creates a much more natural, three-dimensional appearance.
🌊 Arcs are nature’s default. Straight-line movement only exists in machines. Every organic movement — whether a hand wave or a head nod — arcs through space.
Animation Techniques
Lip Synching & Facial Animation
Creating convincing lip movements for dialogue is a core animation skill. Dialogue can demand hundreds of mouth positions to match a voice track. Traditional animators developed an elegant solution: Preston Blair’s nine phoneme positions can substitute convincingly for any spoken dialogue.
Study these sounds in front of a mirror. Note that speech is phonetic — words are not pronounced letter by letter, so match mouth shapes to the way words actually sound when spoken naturally. Modify the style of each phoneme to suit your character’s design and store them as a mouth symbol in Flash’s library.
For Facial Animation, convert each facial feature — eyes, eyebrows, nose, mouth, jaw — into individual symbols placed in separate layers. Animate them independently by inserting keyframes at required intervals to change expressions.
Animation Techniques
Animating with Bone Tools (IK)
Flash’s Bone Tool works on the concept of Inverse Kinematics (IK). IK is a method of animating objects using a chain of bones — when one bone moves, all connected bones move in relation to it. By specifying start and end positions of bones on the timeline, Flash automatically interpolates the in-betweens.
Deforming a single vector shape — bones are applied inside one continuous shape to bend it organically
Chaining a series of movie clips — separate character parts are linked by bones into a connected skeleton
Separate all moving parts and convert each to a Movie Clip symbol. Adjust pivot centers relative to adjacent connecting parts. Uncheck “Auto Set Transformation Point” in IK Bone tool preferences.
Create a DUMMY movie clip as the root of the skeleton — this allows all body parts to be moved together. Arrange body parts into Pose A, then start attaching bones beginning from the DUMMY outward.
Insert Pose frames at regular intervals (e.g. frames 5, 10, 15…) and rearrange body parts into the desired pose at each frame. Flash interpolates the transitions automatically. Adjust frame intervals to fine-tune timing.
Animation Techniques
Walk, Run & Fly Cycles
Cyclic animation is playing a repeated sequential movement in a looping manner. This is achieved by converting repeated movements into an animated symbol that loops endlessly. Walk, run, and fly cycles are the most common applications.
Walk Cycle — Four Key Poses
The four stages are repeated for the opposite leg and arm, making 8 total stages for a full traditional walk cycle. In Flash, the tweening method simplifies this to 4 stages (Poses A–D plus a return to Pose A as Pose E), using Classic tweens between each stage.
The Fly cycle uses 8 stages. In drawings 2–4, the bird raises wings upward to prepare to catch more air. In drawings 6–8, the bird pushes air downward by spreading the wings fully. The cycle loops to create continuous flight.
Summary at a Glance
The Big Picture
This chapter covered the complete technical toolkit of 2D animation — from the foundational Keys-Breakdowns-InBetweens model through to the nuances of timing, spacing, and natural arcs.
We explored how Ease-in and Ease-out, Stretch and Squash, and the ARC principle all work together to make movement feel believable and weighty. The bouncing ball exercise brings all of these concepts together in a single practical task.
We then moved into character-specific techniques: head turns, turnarounds, lip synching with Preston Blair’s nine phoneme positions, facial animation, inverse kinematics with Flash’s Bone Tool, and building walk, run, and fly cycles for looping character movement.
Practice
Activities
Create a bouncing ball animation applying ease-in/ease-out spacing and stretch-and-squash principles. Observe how varying the spacing changes the perceived weight of the ball.
Animate a 5-pose head turn using extremes, a breakdown, and in-betweens. Experiment with different numbers of in-betweens to compare slow versus quick turns.
Create a lip-sync animation for a short dialogue using Preston Blair’s nine phoneme positions. Study the audio carefully and match mouth positions to the actual phonetic sounds, not the individual letters.
Build a complete walk cycle for your character using the Flash tweening method (4 poses, Classic tweens). Add a shadow layer and a scrolling background to produce a finished scene.
Using the Bone Tool (IK), rig a character and animate a short dance sequence of at least three distinct poses, interpolated automatically by Flash.