Deliverables for 14 July 2017

Hand up of 500-1000 words on the production of your animatics, cover what principles of animation where used and why, did the animatic work out the way you planned, how those it compare to other the work of professionals in the field (give at least one example, from the simple drawings of Scorsese or the complex story boards of MadMax), how had you improved upon your original concept (staging, creating anticipation through actions of characters, developing a clear story arc). Talk about the cinematic conventions used, such as colour schemes (complementary colour schemes, the psychology of colours etc..), composition (rule of thirds , centre framing etc...)

That paragraph is 100 words so just elaborate on points and 500 words will be easy.

Hand up of your completed animatic and final script, the animatic should be timed correctly and add sound or music where appropriate. Remember the principles learned when animating the animatic. Find a copy of a formatted script below.

Contact me on

Send on copies of your animatic, script and essay to me by 30 June for feed back.


Introduction to principles of animation

These classes will be based on the 12 Principles of Animation which are laid out in the book The Illusion of Life, Disney Animation a book by Ollie Johnston and Frank Thomas, two of the animation masters at Disney's during the Golden Age of animation(1930's & 1940's). Ollie Johnston and Frank Thomas were part of a group know as Disney's Nine Old Men which also included Lee Clark, Marc Davis, Milt Kahl, Ward Kimball, Eric Larson, John Lounsbery and Wolfgang Reitherman.

The main purpose of the principles was to produce an illusion of characters adhering to the basic laws of physics, but they also dealt with more abstract issues, such as emotional timing and character appeal.

Insert of animation Principles.jpg

Timing & Spacing

Two of the most fundamental principles of animation are timing and spacing. Although they are very different, they are often mixed together. 
So it is going to be important that when we are talking to each other that we know what we mean when we say timing or when we say spacing.

“Timing is the amount of frames it takes for an action to take place”


“Spacing is the distance an object moves within a defined time for that action but it is also the distance it moves for every frame of that action”


So the timing is how long it takes something to happen and the spacing is the action that happens in that time. 

Timing can have a major effect on how we perceive an animated object. By giving objects different timing as they fall we can give different illusions of weight. Which can give context to an object. The three squares below give no information as to how heavy they are until we begin to animate them.


If we were to make the first square fall at six frames from top to bottom it will fall faster and give the illusion of being heavy. If we make the second square fall at 12 frames it will fall slower and give the illusion that it is not as heavy as the first square. If we drop the third at 24 frames it will seem extremely slow compared to the first square.


Timing can have a huge effect on how we perceive a character, if a character moves with slow timing it will appear to be heavy and likely very big. And if a character has fast timing it will appear to be light and probably small. 

Recommend watching "The Iron Giant" to see a good example of this.

Keep an eye out for a cameo by Frank Thomas and Ollie Johnston as the train drivers.

iron giant 01_o.jpg

As animators your job is to move things, so understanding how things move is very important. The best way to do this is by observing how things behave. If you want to animate a horse go out and watch horses, research how they move by videoing them or use other source such as Eadweard Muybridge

You will also need to have a fundamental understanding of basic physics such as Newtons Laws of Motion.

"The first law of motion, an object at rest tends to stay at rest"

Find out more

"The second law of motion, when a force acts upon an object, that object’s velocity will change at an increasing rate"


What does this have to do with animation? When we are animating objects we want them to move naturally unless it is a mechanical object such as a robot.

So as Newtons laws states when an object starts to move, a force has acted upon it causing it to accelerate. Which means the object will get faster and faster until the force stops acting on it. 

This is actually one of the 12 Principles of Animation. It is called "slow-in and slow-out". It is called slow-in because the object is slowly moving into the animation. And called slow-out because the object is slowly moving out of the animation. This will help give your animations a more natural look.

In the video below the top circle is using slow-in and slow-out, the bottom circle is not. The top circle will be moving slowly to begin with, then speed up and then slow down again at the end. The bottom circle will just begin and keep a constant speed until the end. Both circles will be in the same position at the beginning, middle and end of the animation.


To achieve this we are going to change the spacing. If we have more drawings near the starting pose, one or two in the middle, and more drawings near the next pose. Fewer drawings make the action faster and more drawings make the action slower. Slow-ins and slow-outs soften the action, making it more life-like.

So to create a slow-in, we need to place the frames close together and then move them apart gradually. And to create the slow-out we will need to gradually place the frames closer together at the end of the animation.


Slow-in and slow-out are also known as easing-out and easing-in. When we use the term easing it is referring to the key frames. So it is easing out of the keyframe and easing in to the keyframe rather than slowing into the action or slowing out of the action.

Timing is the essence of everything we do in animation. How slow or how fast an object or character moves helps define that object or character.

When we animate we generaly want to make the action as realistic as possible. To achieve this we use timing and spacing such as slow-in and slow-out. In the case of a slow-in, most in-betweens are near the last key drawings and deceleration is very evident. In the case of slow-out, most inbetweens are near the first key and gradual acceleration is evident. Animating any action requires an understanding of dynamics and kinetics from physics. As action starts, we have more drawings near the starting pose, one or two in the middle, and more drawings near the next pose. Fewer drawings make the action faster and more drawings make the action slower. Slow-ins and slow-outs soften the action, making it more life-like.


Fast or slow, straight or curved, smooth or jerky, more than any other factor, timing via the placement of in-betweens defines the weight of an object and the inertia required to get it moving or to slow it down. Two objects of identical size and shape can appear to have vastly different weights simply by manipulating the spacing of their in-betweens. A heavy goods train with massive inertia might take several kilometres of railway track to build up to its final running speed. This acceleration is long and slow. A marshmallow on the other hand, with practically no weight at all, might be shot from a gun and attain full speed within a few micro seconds. We can artificially represent these two types of movement through the way we use slow-in and slow-out.

In early animation, the action was limited to mainly fast and slow moves, the spacing from one drawing to the next fairly even. But when the poses of pose-to-pose animation became more expressive, animators wanted the audience to see them. They found that by grouping the in-betweens closer to each extreme, with only one fleeting drawing halfway between, they could achieve a very spirited result, with the character zipping from one attitude to another. “Slowing out” of one pose, then “slowing in” to the next pose simply refers to the timing of the in-betweens.


The animator indicates the placement of the in-betweens, the slow in or slow out, with a “timing chart” drawn on the side of the drawing. This tells himself, or his assistant who will be doing the in-betweens later, how he wanted the timing to be and where he wanted the in-between drawings placed. The drawings that come between key drawings are called in-betweens. As the in-betweens are added the action looks more complete and appealing. Notices that drawings numbered 2 to 5 are inserted between the key drawings 1 and 6 these are the in-betweens for this action.


What Are Inbetweens? 

‘Inbetweens’ are those drawings that define the type of movement and the time that passes between each key pose drawing and position. How you arrange their spacing greatly influence the look of the resulting movement. These intermediate drawings are called ‘tweens’ in USA cartoon animation studio jargon that makes an invented verb, ‘tweening’.


The default setting for most time-based software packages designed to manipulate visual elements is to create strict mathematically even divisions between key positions. The result is very unnatural motion in that all objects instantaneously achieve full speed, or stop instantaneously. This works against almost everything we observe in nature and we read this type of motion as a ‘bump’ when its starts and a ‘bump’ when it finishes.

Eases can be used to create acceleration and deceleration. As a ball bounces, it accelerates and decelerates. When you drop the ball, it gains speed as it approaches the ground. After the impact on the ground it bounces and begins to loose speed as it reaches the apex of its bounce. The graph of the balls acceleration would show an increasing distance between the balls positions as it came closer to the ground. Similarly, the graph of the balls bounce off the ground would indicate a decreasing distance between the balls positions as it reaches the apex.


Benny's twelve frame yawn is an important example of the importance of timing and spacing. Ken Harris tells a story of how when Ben Washam joined Warner Brothers he was given the task of animating a yawn. Ben drew twelve elaborate drawings of someone yawning. But when he went to shot it, it only lasted the blink of an eye (12 frames) so he tried to shoot it on two's (24 frames) but still it didn't look right. Ken took him aside and showed him how to time the action correctly and then use in-betweens to create slow-in and slow-out on some actions.

Screen Shot 2014-02-01 at 20.34.05_o.png

Squash & Stretch

Squash and Stretch help to define how rigid an object is. All objects change shape when a force is applied to them. Solid objects have so little that it can be ignored when you throw a bowling ball you won’t see it change form or when you sit on a chair it does not change shape. These are rigid objects and in animation they do not change shape when force is applied to them. Objects such as a bouncing ball, or a pillow will change shape when a force is applied to them for example a rubber ball will flatten or squash against the floor when thrown against it and will stretch back up when it bounces off the floor.

In animation any thing that is alive will squash and stretch. Our muscles are constantly squashing and stretching with every movement that we make. Our feet squash and spread out when we put our body weight down on them. An animator could not make a person or an animal look real without deforming the shape of the object that has force acting upon it.

For an object to move convincingly, it must ‘give’ when external forces are applied to it. Factors that influence motion include gravity, directional force and the mass of the object, as well as the surfaces it comes into contact with. Take a bouncing ball as an example. As the ball hits the ground, gravitational force, which depends on the mass of the object, makes it come to blows with the surface, and this will cause the ball to squash. Obviously a softer ball will squash and stretch a lot, whereas a harder ball will hardly squash and stretch at all. But perhaps what you didn’t know is that the ball will also stretch slightly as it falls and rises. Stretching is kind of like the reflex action that comes before and after squashing.

The most important rule to Stretch and Squash is that no matter how squashed & stretch out a particular object gets, its volume remains constant. Consider the shape and volume of a half filled flour sack when dropped on the floor; it squashed out to its fullest shape. If it picked up, it stretched out to its longest shape. It never changes volume. 

Volumes and Mass are the understanding of the internal size of the character. Think of the character as a balloon filled with air. The surface of the balloon contains the air inside. When you press on the balloon, there is still the same amount of air inside. The place where you press compresses and another part of the balloon will expand. You need to think of your character the same way. They can stretch and squash or bend, but they can’t change their volume and mass, unless it’s for a reason dictated by the story.

Exaggerating squash and stretch can often add to the comedy value of your animations. Walt Disney discovered that exaggerating these real-life physical reactions made for much more effective animations. (think of the way Tigger moves when he bounces)

An Animator can also stretch an object that is moving fast to make its motion seem smoother. When animating a baseball that has been thrown fast if the ball were not stretched it would look like a strobe effect not a smooth motion. When the ball is drawn so that each image overlaps the motion looks smooth. (in real life a ball does not stretch, this is just one of the freedoms granted to an animator to help create the illusion of movement) This is mimicking motion blur.


Arcs depict the curved path of action an object should move in to look convincing. In nature life rarely moves in a straight line, but in a curve or an arc. Without arcs movements can look unnatural and mechanical. An arc always describes the visual path of action from one extreme to another. Arcs in nature are the most economical routes by which a form can move from one position to another. In animation, such arcs are used extensively, for they make animation much smoother and less stiff than a straight line for the path of action. In certain cases, an arc may resolve itself into a straight path, as for a failing object, but usually, even in a straight-line action, the object rotates.

When things move in nature they often don't follow a straight line instead they move in arcs. This is because there is rarely only one force acting on an object. When one force acts on an object it accelerates in line with the force but when two or more forces act upon an object the objects accelerates in multiple directions causing it to move in an arc.

The action of a hand gesture with a pointing finger follows a circular path. The animator charts the position of his drawings along an arc not straight lines. Try acting out the two paths below.

Your body is made up of a series of rotational joints, so when you move your body, it’s actually the result of your various limbs rotating around your joints. Because of this, our movements tend to follow arcs. Look at the following image and notice all the arcing movements including the jump itself.

Gravity also causes objects to move along Arcs. Take the example of the bouncing ball. If you throw it forward, it is also pushed down by gravity, making it move in an arc.


Anticipation is the one of the most important animation principles that plays a main role in bringing life to a character. We all know the meaning of the term Anticipation. In general we use the term to express a waiting of the next move. In animation terms anticipation means a character getting prepared to perform an action, it means that when a character anticipates, he is also in the process of gathering some energy to perform the next action.

An action occurs in three parts: the preparation for the action, the action itself, and the termination of the action. Anticipation is the preparation for the action. Anticipation is an effective tool for indicating what is about to happen.

An action can be divided into three phases: preparation for the action, the action itself, and termination. Anticipation is the preparation, and it tends to be the longest and most important part of an action. It helps set up what a character is about to do and directs attention to where the movement will take place, so that once the action happens the viewer will better understand what is going on. Anticipation in its most basic form is an action that takes place in the opposite direction of the main action. Some common examples are the wind-up for a pitch and the crouch before a jump.

Anticipation can also be created by changing the environment that surrounds an object. 

Every major action should have anticipation in some form. The greater the action, the longer and more exaggerated the anticipation should be. Several smaller actions may even be used in preparation of a larger one.

An animator must learn how to prepare the audience for an action. Applying anticipation serves this purpose. Anticipation always happens in the opposite direction to that of an action that follows after anticipation. You can notice characters in Tom & Jerry using extreme anticipation to engage into a powerful action, such as a sudden run, or hitting with an axe, or playing golf. One more factor that is incorporated in anticipation is exaggeration. This exaggeration and extreme anticipation followed by some thrilling action brings the character to life, thus helps animators in achieving the best character animation, which is appealing and enchanting to the viewers eye. Anticipation can be defined as an attempt by the character to generate some energy or a force to perform an action.

One of the tricks, which an animator has to learn, is how to attract the attention of the audience to the right part of the screen at the right moment. This is of great importance to prevent the audience missing some vital action and so the thread of the story. Although the audience is a group of individuals, the human brain works in a predictable way in these circumstances and it is possible to rely fairly confidently on reflex audience reaction. If there are a number of static objects on the screen with the attention equally divided between them and suddenly one of the objects moves, all eyes go to the moving object about a second later. Movement is in effect, a signal to attract attention.

Roadrunner is all about anticipation.

The amount of anticipation used considerably affects the speed of the action that follows it. If the audience can be led to expect something to happen then the action, when it does take place, can be very fast indeed without them losing the thread of what is going on. If the audience is not prepared for something that happens very quickly, they may miss it. In this case the action has to be slower.

This is a video of Marcel Marceau doing Youth, Maturity, Old Age and Death (1965), at the beginning a man stands up with a sign saying youth, maturity, old age and death, this is anticipation. It is informing the audience of what is going to happen which for this piece allows the audience enjoy his performance without having to guess what it is he's doing. We are doing the same in our animations informing the audience so they can enjoy the action.

In an extreme case, if the anticipation is properly done, the action itself needs only be suggested for the audience to accept it. For instance, if a character sees something off the screen, it is enough for him to draw back in preparation followed by perhaps one or two drawings to start the forward movement. A few dry brush speed lines or a puff of dust can then imply that he has gone. These lines or dust should be made to disperse fairly slowly probably in not less than twelve frames. (In this case feathers)

Paths of Action

What is a path of Action? The path of action is the trajectory of a moving object.

Try not to confuse the path of action with the line of action. Individual drawings have a line of action, which indicates the visual flow of action in that single drawing.

The path of action indicates the trajectory for a sequence of drawings in an animation.

There are four types of Path of Action Parabolic Arcs, Circular Arcs, Spiral Arcs and Complex motion.

Parabolic Arc

Circular Arc (Exponential Spacing)

Circular Arc (Pendulum Spacing)

Spiral Arc

Complex Motion


Staging includes composition, lighting, cameras, scene content, action, personality and mood. Ultimately, it all boils down to one thing: the readability and clear communication of an idea, regardless of what the medium is. As director Brad Bird once put it, "staging is staging, whether it be for animation or live action or computer films or a wedding photo." So staging is really everything - the entire image, what it communicates to you, and also the areas within the image that you want to direct attention to.

No one aspect of staging is more important than the others, they all work together. However, there are some that relate more directly to the mechanics that make animation work, and the one I'll focus on here is silhouette. The concept originates from some of the very earliest animations, such as Lotte Reinigers's The Adventures of Prince Achmed. In silhouette animation, the action had to be clear and easy to follow, or it would become unreadable and confusing. While these days there are no limits to the colour and form you can create in animation, keeping the silhouette readable still makes for much clearer action.

This includes the relationships of objects to everything else in the scene, so you'll need to consider the forms in the background of the shot, and ask yourself if they interfere with the action and make it less easy to understand. When you check the silhouette of your work it will quickly become obvious if the action is coming across well. If there are important actions that are indiscernible, it's a sure sign that you need to think about recomposing the shot or modifying the action to suit the current angle better.

Straight Ahead & Pose-to-Pose Animation

Straight ahead animation starts at the first drawing and works drawing to drawing to the end of a scene. You can lose size, volume, and proportions with this method, but it does have spontaneity and freshness. Fast, wild action scenes are done this way. Pose to Pose is more planned out and charted with key drawings done at intervals throughout the scene. Size, volumes, and proportions are controlled better this way, as is the action. The lead animator will turn charting and keys over to his assistant. An assistant can be better used with this method so that the animator doesn't have to draw every drawing in a scene. An animator can do more scenes this way and concentrate on the planning of the animation. Many scenes use a bit of both methods of animation.

Follow-Through & Overlapping Action

When the main body of the character stops all other parts continue to catch up to the main mass of the character, such as arms, long hair, clothing, coat tails or a dress, floppy ears or a long tail (these follow the path of action). Nothing stops all at once. This is follow through. Overlapping action is when the character changes direction while his clothes or hair continues forward. The character is going in a new direction, to be followed, a number of frames later, by his clothes in the new direction. "DRAG," in animation, for example, would be when Goofy starts to run, but his head, ears, upper body, and clothes do not keep up with his legs. In features, this type of action is done more subtly. Example: When Snow White starts to dance, her dress does not begin to move with her immediately but catches up a few frames later. Long hair and animal tail will also be handled in the same manner. Timing becomes critical to the effectiveness of drag and the overlapping action.

Secondary Action

This action adds to and enriches the main action and adds more dimension to the character animation, supplementing and/or re-enforcing the main action. Example: A character is angrily walking toward another character. The walk is forceful, aggressive, and forward leaning. The leg action is just short of a stomping walk. The secondary action is a few strong gestures of the arms working with the walk. Also, the possibility of dialogue being delivered at the same time with tilts and turns of the head to accentuate the walk and dialogue, but not so much as to distract from the walk action. All of these actions should work together in support of one another. Think of the walk as the primary action and arm swings, head bounce and all other actions of the body as secondary or supporting action.


Exaggeration is not extreme distortion of a drawing or extremely broad, violent action all the time. Its like a caricature of facial features, expressions, poses, attitudes and actions. Action traced from live action film can be accurate, but stiff and mechanical. In feature animation, a character must move more broadly to look natural. The same is true of facial expressions, but the action should not be as broad as in a short cartoon style. Exaggeration in a walk or an eye movement or even a head turn will give your film more appeal. Use good taste and common sense to keep from becoming too theatrical and excessively animated.


There are lots of tricks that animators constantly use to cut down the amount of work to be done. Cycles of repeating action are just one of these ways - and whenever animators find an opportunity to include a cycle in a sequence, you can bet they will seize upon it. 

Some of the very early cartoons were almost entirely based on cyclic actions, especially when it was discovered that animation could echo the rhythmic patterns found in music. Walt Disney’s 1928 ‘Steamboat Willie’ was the first sound cartoon to amaze audiences of the day with its close synchronism between image and sound. This relationship was exploited to the hilt, (giving rise to the term 'Mickey Mousing' - a sound track which follows exactly what the image is doing) as was the use of cyclic animation which took its cues from the repeated phases and beats of the musical score.

Cycles can be cyclic in nature, that is, the artwork is used in order 1,2,3,4 followed by exact repeats of that order again 1,2,3,4 etc. This type of cycle is useful for representing things like a wheel spinning. Cycles may also oscillate. That is the artwork is used in order 1,2,3,4 but then the artwork is used in reverse order 4,3,2,1 to return to the start position again etc - like the motion of a clock pendulum. Or indeed cycles can be random, 1,4,3,1,2,4,3,1,2, etc - to mimic a flag fluttering wildly in a stiff breeze. Using the technique of cycle animation, it is possible for the animator to reuse such a sequence of drawings over and over again to build up screen time without any additional effort. Some cycles may consist of only two drawings, while others may be involve several tens of complex actions.

Extra information

Quick history of animation doc

Check out Bill Tytla - more info here

Animation by Bill Tytla of the character Stromboli from "Pinocchio".

Great animation documentary;

part three can be found here - part three

Good tutorial about keyframes in after effects
(may help your pool table animations)