Introduction to Multimedia
Lecture #8
Animation
Instructors:
Mohamed MAGANGA
Today’s Agenda
4 Lectures Left
•Video (2)
•Sound (1)
•Review (1)
1.
2.
3.
Announcements
Warm Up
Today’s Lecture
 Lecture #7 (finish history)


Lect # 8: Animation
Lect 9: Video part 1 (hopefully start)
Overview of Today’s Topics







Announcements
What is animation?
Types of animation
File types of animation
Using Flash to build your animation and animation
terminology
History of animation
Review
Announcements



Student needing notes, please help out 
Assignment 2s should all be marked by now. You
have two weeks to complain about your mark.
Assignment 3 (due Friday, March 19)
Assignment 4 (due Wednesday April 7)



They will take you longer than you think, give yourself
LOTS of time to do them.
Check that your P: drive works!
Final Exam: Wednesday April 14 2:00 PM
Location: Thames Hall Gym



2 hour exam
All multiple choice questions
About 150 questions
Announcements
Final Exam  Note: you must get a
weighted average of at least 45% on
the final exam and major assignment
http://www.csd.uwo.ca/courses/CS
1033/
And go to Course Outline
Note that weighted average
= (total of weighted marks / sum of weights) and weighted mark
= (weight * mark)
For example, if you received
60% on the final exam (weighted at 40 % of your final mark)
80% on the major assignment (weighted at 20% of your final mark),
Your weighted average would be ((60*.4)+(80*.2)) / (0.4+0.2) = (24+16) /
0.6 = 40/0.6 = 66% WHICH IS ABOVE THE REQUIRED 45% TO PASS.
NOTE though, if you did not hand in the major project and received
50% on the final exam, your weighted mark would be 33% and you would
NOT pass the course, even if your overall grade for your labs, assignments
and final exam was greater than 50%.
Warm up Questions:






Question: What is the PageRank algorithm?
Question: Name the most popular search
directory web site?
Question: Name the most popular search engine
website? What % of the market does it currently
have?
Question: What are the 3 components you must
address to get your page a higher ranking?
Question: Who started Yahoo, who started
Google?
Question: Name one search tool that predates
Google and Yahoo
Warm Up Questions
If you want a table in your webpage to automatically resize as the
user resizes the window, then you should define it in terms of
pixels not percentages
a) True
b) False
Which of the following is the most important in
terms of getting your website ranked highly in
Google.
a)
b)
c)
d)
A domain name with good keywords in it
The number of links from your page to other pages
The number of links from other pages to your page
Having good keywords in the title
e) Have good meta tag keywords.
Today’s Agenda
1.
2.
3.
4.
5.
6.
Introduction to Animation
What is Animation
Types of Animation
File Types of animation
Using Flash to build you
animation
Animation terminology
3D Animation, Morphing, Tweening, Onion
Skinning etc.
7.
8.
9.
10.
Animated GIFs
History of Animation
Animation in Movies
LOTS OF VIDEOS TODAY 
Sit back and enjoy
Intro to Animation

What is animation?



A drawing that moves, bringing the drawing
to “life”
A _________________that create the illusion
of movement when played in succession.
Animation is a powerful tool capable of
communicating complex ideas
How the heart beats http://www.smm.org/heart/heart/top.html

Easier to show somebody how something works then
to try and explain it
http://www.youtube.com/watch?v=8SBfN9ltF8c
Why use animation?

Easier to show somebody how something
works then to try and explain it.
Why Use Animation?
 Indicates ______________

Illustrates ____________

Visualizes ______________ objects

Attracts attention
Four Stroke Engine
Intro to Animation




Simulation of movement through a series of
pictures that have objects in slightly
different positions
Animation is a _______________
Each drawing is called a “frame”
(a snapshot of what’s happening at a
particular moment)
Required Frames Per Second FPS:
Facts:
•Movies on film - 24 fps
•TV – 30 fps
9000 frames for five
minute cartoon
•Computer animation
_______________
•“jerky” anything less
Intro to Animation



In animation, each frame overlaps
the previous one
Movement is caused by rapidly
displaying each frame in
sequence.
creates the illusion of a moving
object
http://animationarchive.net/Behind%20the%20Scenes/Animation%20Basics
Sampling and Quantizing of Motion

Since each frame is just an image 

Sampling process – process of collecting
information pieces from a general population
Each image consists of pixels
We know that


Remember:
 10 pixels by 10 pixels vs 200 pixels by 200 pixels

More samples means better quality

More samples means bigger file sizes
Question: What else can we “Sample”
with MOTION?
Frame Rate (Frames Per Second
FPS)

Frame Rate: indicates the playback speed
of the animation in frames per second
 Low frame rate appears choppy
Question: BUT high frame rate can also
appear choppy, WHY?
 Answer: if the computer playing the
animation is not fast enough to process
and display the frames.

Types of Animation
Two types of animation exist:
•2-D animation
•Cel animation
•Path animation
•3-D animation
2-D Animation  Cel-Based

“Cel” (__________) – clear sheet material on which
images were drawn by movie animators

(also called traditional animation, classical animation, hand-drawn
animation, frame by frame animation)

Celluloid images placed on a __________ background.
Background remains ___________
Object changes from frame to frame
Ex. Toonz software



Gaits of the Horse, by E. Muybridge (1834-1904)
A brief history of the first animated full length feature
Charlie Brown
Cel Animation

An animator must ___________every
single frame!
To simplify:
 one background is drawn and
 _______________ is drawn on a
clear sheet of plastic (a cel), one
drawing for each frame.
 When moving to the next scene, just
change the background
 http://www.youtube.com/watch?v=jb
hCUPwSrp0&feature=player_embed
ded
Cel Animation


Question: What was the first full length cel
based animated movie?
Hints:





Debuted in 1937
Over 350,000 frames
Over 1,500,000 pen and ink drawings
Stars seven rather short guys and one pasty brunette
Other examples:

Charlie Brown
Path Based Animation

Pick:




a starting point for an object, (_________)
an ending point for an object (_________)
__________ for the object to follow
And then the computer generated all the frames in between
called _________________
- the artist doesn’t have to draw the intermediate frames (like the
artist did in cel based animation)
Path ends
here
Motion Path
Motion
Path begins
here
Path Based Animation




Question: What name do we give to the start frame
and the end frame? (not the frames that are
computer generated, rather the frames drawn by
us?)
Question: Why is the act of generating the frames in
between the first frame and the last frame called
tweening?
Question: The path the object follows have to be a
straight line, TRUE or FALSE?
Question: What software allows us to do path based
animation?
2-D Animation  Path-Based

Animation Software Features



_____________: speed of the animation
_____________:special effects  fade-ins, fade-outs
_____________:allows the user to pick how many times
the animation repeats

_____________:playback, how many times to
run animation


_____________:plays continuously until user stops it
Setting the Frames Per Second
Question: What does a bigger FPS imply?
Larger file size
More realistic motion
What can we do
to change the motion?

If the animation appears too slow, we can
speed up the motion by:
 Reduce the ______________
 Increase the ______________
Slowing down the motion
by adding more frames

Assume now that the motion is a bit too fast, 2 ways to
slow it down:

Way 1: Add more frames:
Keep the frame rate the same
 Increase the number of frames between the keyframes to
stretch out the animation


Way 2: Lower the frame rate (go from 20fps to 5fps)


Keep the same number of frames as original but stretches
out movie
Let’s See: Original Clip has 5 frames, at 20 fps, so
finishes playing at 0.2 seconds, too fast!
Way 1: still have 20 fps, but add in extra frames between,
now have 20 frames
 Way 2: holds frame on screen for 0.2 seconds, then moves
to frame 2, on screen for 0.2 second, etc….


Question: What is wrong with Way 2?
From the text book: Digital Media Primer by Yue-Ling Wong
Animation  Some Terminology



Keyframe
Tweening
Onion Skinning
Animation – Some Terminology
Keyframe Animation:
Animating a graphical object by creating smooth
transitions between various keyframes, the frames that
indicate the _____________________of an object's
motion path.
http://en.wikipedia.org/wiki/Key_frame
Tweening:
Short for in-betweening, the process of generating
____________________________to give the
appearance that the first image evolves smoothly into
the second image.
Tweening
– more
Animation – Some Terminology
Onion skinning
is a 2D computer graphics term for a
technique used in creating animated
cartoons and editing movies to see
________________ at once
Purpose: the animator or editor can make
decisions on how to create or change an
image based on the previous image in the
sequence.
Great little tutorial – take a look at it!
http://www.mystery-productions.com/flash/onionskinning.html
3-D Animation – Process

3-Dimensional
animation
involves 3 steps:
 Modelling
 Animating
 Rendering
3-D Animation - Process
•
Modelling:
• ______________________
• Process of creating broad contours and
structure of 3D objects and scenes
(draw views – top, side,
cross section
•
Animating:
• Process of defining _____________
• Defining lighting and perspective views
to create change during animation
•
Rendering:
• Give _________________
color, surface textures, amounts of
transparency
Sample Demo
This is a website where all
the images are created by
ray tracing and computers,
yet they look amazingly real
(Check out the Hall of Fame):
http://hof.povray.org/
Animation  Some Special Effects

Morphing:

Process of
_________________
into a series of
images

Useful for showing how
image might change
over time
Famous Faces:
http://www.youtube.com
/watch?v=wZurRt0TidI
&NR=1
http://www.youtube.com
/watch?v=h7bfCkqUuX8
&NR=1
Animation  Some Special Effects

Morphing:

More examples
Animation  Some Special Effects

Warping:
 Distorts a
______________

Warp frown into smile
http://www.cise.ufl.edu/~anand/student
s/chui/img/eg_face_warp_anim.gif
Animation  Some Special Effects
Virtual Reality: (VR)




Creates environment where user becomes part of the experience
Boeing: flight simulators of airplane cockpits (hydraulic
controlled on legs)
CD based adventure games – point and go thru doors, stairs
Hand-held equipment allows person to interact with environment
A 2D cockpit for a
Boeing 737. Some
gauges are retained
from the default MSFS
737, while others are
modernized. Some
non-functional controls
are included in the
dashboard.
Animated GIFS

For simple animations use .GIF format

Special type of GIF file known as an animated
GIF/GIF89a that provides the animation you need.

Animated GIFs are formally called
multi-block GIFs

A series (blocks) of still GIF images within
_______________GIF file.

When the GIF document is viewed, the multiple
images display, quickly and in succession, and
produce a streaming animation
world_tsunami.gif
(contains a sequence of
frames in the file)
monkeypoo.gif
(contains by Laura’s sister
in Photoshop!)
Animated GIF files - continued

Characteristics of an Animated GIF:

File size is affected by:


the number of colors
amount of noise in the frames (just like other GIF
files)
Plug-in: A program

Only _________ colors

No ___________ Required: Animated GIFs
require no plug-ins, and the authoring tools to create
them are often free and easy to learn.

No Sound: If you need sound in addition to
motion, you cannot use an animated GIF by itself.
Instead, you may want to consider other animation
alternatives, such as Flash, or even video
that permits web
browser to access
and execute files
that the browser
would not normally
recognize. Flash
uses Shockwave
Using Photoshop to make an
animated gif
Sources of Animation


Animation clip art websites available on Internet for free or at cost:
http://www.animation-central.com/misc.htm
The ones for a cost are more professional and creative

Create each image that corresponds to a frame using a draw or
paint program

Create animations with software (Photoshop, Flash)
Multimedia authoring programs like Macromedia Director allow
you to easily create path animations

Other Animation File Types

Animated Gifs (.gif) (universal)

Flash (.fla, .swf) (by Adobe)

Macromedia Director

Sophisticated Animations:

Strata 3D, LightWave, 3D Studio Max, Maya, and
Houdini
Animation File Types
Flash Software
•
Flash uses the .FLA file extension for source files
Animation is
choreographed
• .SWF extension for the Flash movie that is created and played.
using one or
more
• .swf originally meant “Shockwave Flash” but now “Small Web Format”
sequential
• Animation
is choreographed using one or more sequential
timelines
in
timelines
which
actions in which actions and interactions are defined
and
interactions
are defined
Animation Software

Flash Professional CS3–?
 A multimedia authoring and playback system

Launched in 1996 by Macromedia/ Adobe bought in 2005

Flash became popular for its animated graphics

Responsible for much of the animations, advertisements
and video components found on today's Web sites

Flash is the industry's most advanced authoring
environment for creating interactive websites, digital experiences and
mobile content.
Cool Websites that use Flash:
http://www.zapiram.es/
http://www.pablogaribay.com/
Animation Software
Why Is Flash So Popular?




Professional designs
Interactive content rich with video, graphics, animation
Import multimedia elements from other applications
Support _____________ graphics:




much more space efficient over bitmapped frames
scale up with accurate detail no matter how large the window is
resized by the user.
Flash Player is a __________________ that works with
popular Web browsers to play the animation
Adobe Flash Player is the standard for delivering highimpact, rich Web content. Designs, animation, and
application user interfaces are deployed immediately
across all browsers and platforms
.swf originally meant “Shockwave Flash” but now “Small Web Format”
Animation Software
Animated GIF Flash
Director
Created by
Depends
Flash
Director
Extension
Source depends
.gif (movie)
.fla (source)
.swf (movie)
.dir (source)
.dcr (movie)
Size
Larger than
normal gif
Vector images take up
less space than GIF
bitmapped images
Vector images take up
less space than GIF
bitmapped images
Uses
Banners, small
areas
Interactive video,
graphics, animation
More interactive sites
Need to play it
Nothing
Flash Player (Free and Web browser plug in
works with most
(The Shockwave
browsers)
Player)
No sound
Sound
Sound
flv (used on YouTube) or swf (Flash Animations) ?
Essential Flash
Terminology

Question: What kind of tween would have
been used in this Flash animation?

Stage: rectangular area where the visible motion will take place
Timeline: series of frames in a row and stacks of layers.
Indicates key frames, regular frames and empty frames
Shape: basic shapes drawn with the shape tools, line tool or a
single letter



Symbol: store in a library and can be reused. Changes to the library
symbol will result in changes in all of the copies of this symbol
currently on the stage.



Graphic: static graphic, can be used in other symbos
Button: interactive part of animation with user, responds to
mouse clicks and rollovers.
Movieclip: reusable piece of animation, can turn a simple
animation into a movieclip symbol and reuse it.
Essential Flash Terminology


Tweening: Creating the intermediate frames based
on the starting keyframe and ending keyframe.
There are 2 types of tweens:
Motion Tween
Shape Tween
Works with symbols only
Works with shapes only
Can’t morph (only movement)
Can morph shapes
Only one symbol per layer if the
symbol will have a motion tween
Can have more than one shape
per layer but be careful, depends
on what you want to morph
Can be used with motion guide
Can’t use motion guide
Motion Guide: lets you animation an object along a
path that you draw yourself. Only works with
symbols
Animation in the Movies

Digital Video



1983 Star Trek  the Wrath of Khan
– dead planet transformed to lush
earth-like habitat
http://en.wikipedia.org/wiki/TWOK#Ef
fects
Animation
History:
http://www.yo
utube.com/wat
ch?v=SaJxnTf4
4eg&feature=r
elated
Digital Animation


What was the first full length film that
was created entirely with digital
animation.
What year did it come out?
1995
Animation in the Movies
Making of the Titanic
Short Clip From Titanic
Animation in the Movies

Movies - Visual effects:
Terminator II liquid metal
cyborg
 Jurassic Park dinosaurs
 Titanic
 Star Wars

Animation in the Movies
12 Highest Gross Earnings made so far by
Computer Generated Animations worldwide
at of 2007.


01: $881 million - Shrek 2 (Dreamworks)
02: $865 million - Finding Nemo (Pixar)
03:
$624 anyone
million - The guess
Incredibles(Pixar)
Can
what was
04: $624 million - Ice Age 2 (Bluesky)
05: $529 million - Monster Inc. (Pixar)
film?
06: $486 million - Toy Story 2 (Pixar)
07: $455 million - Shrek (Dreamworks)
08: $455 million - Cars (Pixar)
09: $406 million - Madagascar (Dreamworks)
10: $378 million - Ice Age (Bluesky)
11: $358 million - Toy Story (Pixar)
12: $358 million - A bug's life (Pixar)
the

highest grossing computer generated









Let’s Review


Name two types of 2-D animation.
What is the term for the computer
generated frames between the
starting frame and ending frame?