3.

02 Explain basic motion

graphic programming.
Animation Types
Frame-by-Frame Animation
 Rapidly displaying images, or frames, in
a sequence to create the optical illusion
of movement.
 Digital animation is based on the frame
by frame animation process.
 Example of a ball
bouncing.
Frame-by-Frame Animation (Continued)
 The quality of frame-based animation
depends on the frame rate.
 Frame Rate = Frames per Second

 FPS = Smoother Action

 The more frames per second, the smoother the

motion appears.
Stop Motion Animation

 Process of manipulating real-world objects

and photographing them one frame at a time.
 Very popular method with the film industry
until computer generated imagery became
possible.
 Now used mainly in clay animation.
 Example
 http://en.wikipedia.org/wiki/File:Moving_Penny.gif
Morphing Animation
 The term morphing comes from the word
metamorphosis, which is the transformation of one
thing into another.
 The beginning image is inserted.
 The ending image is inserted.
 The computer performs the tweening to generate a
sequence of images, each of which is slightly different from
the one it follows to gradually morph the two objects.
 For example, a photograph or object might gradually
morph into a different photograph or object.
Example of Morphing

Beginning Image Ending Image Finished Animation

Path Based Animation
 Also called vector animation.
 An object follows a path which is a line, or
vector, inserted by the animator.
 A motion path can include curves, loops, and
angles.
 The computer calculates the correct position of
the object as it moves along the path and
generates the frames to create the animation.
Path Based Animation (Continued)

 Vector graphics or animated gifs can be used

to create animations with very small file sizes.
 The small file sizes make this type of
animation very popular on the Web.
 Many of the banner ads and embedded
animations viewed on web sites use this
technology because it loads so quickly and is
easy to use.
Programming or Scripting-Based Animation
 Requires knowledge of a programming or
scripting language.
 Example: Rollover or Mouseover
 When the mouse is moved over an image, it
changes to a different image so quickly that it
looks as if the change has occurred in a single
instant.
 Created by using scripting
languages such as
Javascript.
Programming or Scripting-Based
Animation (Continued)

 Rollovers are extremely important for

navigation buttons on user interface designs.
 Examples
 Web pages ■ CBT programs
 Kiosks ■ CD-ROM Training
 Games ■ CDs and DVDs.