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. Example of a ball bouncing.

 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. Frame-by-Frame Animation (Continued)

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 

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

Rollovers are extremely important for navigation buttons on user interface designs. Examples Web pages ■ CBT programs Kiosks ■ CD-ROM Training Games ■ CDs and DVDs. Programming or Scripting-Based Animation (Continued)