3.02 Explain basic motion graphic programming.

1
3.02 Explain basic motion graphic programming.

• Animation Types

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

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

4
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/FileMoving_Penny.gif
  

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

6
Example of Morphing
7
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.

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

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

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