Principles of Animation - 1

Bringing your Animation to Life

Using keyframe animation, it is too easy to create dull, robotic animation. Linear paths make for lifeless animation. This tutorial will demonstrate a few ways to apply some of the principles of animation, into your Flash projects.

Anticipation and Follow Through

Naturally, before an object with awareness moves forward, it anticipates the motion, by moving backwards slightly, first. After finishing the forward action, it doesn't completely come to a stop all of the sudden- it pulls back a little bit. This should be especially apparent if the action doesn't ease out.

Raise you hand to eye level and hold it still. Now deeply relax the bones in your hands, and then casually move it about one foot to the side. Watch closely the anticipation and follow through motions which naturally occur.

To create a gross cartoon effect, every sweeping motion without obvious easing should have a contrasting action at it's beginning and end.

If you play Ball #1 you can see that it is on a linear path. It just goes straight to the end point, at the same speed all the way there.

Although the motions are subtle, Ball #2 pulls back momentarily, before easing ahead. At the end, it bounces a bit. This creates a more natural, and interesting animation.

To apply these effects in Flash, first animate the main path you want an object to follow, and enable Motion Tweening.

Next, add new keyframes (F6) a few frames after the beginning frame, and a few frames before the last frame.

On the second keyframe (frame 3), move the object behind it's original position. On the third keyframe (frame 18), position the object farther than the end destination.

Double click between the 2nd and 3rd keyframe, and in the Tweening tab, set the easing In.

This is the first step to creating natural looking animation. You can use this technique animating anything which moves, rotates, or scales.

Squash and Stretch

When an object squashes and stretches, it appears to be composed of a softer, organic, elastic material. Objects which do not stretch appear rigid and plain.

Click on the balls to the right, to play them. Although the Ball #1 bounce is more realistic, it's looks unappealing.

By stretching Ball #2 before and after impact, and then squashing it as it hits, it appears to be moving faster right before and after it hits the ground. The stretching and squashing evokes superior optical stimulation.

Subtle exaggeration can grossly enhance an animation's illusion of realism, and make it more stimulating to watch. Overexagguration can make an animation look clearly unrealistic, and cartoon-like.

For most natural animation, good to keep exagguration quick and subtle.