Animation Principles

The following 12 animation principles are those distilled from the combined
wisdom of animators over several decades. Animators developed their own
techniques in animating characters, and when these techniques were recognised as
being effective, they were passed on to other animators. The principles were
defined in the book The Illusion of Life: Disney Animation (1981).

Although the principles were developed for traditional hand-drawn animation, they
remain true for computer based animation, be it two dimensional or three
dimensional.

Squash and stretch

This principle is used to convey a sense that an animated object has weight and
volume. Imagine a ball bouncing up and down. As the ball strikes the ground it
squashes downwards and stretches outwards to the sides, forming an oval shape.
This principle can be applied to all manner of objects, particularly when they are
in motion and strike another object or come to a sudden halt.

A bouncing ball squashes on its vertical axis and stretches on the horizontal axis
as it strikes the ground.

In the above example Mister Moonface is alarmed when opening a package.

Squashing and stretching his face adds to the emotion in the scene. First his face
is squashed downwards, and then stretched upwards before returning to its
normal shape.

Anticipation
Prior to performing a major action, a character will perform an action as s/he
prepares to perform the major action. For example a jumping character may bend
down prior to jumping in the air. Another example is when a golfer performs a
backstroke, prior to performing a forward stroke to strike the ball.

In the frame on the left, Mister Moonface car pulls back slightly, in anticipation
of moving forward.

Staging
Staging is a technique in visual storytelling. It is important to ensure that the
audience can clearly see what is happening in a story, so staging a scene helps to
do that. Staging can involve using different camera shots such as close-up, medium
or long shots and also using different camera angles. Using different viewpoints
can help to create a mood or to show a characters emotions. It is also important
to ensure that a characters pose can be clearly seen and that there is no
distracting background that may prevent the audience from following the
storyline.
In the medium shot on the left Mister Moonface looks sad, however the long shot
on the right places him in an isolated location, emphasising his loneliness and
sadness.

Straight Ahead Action and Pose to Pose

Straight ahead action involves drawing a series of animation frames, in turn, from
the beginning through to the end. In using this technique it can be easy to lose size
and proportions of a character and to accurately gauge the timing of an action,
and the effect can look rushed. However, straight ahead action can be very
effective, and can be used with great effect in chase or comic action scenes.

Pose to pose animation is a planned method of animating. Typically the animator

draws the first and last poses of an action then draws the in-between frames. This
allows the animator to control the animation better than when using the straight
ahead technique; allowing better control over size, proportion and timing. The
main poses or frames of the animation are known as the key frames and the frames
in between are known as the in-betweens or simply tweens.

Follow Through and Overlapping Action

This type of action can best be described with an example. A cat character begins
to run, the body moves forward, but the trailing tail of the cat may linger behind
to catch up a few frames later. As the cat comes to an abrupt halt its tail
continues to move forward, but again finally catches up with the cat a few frames
later. This type of action occurs when parts of a character move at a slightly
different rate than the main mass of the character. His type of action can be
applied to clothes on a character, long hair or to other trailing items.
Mister Moonface cape billows out behind him as he walks. When be comes to an
abrupt halt, the cape continues moving forwards, wrapping around him, before
falling into its natural position.

Slow In and Slow Out

Also known as easing or ease in ease out this technique is used when drawing
a character performing a movement. Movements tend to build in speed, starting
slowly and getting faster, then slowing down to a stop. When a car starts moving,
it builds up to speed, and then when it brakes it slows down before stopping. This
effect can be achieved by creating more frames of animation at the start and end
points of a movement, with each of the drawings less widely spaced.

This diagram shows a number of animation frames

of a falling ball. As the ball falls it accelerates
due to the effect of gravity. The frames at the
start of the movement are close together, when
the ball is falling slowly. At the end the frames
are further apart as the ball is moving more
quickly. This is an example of the use of the slow-
in principle.

Arcs
Most actions do not occur in a straight line (except movements such as mechanical
machine actions). For example a characters arms swing in a pendulum motion in
an arc. This should be remembered when drawing the frames of a movement,
whether it is a head turn, a walking character, or a more complex movement.

Secondary Action
A secondary action is an action that supports the main action of a character. For
example, the main action of a walking character is the leg movements; however
there will also be secondary actions such as arms swinging, head bobbing up and
down or a scarf waving in the breeze. Each of these actions is secondary,
supporting actions that add realism to the main action.

Timing
Accurately matching the timing of an action in animation is difficult to achieve
without much trial and error. Many animators use video of real people and things
as a reference to decide how many frames of animation are needed to accurately
time a movement. Most animation is made up of frame changes on every two
frames of film, which is known as animating on twos. Sometimes, with fast
movements, this results in a jerky motion that looks unnatural. In order to
overcome this animators will draw every frame of the animation to make it appear
smooth. Animating on twos reduces the amount of work an animator has to do,
but animating on ones is sometimes required for fast movements or complex
things such as accurate lip-synch for talking characters.

Exaggeration
Exaggeration is the use of caricature and slight exaggeration to emphasise
movement and actions. Animation contains less detail than real life, so sometimes
it is difficult to accurately portray expressions and emotions, so they must be
exaggerated to make them more obvious. For example a character throwing a ball
will lean back more than they would in real life as they wind up for the throw. As
the character throws the ball and releases they will follow through with a much
more exaggerated arc of motion. The principle of squash and stretch is an
exaggeration in itself, as the animator will usually squash and stretch an object
more than it would in real life. Exaggeration can also be applied to facial features
to help portray emotions. Sometimes a characters whole body will be
exaggerated, for example when a character gets a sudden scare and jumps up in
the air with fright.

In the above example Mister Moonface is startled by a spider. His reaction is to

jump with fright. His facial expression is exaggerated, as are the shape of his
head and the movement of his upper body.

In the second example, Mister Moonface reaction is exaggerated even further, to

the extent that he actually jumps off the floor. More extreme exaggeration is
used for comic effect in cartoons.

Solid Drawing
Solid drawing is using drawing techniques to make a flat object appear to be a
solid three dimensional mass. This includes the use of shading and shadow to make
flat two dimensional objects appear to have depth.

Appeal
Appeal is the animated characters version of an actors charisma. Appeal does not
necessarily mean attractive, it can apply to evil or villainous characters as well as
heroes and animals. In animation terms, appeal means that a character is easy to
read they have a clear personality and usually some visual clues that tell the
audience about the character. A simple example is a timid animal character with
wide eyes, drawn in bright colours and a villain character drawn with dark colours
and beady eyes.

Mister Moonface next door neighbour is

Mister Midnight. While Mister Moonface is a
happy and fun character, Mister Midnight is
nasty and scheming.
Creating a simple character animation using motion tweens

In this tutorial you will learn to create a simple animated character in Adobe
Flash. The character will be a simple egg shape, with a face and you will make it
jump up and down on the spot. You will create 5 keyframes and use Adobe Flash to
create the tweens. You will use several animation principles in the tutorial

Solid Drawing to create a shaded character that looks three dimensional

Anticipation to make the character anticipate its upwards jump
Squash and Stretch to make the character jump more realistically
Timing - to adjust the speed off the animation to make it look more natural

1. Open the Adobe Flash authoring tool and create a new Flash File.

2. Select the Oval Tool and set its Fill Colour to one of the default radial
gradients and its Stroke Colour to none.

Radial Gradients are

found at the bottom
of the Colour Picker

3. Draw a circle shape on the bottom third of the stage.

4. Select the Gradient Transform Tool (sometimes hidden under the Free
Transform Tool). Select the circle you drew earlier and drag the centre point of
 the gradient fill upwards and to the right. This creates a circle with shading,
making it look more three dimensional.

The Gradient Transform Tool has several

draggable handles that alter the position,
scale and rotation of a gradient fill.

5. Select the Free Transform Tool and drag the circle to creat a more oval shape.
You can also use the Selection Tool to drag parts of the edge of the oval to
make a more irregular shape.

6. Select the Oval Tool again and set its Stroke Colour to none and its Fill Colour
to white. Draw a small oval on top of the original oval to create an eye. Repeat
the procedure to create the characters second eye. Also use the oval tool,
with the Fill Colour set to black, to draw the eye pupils. Sometime is is easier
to do this when zoomed in close use the Zoom Tool to work more closely on
the drawing.
7. Use the Brush Tool, Pencil Tool or Line Tool to give the character a mouth
shape.

8. Next select the whole drawing by choosing Edit Select All from the menu bar.
With the drawing selected, convert it to a symbol. Select Modify Convert to
Symbol from the menu bar. Name the symbol character and ensure the symbol
type is set to either Graphic or Movie Clip

9. With the Free Transform Tool selected, drag the centre point of the drawing to
the bottom centre of the drawing. This will make the drawing scale properly
when we use Squash and Stretch animation principle later.

Drag the centre point down to the

bottom middle.
10. Next, create the keyframes of the animation. In the Timeline, add keyframes at
frames 5, 10, 15 and 20. To do this select the frame then choose Insert
Timeline Keyframe from the menu bar or press F6.

11. Ensure frame 5 is selected in the Timeline. Select the Free Transform Tool and
drag the top middle handle on the character downwards to squash the
character to about 2/3rds of its original height. Drag either the left middle or
right middle handles to stretch the character outwards. This represents the
character bending down, ready to spring in the air.

12. Select frame 10 in the Timeline. Drag the character upwards until it is about
half its height off the ground. Use the Free Transform Tool to stretch the
characters height and to squash its width.

13. Select frame 15 in the Timeline and drag the character upwards until it is own
height off the ground.
14. Test the animation by choosing Control Test Movie from the menu bar. A
small playback window opens and you will see the keyframes being played
back. The animation is very jerky as there are no in-between frames.

15. Next you will add tweening to your animation.

16. Select any frame between 1 and 5. In the Property Inspector set the Tween to
Motion. Select any frame between 5 and 10. In the Property Inspector set the
Tween to Motion. Select any frame between 10 and 15. In the Property
Inspector set the Tween to Motion.

17. The animation is now complete. Test it by choosing Control Test Movie from
the menu bar. The animation will play in a small window. You will notice that
the animation is quite slow, playing back at the default speed of 12 frames per
second. This is too slow for this type of motion. First close the playback
windows, then change the playback speed of the movie by choosing Modify
Document from the Menu Bar and setting the Frame Rate to 24. Test the movie
again and the animation will look more natural.

18. Finally you should save and publish your animation. Save the file by Choosing
File Save As from the menu bar and choosing a suitable filename and folder.
The file will save as a .fla file.
19. To publish your animation, choose File Publish Settings. You will see a number
of options as shown in the diagram below:

In this dialogue box you can choose how to publish your animation so that it may
be shared with others. The most common method is to choose both Flash (.swf)
and HTML (.html) which creates a web page with the Flash file embedded within
it. Select these options and select the Publish button. The resulting files will be
saved to the same folder as the Flash .fla file you saved in the previous step. In
later versions of Adobe Flash the file AC_RunActiveContent.js is also created for
compatibility with modern Web Browsers.

You can use the Help menu in Adobe Flash to find out more about the other
publishing options and when you could use them.