5. Why animation works
The eye cannot register images faster than
approximately 50 frames per second
(30 is just about adequate)
If a gap in the projection occurs, the eye
seems to perform spatial interpolation over the
6. Displaying animation
To achieve smooth animation, a sequence of
images (frames) have to be presented on a
screen with the speed of at least 30 per
Animations frames can be
pre-computed in advance and pre-loaded in
computed in real time (e.g. movement of the
7. Designing the Animation
1) Layout of Storyboard: Storyboard layout is the action outline utilized to
illustrate the motion sequence as a set of storyboard comprises a set of rough sketches or a
list of basic concepts for the motion.
2) Definition of Object &Path : The object definition is specified for all
participant objects in action. The objects can be explained in terms of fundamental
shapes, related movements or movement with shapes.
3) Specification of Key Frame: this is the detailed drawing of the scene at
an exact time in the animation sequence. Inside each key frame, all objects are positioned
as per to time for that frame. Several key frames are selected at the extreme positions in
the action; More key frames are given for intricate motion than for easy, slowly varying
4) In-between frames Generation: In-among frames are the middle
frames among the key frames. In common, film needs twenty-four frames per second, and
graphic terminals are refreshed on the rate of 30 to 60 frames per second. Classically the
time interval for the motion is set up hence there are 3 to 5 among for each pair of key
frames. Based upon the speed identified for the motion, several key frames can be
11. Object definition
Simple rigid objects can be defined in terms of
polygon tables (3D)
basic shapes such as line segments, circles,
splines etc. (2D)
Rigid body animation is an extension of the
12. Path specification
Impression of movement can be created for
two basic situations, or for their combination:
static object, moving camera
static camera, moving object
The path defines the sequence of locations
(for either the camera or the object) for the
consecutive time frames
25. Raster animation
This is the most common animation technique
Frames are copied very fast from off-screen memory to the frame buffer
Copying usually done with bitBLT-type operations
Copying can be applied to
only parts of the frame which contain some movement
26. Raster Animation
*Small file size
*Unlimited zoom without anti-aliasing "jaggies"
*Good for line drawings and images with large
areas of same color
*Can not reproduce photographs well
*Formats not standardized as much as raster
27. Raster Animation
A rasteris an image that is defined by a map of pixels, such
as a photograph or .jpg file.
Rasters are easy to edit but difficult to scale, due to them
becoming blurry or pixellated when scaled to large sizes.
Raster images are preferred by photographers and digital
artists who are more concerned about realistic quality and
ease of publication than scalability.
An example of a program that uses rasters is Adobe
Step 1 (erase) Step 2 (move) Step 3 (draw)
Ship is redrawn in background colour
x’ = x + Dx
y’ = y + Dy
(x,y) (x+Dx,y+Dy) (x’,y’)
30. Double buffering
Used to achieve smooth animation
The next frame of animation is computed to an
off-screen buffer at the same time when the
current frame is transferred to the frame buffer.
Load to the
Load to the
Load to the
32. Colour-table animations
The hardware colour look-up table will convert the logical
colour (pseudo-colour) numbers stored in each pixel of
video memory into physical colours, normally represented as
RGB triplets, that can be displayed on a computer monitor.
A CLUT is characterized by:
The number of entries in the palette: determines the
maximum number of colours which can appear on screen
The width of each entry in the palette: determines the
number of colours which the wider full palette can represent.
33. Motion specification
Motion of objects can be specified in several
1)Direct motion Specification
2)Goal –Directed Systems
3)kinematics and dynamics
34. Direct motion specification
• We explicitly give the rotation angles and
• Then the geometric transformation matrices are
applied to transform co-ordinate positions.
• These methods can be used for simple user
programmed animation sequences.
36. Goal-directed systems : -
We can specify the motions that are to take place in
general terms that abstractly describe the actions.
These systems are referred to as goal directed because
they determine specific motion parameters given the
goals of the animation. For example, We could specify
that we want an object to "walk " or to "run" to a
particular destination. Or We could state that we want an
object to "pick up " some other specified object.
38. Kinematics And Dynamics
Kinematics: Study of motions (position, velocity,
• the movement of an object from one place to another.
• measured over a time interval such as s, min, h
• relative to the position of the observer or the
Dynamics: Full consideration of time varying phenomena
in the interaction between motions, forces and material
Typically there is an time-integration process where
results from one time frame effect the results on the next
Morphing is a special effect in motion
pictures and animations that changes one
image or shape into another through a
change smoothly from one image to
another by small gradual steps using
computer animation techniques.
Morphing is a technique that transforms one
image into another. It is similar to tweening
except on one point: in the morphing a match
is made by the user on both images.
The images are morphed by a simultaneous
process of warping and dissolving.
When particular areas of the images are
isolated in the mesh, they can be meaningfully
warped and dissolved.
Warping is similar to tweening. Linear
extrapolation is used to tween one region of
mesh A into its corresponding region in mesh
It is performed by linearly interpolating the four
vertices of each region in A into the four
vertices of the corresponding region B. This
will distort and move the grid in A into the grid
in B. While this happens, the image data
inside the region is stretched and compressed
42. Step 1 Select create a new project using the assistant.
Step 2 choose the type of project you want to realize.
Morph : to create a morphing with two images;
Warp: to create a morphing with one image;
Sequence morph : to create morphing using many images in
an unique project;
Layer morph: Morph multiple images in different layers
In this case, choose morph.
Step 3 Select the two images. the software proposes to you to face
locator(to select automatically correspond points in the two images)
Step 4 you can now add other points , add effect....and then the
software generate automatically intermediate images for a
In betweening or tweening is the process of generating
intermediate frames between two images to give the
appearance that the first image evolves smoothly into the
In betweens are the drawings between the key frames which
help to create the illusion of motion.
Tweening is a very simple concept in computer graphics that
has very powerful and visually impressive applications.
In tweening, key frames are provided and “in-between”
frames are calculated to make smooth looking animation
Step 1 Always start with a new Flash document. Create a circle to the right in
the Stage area. To do this, you have to select the circle tool from the left toolbar.
Draw the circle in the Stage area.
Step 2 Select the Arrow tool from the left toolbar. Double-click on the circle to
Step 3 We have to convert the rectangle to a symbol. From the top menu
choose Modify > Convert to Symbol. Name the symbol whatever you want and
Step 4 Go to Frame 20 in the Timeline. The number of the frames you choose
depend on the speed of the motion Do this by clicking the gray field below 20.
Then right click in this field. Choose Insert Key frame. Key frames appear as
black circles in a frame. This operation duplicates the image.
Step 5 Select the rectangle and move it to the left a couple of inches.
Step 6 Co back to the Frame 1. Then right click and choose Create Motion
Step 7 If Choose Control > Play from the top menu to test your Flash movie.
Step 8 If you want to create different objects moving around the screen, you