Survey of animation principles

  1. Squash and Stretch
  2. Definition: The distortion of the object to depict the speed at which it is moving is called 'stretch'. Stretch is also used to show the distortion shown while the object is expanding, lengthening or widening. The distortion caused by the contact/impact/collision with another object is called as 'squash'.

Every object (made up of any material) changes its shape at the time when it collides with other object. This phenomenon is so subtle, that it is not visible to the naked eye for the harder materials like metals, wood, etc. It can be in cases of objects like ballon, rubber ball, soap bubbles etc. Animators from Disney studios created comic gags by exaggerating this phenomenon.

Squash and stretch principle is used to show distortion of the object's shape during an action [1]. This principle is used extensively for exaggerating the depiction of the material of the object and the force/s acting on it.It is often used to create a comic relief by distorting it beyond the natural distortion levels

1.2.Example in cell animation: A ball bounce animation of a rubber ball: The ball A is shown with uniform shape in all the positions (frames) of the ball. This will display a uniform shape animation of the ball.

This means, even though the ball is moving at different speeds, or hits the ground, the shape of the ball is unchanged. This makes it rather difficult to believe that this is a rubber ball..it actually feels like a metal/wood ball (which won't distort while in motion or at the point of impact).

Ball B starts from the initial position, and while coming down it is shown elongated (stretched) at the positions where it is in particular speed. At the position of impact, the ball is shown distorted again owing to the collision with a hard surface. Combination of stretch and squash (which is shown as a subtle distortion), makes the viewer get the 'rubbery' feeling of the ball. It also tells about the surface it was hit upon (like concrete, wood, stone..etc basically a hard surface for sure).

1.3.Why is it used? Underlying reasons.

Ex: This principle helps achieve goal Y

This principle helps the animator to amplify attributes of the object/s like:

  • Speed and motion. Ex: faster speed of the object denoted by elongated shape

Note: the elongation happens parallel to the direction of the motion

  • Particular behaviour of the object based of the material it is made of. Ex: Soft material, hard material, etc. Rubber/sponge ball changing its shape more frequently, as compared to plastic/iron ball.
  • Distortion at the time of a collision with other object's. Ex: Rubber ball flattens against the brick wall at the time of collision.

Note: This again is mostly parallel to the object of impact. Rubber ball flattens up against the wall and elongates parallel to the wall.

1.4.Consequence of applying the principle. Ex: If X principle is used result Z occurs

If this principle is applied then it is easy for the viewers to understand/believe about the following aspects regarding the object:

  • Material which is used to make the object.
  • Some additional information about the material used to make the objects near the main object/the objects interacting with the main object. Ex: The ground made up of concrete, and not of stretched rubber/sand.
  • Various forces affecting movement of the object. Ex: Ball has been dropped from a height of 3 feet or 35 feet. Whether it is dropped or thrown.

1.5.If X principle is not used, negative results may occur

If the principle of stretch and squash is not used, then:

The viewer may have trouble in getting the feeling about the material used for the object. The motion shown onscreen (without stretch and squash) may lead to a conclusion that the ball is made up of wood/plastic.

1.6.Does this apply to LOs? Yes/No/After modification

With some modifications

1.7.Rationale for above claim/belief

This principle is based on exaggeration and distortion of the objects. This principle is not useful in LO creation because, in the entertainment domain, it is used in exaggerated manner which is not the case in LO animation. The objects in the LOs are planned for a specific cause of depicting scientifically/technicallycorrect information. Distorting (stretching/squashing) of the imagery is not useful in LOs, as it would present the scientific facts in a distorted manner.

1.8.Illustrative example in LO context:

1.8.1.Drilling operation LO:

As shown in the image, the drill hits the various layers of the earth and creates a tunnel.If the drill is shown squashed at the time of impact, then the it would be difficult for the viewers to believe that the drilling machine is made up of a harder metal as compared to the different earth crusts.

1.8.2.Superconductivity

In this LO, the atoms are shown colliding with each other and forming bonds. If they stretch while in motion, it can be thought as if they are getting elongated owing to the temperature, and this is incorrect.

1.9.If this principle applies in LOs:

1.10.What is the adaptation required?

1.11.Why not use directly?

1.12.What is the new definition?

  1. Timing:

Principle of Timing in animation helps the user to determine the weight/mass of the object. It also helps the viewer to understand the emotions of the character.

2.1.Definition: Spacing of the frames to depict the time taken for the actions. This space is created using frames. More frames used for the action would show slow movement and fewer frames used would show a fast movement. It is the number of frames which are used by the animator to define the weight and size of objects and the personality of characters [2].

Even though the extremes are the same, the number of inbetweens can determine the emotions depicted. For example two extremes one of the face on right side of the frame and the other extreme with the face on the right can be having two completely different meanings

1. One inbetween: The face is slapped, and the reaction is shown

2. Five inbetweens: The character is denying the fact by shaking the head

3. Nine inbetweens: The character is having a look at the panorama in the front of him

2.2.Example in cell animation:

2.2.1.Slow movement: (Elephant walk) More inbetweens between the key frames. Elephant walks very slowly. It also has weight shift from one leg to other. This phenomenon can be shown using a lot of inbetweenings. Figure 2.1: Elephant

2.2.2.Fast movement: (Butterfly) Less inbetweens between the key frames. Butterfly has very fast motion where the flipping of the wings happens in a fraction of a second (some frames actually). It also moves very fast from one place to other, as compared to the elephant.Figure 2.2: Butterfly

2.3.Why is it used? Underlying reasons. Ex: Principle X helps achieve goal Y

Timing helps in achieving two main effects on the screen, determining the scale (size and weight) and the speed of the object. More number of frames between the two extremes make the object look heavier on screen, as the movement is slower. The objects shown with less number of frames between the extremes would seem to be lighter on screen. These objects would also be seen faster on screen.

2.4.Consequence of applying the principle. Ex: If X principle is used result Z occurs

The application of timing principle results in successful depiction of a few important attributes of a character like size, scale and weight. But the most important of all is the emotion of the character, which is shown by varying the inbetween frames of the animation.

2.5.If X principle is not used, negative results may occur

If the principle of timing is not used..the objects/characters may not depict their characteristics in terms of size, scale, speed etc. It can also hamper the depiction of the emotions of the character. Ex: If the timing is not used then the character which is to depict a pensive mood may look happy..!

2.6.Does this apply to LOs? Yes/No/After modificationYes

2.7.Rationale for above claim/belief

This principle should be used in eLearning at least for its advantage of depicting the scale, size and the speed of the objects.

There may not be instances in LOs where there are living characters so the ability of this principle to depict the emotions of the characters may not be useful.

2.8.Illustrative example in LO context

Superconductivity: In this LO, the animation of the electrons is to be shown. These electrons have to move at a stipulated speed. By using the principle of timing, the animator of the Lo can space out the frames of the animation is such a manner that the expected motion can be achieved. Ex. Slow moving electrons: More inbetweens, fast moving electrons: less inbetweens.

2.9.If this principle applies in LOs:

2.10.What is the adaptation required?

No adaptation required. The principle suggests that for depicting slower actions use more inbetweens, and for faster actions need less. Using this principle, the animation can be created in the best possible manner to suit the required effect. The variant of this principle can also be used where 'slow motion' is required for explaining the fact in a better way.

2.11.Why not use directly?

2.12.What is the new definition?

  1. Anticipation:

3.1 Definition:Anticipation of the action is the preparation for the main action. It is based on the contraction-expansion phenomenon, where before expansion, contraction would happen.

3.2 Example in cell animation:

In traditional cell animation, this principle is used extensively. The action can be divided in 3 stages. These are: thepreparation, actual action, and the aftermath of the action. In traditional cell animation, all the three stages are used effectively. We will discuss the latter ones in the subsequent sections. In this section we concentrate on 'Anticipation' which is used to show the preparation stage of the action.

Anticipation has two parts...first part is the decision of what part of the object moves, and in which direction. The second part decides about the quantum of movement...how much does it move. Typically, the part one is straight forward and easy to plan. The second part depends on few aspects like: type of character being animated, situation in which the character is going to perform the action, location of the action, the relevance based on the previous and the next shot etc.

In the example below, the action which a comic character has to perform is to go to the right side of the screen. The requirement of the action is that it is a fast action as this is start of a chase. So the actual animation would be having less number of frames (Refer: Section on Timing). In the example the animator shows the character lifting his foot to the left, slowly enough for the audience to see it and also has a hold for a couple of frames. Once this preparation is shown, the audience is well prepared to witness the actual action, which is very logical to expect. The character (after broadcasting, which he is going to go offstage soon) goes out screen in merely 5-6 frames. This action gets it much deserving response not on the basis of the 5-6 frames of the action, but the 25-40 frames of the anticipation which was shown prior to the action.

Illustration 1 showing character standing

Illustration 2 showing character lifting its foot to the left

Illustration 3 showing character going off screen to the right

3.3 Why is it used? What are the underlying reasons? Ex: Principle X helps achieve goal Y

Anticipation is used to enhance/highlight the main action and the aftermath of the action. Every action especially in the traditional cell animation are created (mostly) with less dialogues. In this situation, it becomes important to communicate the intentions of the character to the audience. Anticipation does that.

It also creates a expectation in the audience's minds about the 'intensity' of the action to follow. This makes the animation of the actual action more easy.

3.4 Consequence of applying the principle. Ex: If X principle is used result Z occurs

As a consequence of applying the anticipation principle in the animation, the effect of the actual action is enhanced. It also prepares the audience to see / enjoy the (actual) action which is following the anticipation.

3.5 If X principle is not used, negative results may occur

If the anticipation is not used the communication expected from the action will be loosing its importance. Going back to the example mentioned above...the actual action of moving fast out (right side) of the screen may not be looking 'fast' enough. In sequences of chase, fights etc. where a lot of shots are packed in a sequence. Avoiding anticipation in these types of sequences, may fail to communicate the mood of the sequence. Each action (minus anticipation) would be merely 10-12 frames..where the audience will not be able to register what is happening on the screen. Further the actions may look unnatural.

3.6 Does this apply to LOs? Yes/No/After modification

Yes (But only the first part)

3.7 Rationale for above claim/belief

Using anticipation in LO creation would be required to make the actions in the LO animations look natural. It is also important not to use it as it is used in the traditional animation, as the 'exaggeration' may be a deterrent factor while depicting the scientific concepts in LOs Refer: the section about exaggeration for more details)

3.8 Illustrative example in LO context

Going ahead with the rationale given above, two examples are given below to substantiate the decision of considering the principle of anticipation for the LO creation process.

Example 1: Throwing of a ball in the air: This will look natural with some amount of anticipation shown in the animation where the ball moves slightly in the opposite direction prior to the actual action.

Example 2: Car on the road: In this animation if the car is to be shown starting from rest, then it should not go back before moving ahead. This would look unrealistic.

3.9 If this principle applies in LOs:

3.9.1 What is the adaptation required?

Execution of this principle has two parts:

The first part is the theoretical part where it is decided that for every action the anticipation is usually shown in the opposite direction.

The second part is the actual rendering of this, where (in traditional animation) exaggeration plays an important role.

While considering this principle for LO creation, we suggest that the theory can be adopted as it is, but careful thought should be given to the exaggeration part.

3.9.2Why not use directly?

In the execution part it is important to avoid exaggeration, as it may lead in depicting unrealistic imagery.

What is the new definition?

  1. Staging
  2. Definition: Staging is presenting the stages of the action in the shot so that it is unmistakably clear.

4.2.How this principle does help in animation domain?

Using this principle helps in bridging the communication gap between the script writer -to-> scene planner (who is also the chief animator) -to-> actual animator or the inbetweener [Refer to the Definitions]. The details of the idea have to be communicated from the writing table to the scene planning table and then finally to the animation table.

4.3.How is this principle implemented in animation domain?

The script and the story board frames of the shot is made early on. As the script writers are not expected to draw they rely mostly on words, and explain the details of the action using words. The chief animator refers the script, and creates the details of the characters actions on the screen for that particular shot by creating an image. It is usually achieved by describing the details by drawing a series of frames. These drawings are mainly the ones where there is a changeover in terms of the action, dialogue, size, shape, etc. The chief animator also uses text to add up to the description of the concept.

The scene planner/animator explains the details from the words written and translates them in to a single frame where the action is explained with the details and is mapped to the frame number of the animation. It is important to draw ALL the actions in the same frame so that the animator can see the the entire action at a glance.

This staging then goes to the actual animation phase where animator simply refers to it, reads the instructions, and creates the animation which is based on the timeline as suggested by the scene planner. The annotations for the lip movement (for the alphabets) and gestures expressions (for the words) marked help the animator in creating the animation.

4.4.Example in cell animation: As seen in the images given, the scene planner has given a complete detail of the action in a shot. Following points are detailed out here:

a. The first and the last frame in the staging have the start and the end position of the character. (See the rabbit’s frames 279 and 298)

b. Important change over (about the gesture/action/even the dialog are marked along with the frame numbers. See the frame numbers written above the drawing. Also look at the overall instructions written for the animator to follow. (See the rabbits frame number 296 shown explicitly to convey the gesture in it)