Chapter 5 (Week 7 & Week 8):

Animation

SKM2300
INTRODUCTION TO MULTIMEDIA
1
 Overview
Introduction
Principles of animation
Animation process
Animation techniques
Animation file formats
Making animation that works

Based on material from:

Vaughan, T. (2014). Multimedia: Making it Work (9th Edition). New York: McGraw-Hill

2
 Learning Outcomes
Explain the use of animation in multimedia application.

Distinguish between computer animation and traditional

animation techniques.

3
 Introduction
Animation can be defined as :
A simulation of movement created by displaying a series
of pictures or frames.
An object actually moving across or into or out of the
screen.
Makes static presentations come alive.

4
 Introduction (cont.)
The simplest animation is 2D.

More complicated is an intermediate 2.5D.

The most realistic animations occur in 3D space.

5
 Introduction (cont.)
Usage of animation in Multimedia:
Artistic purposes Commercialization.
Storytelling cartoon.
Displaying data scientific visualization.
Instructional purposes, example playing guitar, lab
manual, etc.

6
 Introduction (cont.)
Visual effects vs. animation:

Visual effects Animation

Related to wipes, fades, Related to an objects that
zoom and dissolves are actually moving across
or into or out of the
screen
Example: Example:
Slide image onto screen A spinning globe of our
with a wipe earth

7
 Principles
12 Basic of Animation
principles of animation
Biological phenomenon known as persistence of vision.

An object seen by the human eye remains mapped on the retina

for a brief time after viewing, causes the visual illusion of
movement when images change slightly and rapidly.

TV video builds 30 entire frames or pictures every seconds.

Movies on film are shot at a rate of 24 frames per second and

replayed at 48 frames per second (reduce motion blur and
flicker).

8
 Principles of Animation (cont.)
12 basic principles of animation
1. Timing
The speed of an action gives meaning to movement, both
physical and emotional meaning.
The animator must spend the appropriate amount of time on
the action and reaction to the action.
If too much time is spent, then the viewer may lose attention,
if too little then the viewer may not notice or understand the
action.

9
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
2. Secondary actions
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.

Only to support the main action, not

detract from it.

Example: A man walking down the road

might have a secondary action of his
arms swinging or him whistling.
10
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
3. Follow through and overlapping action
Follow through: When the main body of the character
stops, all other parts will continue to catch up to the main
mass of the character, such as arms, long hair, clothing.
Nothing stops all at once.

Example: A figure of a man stopping abruptly from a

walking movement, his arms will continue to travel after
the torso has stopped.

11
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
3. Follow through and overlapping action
Overlapping: When the character
changes direction while his clothes or
hair continues forward. The character is
going in a new direction, to be followed
by a number of frames later by his
clothes in the new direction.

12
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
4. Straight ahead action and pose-to-pose action
Straight ahead action in hand drawn animation is when
the animator starts at the first drawing in a scene and then
draws all of the subsequent frames until he reaches the
end of the scenes.

Pose-to-pose is when the animator carefully plans out the

animation, draws a sequence of poses, i.e. the initial, some
in-between and the final poses and then draws all the in-
between frames.

13
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
5. Staging
Direct the audiences attention and make clear that which
is of greatest importance in a scene.
Staging is achieved by character positioning, lighting,
shadows, and the camera angle and position used.

14
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
6. Appeal
Appeal in a cartoon character corresponds to what would
be called charisma in an actor.
Important to make the viewer feel as though the drawn
character is real and interesting.

15
 Principles of Animation (cont.)

12 basic principles of animation (cont.)

7. Solid drawing
The drawer has to have a good grasp
of the basics of animation, anatomy,
composition, weight, balance, and
light to give the characters the illusion
of three dimensional life.

16
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
8. Slow In and Out
As action starts, the movement of the
object needs time to accelerate and slow
down.
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/realistic.
E.g. characters between two extreme
poses, such as the movement of the ball.
17
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
9. Arcs
All actions, with few exceptions
(such as the animation or a
mechanical device), follow an arc or
slightly circular path.

This is especially true of the human

figure and the action of animals.

Arcs give animation a more natural

action and better flow.

18
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
10. Squash and Stretch
Gives the drawn character or object a sense of weight and
flexibility.
This prepares the audience for the action that is about to
happen.
For example the ball should stretch as it falls, squash when
it collides with the floor.

19
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
11. Anticipation
Is used to prepare the audience for an action, and to make
the action appear more realistic.

A dancer jumping off the floor has to bend his knees first.
A backwards motion occurs before the forward action is
executed. The backward motion is the anticipation.

20
 Principles of Animation (cont.)
12 basic principles of animation (cont.)
12. Exaggeration
Exaggeration is an effect especially useful for animation in
order to produce great results which audience will
understand.

E.g. If the character is sad, make him sadder.

21
 Animation Process
Steps to be followed in creating animation:

Organize the execution in a series of logical steps

(example: storyboard).

Choose an animation tool best suited for the job.

22
 Animation Process (cont.)
Steps to be followed in creating animation (cont.):

Build and tweak the sequences by creating objects,

planning their movement, texturing their surfaces, adding
lights, experimenting with lighting effects, and positioning
the camera or point of view.

Post-process the completed animation (example:

Delivering & packaging).

23
 Animation Process (cont.)
Animation process for Monster Inc.
1) Planning
- a story idea is pitched

2) The text treatment is written

- short document that summarizes
the main idea of the story

3) Storyboards are drawn

- hand-drawn comic book version of
the movie
24
 Animation Process (cont.)
4) Voice talent recording

5) Editorial begins making reels

- A reel is a videotape that allows the
cleaned-up storyboard sequence to
stand alone

6) The art department creates the look

and feel
25
 Animation Process (cont.)
7) Models are sculpted and articulated
(3D in the computer)

8) The sets are dressed

- The sets are built in 3D and dressed
with props (chairs, curtains & toys)

9) The shots are laid out (capture emotion

& story of each scene)
26
 Animation Process (cont.)
10) The shot is animated

11) Sets and characters are shaded

12) Lighting completes the look

27
 Animation Process (cont.)
13) The computer data is rendered
- Translating all of the information in
the files that make up the shot-sets,
colours, movements etc

14) Final touch added (special effects)

28
 Storyboard
Storyboard

Graphic organizers such as a

series of illustrations or images
displayed in sequence for the
purpose of pre-visualizing a
motion picture, animation, motion
graphic or interactive media
sequence, including website
interactivity.

29
 Storyboard
Storyboard
Characters
Basic story line
Shots WS, MS, CU, ECU, CA, OSS
Effects
Camera Movements pan, dolly,
pedestal, zoom, tilt, arc
Camera view

30
 Animation Techniques
Traditional: Cel Animation
A technique in which a series of progressively different
graphics are used on each frame of movie film.

Made famous by Disney.

The term "cel" is derived from the clear celluloid sheets that
were used for drawing each frame (replaced with acetate or
plastic).
( 24 frames/sec. * 60 sec/min) = 1440 separate frames
needed to produce one minute of a movie.
31
 Animation
Animation Techniques
Techniques (cont.)
Traditional: Cel Animation (cont.)

Cel animation begins with keyframes, which refer to the first

and the last frame of an action.

The frames in between the keyframes are drawn in the

tweening process. Tweening depicts the action that takes
place between keyframes.

Tweening is followed by the pencil test to check the

smoothness, continuity and timing.
32
 Animation
Animation Techniques
Techniques (cont.)
Traditional: Cel Animation (cont.)
Not in use by the beginning of the 21st century. Today,
animators' drawings and the backgrounds are either scanned
into or drawn directly into a computer system.

Some animation producers have used the term "tradigital" to

describe cel animation which makes extensive use of
computer technology.

33
 Animation
Animation Techniques
Techniques (cont.)
Stop-motion Animation
Animation created by physically manipulating real-world
objects and photographing them one frame of film at a time
to create the illusion of movement.

Example puppet animation, clay animation, cutout animation

(moving two-dimensional pieces of material such as paper or
cloth), etc.

34
 Animation Techniques (cont.)
Computer Animation
Employ the same logic and procedural concept as cel
animation.
2D and 3D.
Use the vocabulary of classic cel
animation terms:
Layer, keyframe, and tweening.
The primary difference is in how much must be drawn by the
animator and how much is automatically generated by the
software.

35
 Animation Techniques (cont.)
Computer Animation (cont.)
Kinematics the study of the movement and motion of
structures that have joints.

Inverse kinematics is the process of linking objects, and

defining their relationship and limits.

Human motion and inverse

kinematics: move an arm, and
the shoulders follow

36
 Animation
Animation Techniques
Techniques (cont.)
Computer Animation (cont.)

37
 Animation Techniques (cont.)
Computer Animation (cont.)
Morphing an effect in which a still or moving image is
transformed into another

38
 Animation File Formats
GIF89a:
version of the GIF image format.

Allows multiple images to be put into a single file and then

be displayed as an animation in the Web Browser.

Applications like BoxTop Softwares GIFmation or ULeads

GIF Animator are needed to create GIF89a animation.

39
 Animation File Formats (cont.)
Some file formats are designed specifically to contain
animations such as:
Director (.dir and .dcr)
AnimatorPro(.fli and .flc)
3D studio Max (.max)
GIF89a (.gif)
Flash (.fla and .swf)

40
 Animation File Formats (cont.)
In some cases especially in 3D animations, the individual
rendered frames as an animation are put together into one of
the standard digital file container such as:
Windows Audio Video Interleaved format (.avi)
QuickTime(.qt, .mov)
Motion Picture Experts Group video (.mpeg)

41
 Making animation that works
Use animation carefully and sparingly.

High quality animations require superior display platforms

and hardware, as well as raw computing horsepower.

File compression is very important when preparing animation

files for the Web (size matters).

42
Making animation that works (cont.)
Multimedia authoring systems typically provide tools to
simplify creating animations within that authoring system.

Some animation tools are:

Macromedia Flash MX
Alias|Wavefront's Maya
NewTek's Lightwave

43
 Summary
Animation is visual change over time and adds great
power to multimedia.

Cel animation uses a series of progressively different

graphics on each frame of movie film.

Computer animation has eased the process of creating

animation.

Many file formats are designed specifically to contain

animation.
44