multimedia element animation

1. MULTIMEDIA
Animation
This for copyright (Awad@UoN)
Instructor: Taj Elsir H. Suliman

2. Main Points:
1. Introduction to Animation
2. What is Animation
3. Types of Animation
4. File Types of animation
5. Animation terminology
3D Animation, Morphing, Tweening, Onion
Skinning etc.
6. Animation Challenges.

3. Intro to Animation
 What is animation?
 A drawing that moves, bringing the drawing
to “life”
 A _________________that creates the illusion
of movement when played in succession.
http://www.youtube.com/watch?v=8SBfN9ltF8c
 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
animation

4. 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
Events
Every things
any

5.  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:
Intro to Animation
Facts:
•Movies on film - 24 fps
•TV – 30 fps
9000 frames for five
minute cartoon
•Computer animation
_______________
•“jerky” anything less
events

6. 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

7. 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.

8. Types of Animation
Two types of animation exist:
•2-D animation
•Cel animation
•Path animation
•3-D animation

9. 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
Animation based
frame
stable

10. 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
Placed in
An object

11. Path Based Animation
 Pick:
 a starting point for an object, (_________)
 an ending point for an object (_________)
 Path for the object to follow
 And then the computer generated all the frames in between
called estimation Frames
- 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

12. Animation  Some Terminology
 Keyframe
 Tweening
 Onion Skinning

13. 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

14. Onion skinning
is a 2D computer graphics term for a
technique used in creating animated
cartoons and editing movies to see
________________ at once
Great little tutorial – take a look at it!
http://www.mystery-productions.com/flash/onionskinning.html
Purpose: the animator or editor can make
decisions on how to create or change an
image based on the previous image in the
sequence.
Animation – Some Terminology

15. 3-D Animation – Process
 3-Dimensional
animation involves
3 steps:
 Modelling
 Animating
 Rendering
/Performance

16. • 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
3-D Animation - Process

17. http://hof.povray.org/
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):

18.  Morphing:
 Process of
_________________
into a series of
images
 Useful for showing how
image might change
over time
Animation  Some Special Effects
Famous Faces:
http://www.youtube.com
/watch?v=wZurRt0TidI
&NR=1
http://www.youtube.com
/watch?v=h7bfCkqUuX8
&NR=1

19.  Morphing:
 More examples
Animation  Some Special Effects

20.  Warping:
 Distorts a
______________
 Warp frown into smile
Animation  Some Special Effects
http://www.cise.ufl.edu/~anand/student
s/chui/img/eg_face_warp_anim.gif

21. Animation Software
.swf originally meant “Shockwave Flash” but now “Small Web Format”
flv (used on YouTube) or swf (Flash Animations) ?
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
works with most
browsers)
Web browser plug in
(The Shockwave
Player)
No sound Sound Sound

22. Animation Challenges:
Lip Synchronization : how to synchronize the lip motion
with the sound in cartoon films.
Smooth(Real) Motion: we need mathematical and physical
formulas.