Principles of Traditional Animation

Principles of Traditional Animation
Presenter: Yuliya Akkuzhyna
Supervisor: Alexis Heloir
Seminar “Character Animation”
(Saarland University, SS 2008)
http://www.uni-saarland.de
Abstract The topic is about the basic principles of traditional 2D handdrawn animation as well as their application to 3D computer animation.
In the presentation, the history of their evolution is described and their
importance in modern animation is showed. All of the principles aim
to achieve natural appealing to the eye action and character. Most of
the principles were developed by observing the real world around us and
analyzing physical laws behind it as well as studying theater staging and
talented actors’ play.
Key words: Animation Principles, Keyframe Animation, Pose to Pose,
Squash and Stretch
1
Introduction
Between the late 1920’s and the late 1930’s the fundamental principles of traditional animation were developed at the Walt Disney Studio. The movements
of the characters were bound to few types and not very appealing. A new drawing approach was necessary to improve the level of animation. Disney set up
drawing classes for his animators. The students studied and analyzed models in
motion as well as live action film. That let to develop isolated procedures producing predictable result. These procedures became the fundamental principles
of animation.
Early 3D animation systems produced worse computer animation due to
unfamiliarity with the fundamental principles that have been used for hand
drawn animation for over 50 years.
In the presentation the principles of traditional animation and their application and importance to 3D keyframe computer animation is explained.
2
Principles of animation
The principles were developed in different time between 1920’s and 1930’s. They
became the rules of the trade, necessary to learn for all animators. They are:
1. Squash and Stretch – changing a shape of an object while it is moving,
expressing such a way its mass and the degree of solidity.
2
Presenter: Yuliya Akkuzhyna Supervisor: Alexis Heloir
2. Anticipation – preparation of the audience to the next event in purpose to
help to catch the next action as it is.
3. Staging – leading the audience’s attention to help to understand the idea of
the story.
4. Straight Ahead Action and Pose to Pose – two approaches to creation of a
hand-drawn animation.
5. Timing – distribution of time between actions to define physical and emotional characteristics of an object.
6. Slow In and Slow Out – spacing of in-between drawings between the key
frames to indicate timing of the action.
7. Follow Through and Overlapping Action – connecting the phases of the
actions to make the whole performance smooth and logical.
8. Secondary Action – an action accompanying or entailed from the main action.
9. Arcs – the visual path of movement to make it natural.
10. Exaggeration – accentuating some components of the scene or character to
better express the idea.
11. Appeal – designing attractive and entertaining character or an action.
In the next sections each principle of traditional animation is explained in
detail.
3
Squash and Stretch
Squash and Stretch is by far the most important discovery. It defines solidity
and mass of an object while it is deformed during an action. An object made of
soft and flexible material squashes and stretches easily and vice versa. One of the
examples could be a bent arm with swelling biceps. The squashed object looks
flattened out and contracted rather in vertical direction. The stretched objects
are lengthened out in vertical direction.
The main rule of this principle is that, the volume of squashing and stretching
object remains constant. The guide to maintain volume in any position and keep
natural looking became a half-filled flour sack. If dropped on the floor, it squashes
out to its fullest shape, and if picked up by the top corners, it stretches out to
its longest shape, yet it never changes its volume [1]. The animators of the
Walt Disney Studio experimented drawing flour sack in different shapes thus to
express an emotions. They discovered that the whole shape of a half-filled flour
sack was enough to brought out clearly attitudes, so that many interior lines
were not necessary (Fig. 1).
The standard animation test for all beginners is to draw a bouncing ball. The
assignment is to represent the ball by a simple circle, and then have to drop it,
hit the ground, and bounce back into the air (Fig. 2). The test teaches the basic
mechanics of animating a scene.
Squash and stretch is used in facial animation to show the relationship of
between the parts of the face. When a face smiles broadly, the corners of the
Principles of Traditional Animation
Figure 1. Constant volume and attitude of a half-filled flour sack [1].
Figure 2. Squash and stretch in bouncing ball [2].
3
4
Presenter: Yuliya Akkuzhyna Supervisor: Alexis Heloir
mouth push up into the cheeks squashing them. When the face adopts a surprised
expression, the mouth opens, stretching down the cheeks.
Squash and stretch relieves the disturbing effect of strobing during very fast
motion because sequential positions of an object become spaced far apart. By
considerable distance between positions the object doesn’t overlap from frame
to frame and viewer perceives separate images. If motion blur is not available,
squash and stretch is a solution. The object is stretched so that its positions do
overlap from frame to frame.
In 3D keyframe computer animation, the scale transformation can be used.
When scaling up in Z-axis, the object should be scaled down in X and Y to
keep the volume the same. While squash and stretch impacts natural looking of
the object the next principles deal with the quality of understanding ideas of
animated story. They are anticipation, staging and timing.
4
Anticipation
An action occurs in three parts: the preparation for the action, what is anticipation, the action itself, and the termination of the action [2]. Anticipation aims
to lead audience attention to the right place in the scene at the right moment.
Anticipation can be the anatomical preparation for the action, e.g., retracting
a foot before kicking a ball. It can also be used to attract the viewer’s attention
and to prepare them for the next event, e.g., raising the arms and staring at
something before picking it up. An example of this is the opening scene of Luxo
Jr.. The father is looking off-screen and then reacts to something. This sets up
the viewers to look at that part of the screen so they are prepared when Luxo,
jr. hops in from off-screen.
A properly timed anticipation can enable the viewer to better understand a
rapid action, e.g., preparing to run and then dashing off-screen.
Anticipation can also create the perception of weight or mass, e.g., a heavy
person might lean back before to stand up, whereas a smaller person might just
stand up. Without anticipation many actions are abrupt, stiff and unnatural.
5
Staging
Staging aims to present an idea so that it is unerringly clear. This idea can be of
an action, a personality, an expression, or a mood. Staging aims to keep “story
point” of the scene.
An important objective of staging is to lead the viewer’s eye to where the
action will occur so that they do not miss anything new. This means that only
one idea at a time occur, or else the viewers may be looking at the wrong thing.
So, the main object should be contrasted in some way with the rest of the scene.
A good example is motion, since the eye is drawn to motion in an otherwise still
scene. In a scene with everything moving, the eye is drawn to a still object.
The animator must use different techniques to ensure that the viewer is
looking at the correct object at the correct time. For example, in Luxo Jr., the
Principles of Traditional Animation
5
father appears first, and so is the center of attention. Then the son bounds in,
moving rapidly, so the center of attention shifts to him. At a certain point the
son stops and looks up at the father, refocusing the attention on the father.
In the early Disney’s animations characters were black and white. All action
was shown in silhouette (to the side), because if a character moved its black arm
in front of its black body it would disappear, so the action had to be against
the white background. The Disney animators realized that even without this
technological limitation action was more clearly visible in silhouette.
Even with modern color 3D graphics, silhouette actions are more clearly
delineated and thus to be preferred over frontal action. An example would be a
character waking up and scratching its side, it is easier to understand what it is
doing than if it scratched its stomach.
Staging closely collaborates with anticipation. Anticipation will be wasted if
it I not staged clearly.
Before to talk about timing in animation it would be worse to explain techniques and schemes used in hand drawn animation.
6
Straight Ahead Action and Pose to Pose
They are two main approaches to work over animation.
With straight ahead action approach the animator works literally straight
ahead from the first drawing getting new ideas while proceeding, having no plan
and knowing only the “story point”. This approach is very creative and is good
for wild, spontaneous actions. But it is weak if there is the strong perspective in
the layout or a background must be matched.
With pose-to-pose approach the animator first thinks about the story and
what drawings and poses may be needed to tell it. He makes key drawings of
the poses (“extremes”), relates them to each other in size and action. Drawings
added in between key drawings are called “inbetweens”. This approach is good
for animation requiring good acting, where the poses and timing is important.
However, actions animated by this approach could appear tedious and predictable.
Pose-to-pose action is an important tool in computer animation. Objects
are built in a hierarchy, where each layer of the hierarchy has an associated
transformation. Animation is then built up one transformation at a time from
one pose to the next. For example, when animating a person walking, you would
first set the pose position for the hips at the start of the motion, and then you
would adjust the hip translation for the end of the action. Then building upon
this original pose, you would transform other objects in the model, until you had
traversed the hierarchy. All of your actions must be well thought out, and the
timing and poses planned so that even in the early stages, the action is clear.
Nowadays both approaches are in use. Often they are combined in a way that
keeps the Straight Ahead Action from getting out of hand. Rough key drawings
serve as a guide for size, position, attitude, and relationship to the background.
6
Presenter: Yuliya Akkuzhyna Supervisor: Alexis Heloir
The next principles deal strongly with inbetweens to express speed and velocity of an action.
7
Timing
Timing regulates a speed of an action. Correct amount of time must be devoted
to the anticipation of an action, the action, and the reaction to the it to keep
viewer’s understanding of it.
Timing affects the perception of physical properties of an object. A heavier
bigger is harder and longer to accelerate and decelerate. For example, character
picks up a heavy object much slower than a light one. These effects are done by
varying the spaces or number of frames between poses.
Timing also indicates an emotional state. Consider a scenario with a head
looking first over the right shoulder and then over the left one. Different number
of in-between frames lets to imply the following meanings:
1. No inbetweens – the character has been hit by a strong force and its head
almost snapped off.
2. Four inbetweens – the character is giving a crisp order.
3. Seven inbetweens – the character tries to get a better look at something.
4. Ten inbetweens – the character is stretching a sore muscle.
8
Slow in and Slow out
This principle distributes density of inbetweens between key frames. A varying
velocity of an object is more appealing and realistic on the movement’s path,
then a uniform one. For example, a bouncing ball moves faster as it approaches
or leaves the ground and slower as it approaches or leaves its maximum position
(Fig. 3).
Figure 3. Timing chart for ball bounce [2].
Principles of Traditional Animation
7
The name of the principle comes from having the object or character “slow
out” of one pose and “slow in” to the next pose.
In most 3D keyframe computer animation systems, the inbetweens are usually
interpolated by splines to control the path of an object. Such spline parameters
as tension, direction and bias are adjusted to give the required effect.
There are potential problem with spline controlled movements – an overshoot
effect. This happens when there is a large change in value between them, especially over a small number of frames, or when the direction control of extreme
is adjusted.
In Luxo Jr., this problem had appeared. For the hop action there was three
key frames, the two stationary positions and the highest point of his jump. The
spline software interpolated the hop, so that his base would move down under
the surface of the floor just before and after the jump (Fig. 4). To solve the
problem animators put two new extremes, equal to the two stationary extremes
(Fig. 5).
Figure 4. The spline of the Z (up) translation of Luxo Jr. Minimal values of the spline
cause him to intersect the floor [2].
Figure 5. Two extra extremes are added to the spline which removes dips in it and
prevents the lamp to ground under the floor [2].
Adjusting speed of the action to show physical and emotional state is not
enough. Then principle described below makes action looking smooth and natural.
8
Presenter: Yuliya Akkuzhyna Supervisor: Alexis Heloir
9
Follow Through and Overlapping Action
Follow Through deals with termination of an action. Overlapping Action is starting the next action before the previous is finished, thus establishing relationship
between actions. In real world actions rarely terminate abruptly. For example,
a hand, after releasing a ball, continues past the actual point of release.
There are five main categories.
1. Appendages of the character (long ears or a tail) gradually stop after the
rest of the figure has stopped.
2. The actions of the parts of a character or an object are not simultaneous.
Some parts initiate the move. This is called the “lead”. In walking action
the heap “leads”, the leg “follows”. Some parts stop, others may still move.
When all parts of the figure stop, this is called a “held” drawing.
3. The loose parts of a figure, such as cheeks or redundant skin on Goofy’s
body, will move slower than the skeletal parts. Such a move lag is called
“drag” and gives feeling of solidity of different parts of the body.
4. Just as the anticipation lets presume something about what is going to happen, the follow through shows how it turned out. The way in which an action
is completed often tells about the personality of a character.
5. The Moving Hold is the rest of elements of Follow Through and Overlapping
Action. A drawing of a pose is held on the screen for a few frames. This let
the viewer to perceive the attitude. To make that drawing “hold” but still
moving two drawings were used, one more extreme than the other, yet both
containing all the elements of the pose.
The following section describes the principle that is mutually complementary
with Follow Through and Overlapping Action.
10
Secondary Action
This is an action entailed by primary action. For example, the body is expressing
the primary action while the facial expression is a secondary action. Another
example could be the trailing electrical cord of Luxo Jr. Secondary action is
used to make a scene more realistic and interesting.
Secondary action should always be subordinate to and not compete with the
primary action. If it dominates the sense of the scene can come obscure. To
avoid it a “building block” technique is used. First, the most important move is
animated to carry the main thought. Then the scene was adjusted and changed
few more times to animate the Secondary Action.
Besides being continuous and smooth it was discovered that an action needs
to follow certain visual path to look more natural.
11
Arcs
According to this principle an animator should locate key drawings or frames
along an arc. This principle was taken from the nature by observing movements
Principles of Traditional Animation
9
of insects and other living organisms. Even falling ball rotates, despite it falls
along straight line. In animation it made actions much smoother and less stiff.
Before the discovery of this principle characters walked popping up and down
rigidly. With arcs they “arced” over at the top of their steps and “arced” under
at the bottom position.
In most 3D keyframe computer animation systems, the spline, along which
inbetweens are interpolated, serves as a visual path of an action as well. The
side effect of automated interpolation is that the arc of the fast action, i.e. with
small number of inbetweens, will be flattened out. This can spoil the essence
of the action. A research is being done about using separate splines for timing
(slow in and slow out) and visual path of an action [2].
The following two principles accomplish construction of entertaining and realistic animation and deal with the design of a character. They are exaggeration
and appeal.
12
Exaggeration
Exaggeration is an accentuating the essence of an idea via the design and the
action and making it entertaining. Exaggeration is not supposed to change object beyond recognition. That is why the animator must carefully choose which
properties to exaggerate to expose the idea and the reason of action. If only one
thing or, on the contrary, everything is exaggerated, then the entire scene may
appear too unrealistic. For example, in Luxo Jr., some parts of a child lamp were
exaggerated to give a feeling of a child (Fig. 6).
Figure 6. Varying the scale of different parts of Dad created a child-like proportions
of Luxo Jr [2].
Sometimes exaggeration is a part of the next principle of traditional animation called appeal.
13
Appeal
Appeal of a character makes the audience wanting to see it. This is equivalent to
charisma in a live actor. A scene or character should not be too simple (boring!)
10
Presenter: Yuliya Akkuzhyna Supervisor: Alexis Heloir
or too complex (can’t understand it). One principle to achieve this is to avoid
mirror symmetry, when both corresponding parts of the body are in the same
position and move the same. The character looks more natural and appealing
when it is asymmetric. It looks then plastic, relaxed and ready to move.
A bright example of making a character appealing is Ratatouille [4], a 2007
computer-animated film produced by Pixar. The challenge was to make the main
hero - the rat appealing.
To make the character plastic and ready to move its overall body was posed
in a teardrop shape with a slight “S” shape down the spine and the center of
gravity was lowered maintaining balance when the body is leaning forward and
switching between biped and quadruped poses believably. Following the shape
of the half-filled flour sack the body contour was simple.
In facial animation squash and stretch is kept. As the mouth moves the base
of the muzzle is deformed, eyes are directed with the smile, and fleshy cheeks
are squashed, which adds softness and appeal to the result (Fig. 7).
Figure 7. Directing eyes with lips [4].
Cradling the teeth within the lips makes them smaller and more appealing.
Rat ears are deformed via other parts of the muzzle as well and mirror the
attitude. Such a connected deformation of the character allows perceiving the
whole body as emotion.
14
Summary
The fundamental principles of traditional animation are obtained by observing
the world around us: living organisms moving play of the actors, staging of
the spectacles in the theater. All of them are used nowadays in 3D computer
animation.
Those describing the physical characteristics of the action have got new application in 3D computer animation. The devices of the theater and actors didn’t
change.
All the principles collaboratively support the main goal of animation – to
entertain. To create successful animation the animator must have an entertaining
Principles of Traditional Animation
11
idea, which is brought to live following the fundamental principles of traditional
animation, proved to be effective over 50 years.
References
1. Franck Thomas and Ollie Johnson , “The illusion of Life, Disney animation”, chapter 3. “The principles of animation”, pp. 47-69, (Abbeville Press, 1981).
2. John Lasseter, “Principles of Traditional Animation Applied to 3D Computer Animation”, Proc. of SIGGRAPH 1987, Computer Graphics, Vol. 21, pp. 35-44, July
1987.
3. Shawn Kelly “Animation tips and tricks”, (2008).
4. Sonoko Konishi, Michael Venturini: “Articulating the Appeal”. August 2007 SIGGRAPH ’07: ACM SIGGRAPH 2007 sketches.
5. http://home.ca.rr.com/harrymott/principles2-8.html
6. http://www.siggraph.org/education/materials/HyperGraph/animation/
character/nimation.htm