2.02B Methods and Uses of
Animation
2.02 Develop Computer Animations
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.
Methods of Animating
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 of one person might
gradually morph into a picture of another person.
Example of Morphing
 The top two images
show the beginning and
ending images.
 The lower images show
the older man morphing
into the young boy.
 In business, morphing
can be used for
transitions between
web pages or images.
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
Kiosks
Games
■ CBT programs
■ CD-ROM Training
■ CDs and DVDs.
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
Uses of
Computer Animations
Uses of Computer Animation
 Entertainment
 Films, computer games and virtual reality.
 3D graphics are popular for these types of
animations because they are more realistic.
 Virtual Reality is the use of technology to immerse
a user into an artificial environment.
 Interaction occurs when the user moves around and
manipulates simulated 3D objects in the
environment.
 Requires high-quality graphics using 3D technology.
 Requires high frame rates for smooth motion, and
high image resolution for realistic detail.
Uses of Computer Animation
 Advertising
 Animation can be used to catch the viewer’s eye.
 Popular for banner ads on websites.
 Selling – showcasing products or services.
 Teaching – illustrating concepts or processes.
 Training – simulating events or demonstrating
techniques in presentations.
 Examples:
 http://www.looking-glassanimations.co.uk/example_animations.htm
 http://www.looking-glass-animations.co.uk/
Use Animation Appropriately
 Before using an animation, be sure to
answer the following questions:




Is it appropriate for the target audience?
Does it help deliver the message?
Is it overused?
Does it load quickly?
3D Graphics and Animation
Software
3D Graphics and Animation Software
 The leading graphics programs designed specifically for creating
and editing 3D images are:
 Xara 3D
 3ds Max 4
 Maya
 Blender
 Flash
 Cinema 4D
 These programs allow users to:
 Create live-action animation
 Bounce an object
 Zoom in or out of a scene
 Fade text or pictures in or out to create other animated effects.
Design Frame-by-Frame
Computer Animations
NOTE: Before continuing with this presentation,
open the 3.01C Frame-by-Frame Animation Using
PowerPoint Presentation to view a completed
animation.
Use PowerPoint to Create Frame
by Frame Animation
1. Insert a clipart image that is a vector file
Hint: In Microsoft software, search for .wmf
files.
2. Ungroup the image.
3. Edit the image then regroup it.
4. Copy the image and paste it onto the next
slide.
5. Change the image or its location.
6. Repeat for several slides.
PowerPoint Animation (continued)
 Rehearse the timings.
 Click on Slide Show, Rehearse Timings
 Set the amount of time for each slide to display.
 Set the Show to run continuously.
 Click on Slide Show, Set Up Show
 Check Loop Continuously Until Esc
 Save and preview the animation.
Create Animated Gifs
 Many image editing programs can create
animated gifs.
 Examples: Adobe PhotoShop and Gimp
 Steps:
 Insert an image.
 Copy it to a different layer and change the image
or its position.
 Repeat the layers until you are satisfied.
 Save the file as an animated gif.
Review
Methods and Uses of Computer Animations

Methods of computer animations


Frame-by-Frame Animation
 Morphing Animation – Uses shape tweening.
 Path Animation - Uses motion tweening.
 Programming and Scripting-Based Animation
 Stop Motion Animation
Uses of computer animations





Advertising
Entertainment
Selling
Teaching
Training