2.02A History of Animation
2.02 Develop Computer
Animations

2.02 Computer Animation Graphic
Organizer—Section A
Animation
• The rapid display of a sequence of
images of 2-D or 3-D artwork or
model positions in order to create
an illusion of movement.
• Relies on persistence of vision to
create the illusion of movement.
How has animation evolved
over the years?

Animation has progressed from
hand-drawn images to computergenerated animations.



Examples:
2D to 3D illusion
2D PHOTOS TO 3D - ILLUSION
Persistence
of
Vision
 In the early 1800’s, the phenomenon
known as persistence of vision gave
mankind the first glimpse into the
modern world of animation.

Persistence of vision refers to the way
our eyes retain images for a split second
longer than they actually appear, making
a series of quick flashes appear as one
continuous picture.

Persistence of Vision YouTube.flv
Persistence of Vision



Using a flipbook, you can
see the persistence of
vision effect in action.
If you have a different
sequential drawing on each
page of the flipbook and
you flip through the pages
rapidly, the drawings
appear to move.
Examples of Early
Animation




Examples:
How to Draw Animations
of Vision in Animation
Pac Man Flipbook
BREAK DANCE (flipbook)
Persistence
Traditional Animation
Describe early animation.
Also called cel animation or hand-drawn
animation.







Begins with a storyboard.
A preliminary soundtrack is recorded.
Penciled drawings are made by lead animators
of keyframes.
Pencil tests are prepared.
Artists called in-betweeners draw the frames
between the keyframes.
The drawings are traced onto cels and painted.
Finally, they are photographed.

The Process of Animation
Computer Assisted Animation
What is the difference between traditional
animation and computer animation?




The computer is used to make the animation
process quicker and easier.
Usually involves 2-D images
 Can be hand-drawn and scanned into the
computer.
 Can be drawn directly into the computer
using graphics tablets.
The images are positioned into keyframes
containing the most important movements.
Tweening is then performed by the computer
to create images between keyframes.
Computer Assisted Animation
. . . continuation
 Even
though computers are
now used extensively, many
traditional steps are still used.
Storyboarding
 Pencil Testing
 Keyframes
 Tweening

Computer Generated Animation



All images, objects and animation are
created on the computer.
Typically uses 3-D images.
Adds two steps to the animation
process.


Modeling – process of creating a
wireframe structure of the 3-D objects
and scenes.
Rendering – process of applying colors,
textures, shadows, transparency, etc. to
create the final image or animation.
3-D Graphics and Animation


3-D animations are more complex.
Creating 3-D animations involves
modeling, animation, and rendering.



Modeling is creating broad contours and
structure of 3-D objects and scenes.
Animation is determining the motions of the
objects.
Rendering involves determining colors, surface
textures, and amounts of transparency of
objects.
Computer Generated Animation

Motion capture can be used to
create animation.



Actors wear special suits that allow the
computer to capture their movements.
The movements can then be applied to
computer-generated graphics.
Examples:


The Polar Express
Avatar
Bridging the Traditional and
Computer Eras

Traditional animation is defined as the
process of creating the illusion of motion by
viewing a series of individual drawings
successively.
Describe computer animation.
Computer animation is creating a digital
scene by digitally recording cells, sorting them
on an electronic storyboard, and displaying
them electronically in succession.
Review
History of Animation
 Animation
 Traditional Animation
 Computer Assisted Animation
 Computer Generated Animation
2.02B Methods and Uses of
Animation
2.02 Develop Computer Animations
 2.02 Computer Animation Graphic
Organizer—Section B
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
What happens during the morphing effect?
 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
 How is the rollover effect used?
• 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
How are the types of computer
animations used?





Entertainment
Advertisement
Selling
Teaching
Training
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.
What type of graphics are
used in virtual reality?
 3-dimensional.
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
2.02C Frame-by-Frame
Computer Animation Using
PowerPoint
2.02 Develop Computer
Animations
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
Frame-by-Frame Animation
2.02C Computer
Animation Software
and Design Guidelines
2.02 Develop Computer Animations
Common Terms in Animation
Software
 Stage
 Library
 Timeline





Frame
Keyframe
Playhead
Frames per Second
Layers
List and describe the program parts for
computer animation software.
. . . Following slides
Stage
The part of the
animation program
window where the
animation’s content is
composed and
manipulated.
Library
Stores frequently
used graphics, movie
clips, and buttons.
Timeline
 The part of the animation program window
that organizes and controls an animation’s
content over time using layers and frames.
 In video-editing software, where source
clips, transitions, and audio files are
arranged to create the video.
 How Does Computer Animation Work
Parts of the Timeline
Frames
 Frames hold the content that the movie
displays or plays at that point in time.
 The number of frames determines the
length of the animation.
 The higher the number of frames, the
longer the animation.
Regular Frames
Contain one image or frame.
Regular Frame
Keyframes
Shows where the key (most important)
actions occur.
Shows where
tweening will occur.
Keyframes
Image used with permission from http://facweb.cs.depaul.edu/sgrais/creating_a_motion_tween.htm
Playhead
Vertical red marker in the timeline that shows
which frame is the current frame.
Scrubbing
Dragging the playhead across the timeline in
order to preview the animation.
Frames Per Second (FPS)
The number of frames that appear in one
second of the animation.
Frames Per Second (continued)
 If the animation program creates movies at 12 fps (frames
per second) by default, inserting a keyframe and change
once every 12 frames results in a change in action for
every second.
 A project with 60 frames results in a 5-second movie.
How do FPS, playhead, and
scrubbing impact the process of
designing computer animations?
 The FPS determines the length of the
animation. The playhead shows which
frame is the current frame being viewed.
 The playhead can be scrubbed, or dragged,
across the timeline in order to preview the
animation as it is being created.
Layers
What are the functions of the different layers?
 Timeline is divided into layers to help organize
content and allow the different layers to be edited
separately.
 Sound would be on a separate layer.
 Text would be on a separate layer.
 A motion path would be on a separate layer.
Layers
Motion Guide Layer . . . continuation
Layer on which a motion path is drawn.
Objects on different layers can be linked to the
motion layer so they will follow the motion path.
Once linked, they become “guided layers”
 Multiple objects can be linked to one motion
layer.
 Text layers can also be linked to a motion layer.
Motion Guide Layer
Screenshots from
Different Animation
Software Packages
Flash
This Image has been used with permission from:
http://glennward.co.uk/2009/09/1-1-introduction-to-adobe-flash-the-workspace-and-tools/
Synfig
Image created by Ricardo Graça and used with permission from: www.ricolandia.com
Autodesk 3ds Max
This image used with permission from: http://www.softpedia.com/progScreenshots/3D-Studio-Max-Screenshot-15976.html
Guidelines
For Designing
Frame-by-Frame
Computer Animations
Guidelines For Designing Frameby-Frame Computer Animations
What are the guidelines to consider when
designing computer animations?
 Insert keyframes at each change in the action
 Content on keyframes can be changed by:
 Adding and deleting objects.
 Replacing one object with another.
 Moving objects, resizing, or rotating objects.
 All these actions simulate some kind of motion or
action.
Guidelines For Creating Frameby-Frame Animations (continued)
 Add a keyframe at the point where the
animation will stop.
 Allow sufficient time for the image to be viewed
after the final content change.
 Insert text, sound and motion on separate layers
in the timeline.
For example, if a new graphic is inserted at
frame 35, place the final keyframe at frame
50 to allow time for the display of the final
graphic.
How do the different types of
tweening impact the movement of
objects?
 Frame by frame animation—the computer
generates the frames in between the keyframes.
 Morphing—the computer generates the frames
to change one shape into another.
 Path animation—the computer generates the
frames by calculating the position of the object
and rotating it appropriately as it moves along
the path inserted by the animator.
Copyright Laws
Copyright Laws
 Purpose
 Fair use situations
 Public domain material
Review
Parts of Computer Animation Software



Stage
Library
Timeline
Parts of the Timeline





Frame
Keyframe
Playhead
Frames per Second
Layers
Review (Continued)
Guidelines for Designing Animation
 Insert keyframes at each change in the action
 Change keyframes by:
 Adding and deleting objects.
 Replacing one object with another.
 Moving objects, resizing, or rotating objects.
 Add a keyframe at the point where the animation will stop.
 Allow sufficient time for the image to be viewed after the final
content change.
2.02D Adding Sounds
into
Computer Animations
2.02 Develop Computer Animations
Using Sound in Animations
Sound files can be used to enhance an
animation.
 Sound could include:

 Music
 Narration
 Sound

Effects
Do not use sound unless it enhances the
animation. If the sound is distracting and
irrelevant to the animation, do not use it.
Sound File Formats
Sound File Formats

Most animation and video programs
enable sound files to be imported in at
least two formats:
 MP3
 WAV

Wave files have the highest quality sound.
WAV (Waveform)
Summarize the WAV format.
The standard format for sound on
computers running the Windows operating
system.
 WAV files produce high-quality sound.
 Generate large file sizes.
 When creating or editing sound, WAV files
are typically used until all editing is
finished. The final sound file is then saved
in a more compressed file format such as
MP3.

MP3 Summarize MP3 format
MP3 is a standard format for
music files sent over the Internet
that compresses music or other
types of audio.
The compression process
removes sounds that humans
cannot hear.
To most listeners, MP3 files
sound as good as WAV files.
It results in a much smaller file
sizes which means they can be
uploaded or downloaded much
quicker.
Recording Sound
Files
Recording Sound Files

Sounds can be recorded or captured from a
variety of sources.
 For
example, record your voice using a microphone
that is connected to the computer’s sound card.
 Or, connect a device such as a CD player, MP3
player, or tape player to the sound card Line-in jack to
record CD audio or other pre-recorded material.

Some animation software allows you to record
narration without having to create the sound in a
separate program.
Recording Sound Files



When recording, be aware that sound files tend
to be large.
Large sound files will increase the size of the
finished animation which means the animation
will take longer to download and require more
storage space.
Keep sound files as small as possible while
maintaining sufficient quality by:
 Recording WAV files at a lower quality setting.
 Using recording or conversion software that will
save
the sound file in a compressed format such as MP3.
What is the purpose of the
compression process?

The purpose for compressing files is to reduce
the amount of storage space required by files.
This means the files will download and upload
more quickly..
Importing Sound
Files
Importing Sound Files

Sound files are usually
imported into the animation
much like image files.

Most animation programs
require or recommend that
each sound object be
inserted on its own layer.
Guidelines for Using Sound
If
the animation is for a Web site,
keep the overall file size small for
faster downloads by using more
compact MP3 files and looping a
shorter sound segment.
On
the other hand, if the animation
is part of a presentation delivered in
an auditorium equipped with a highquality audio system, use the
highest quality sound file possible.
When
creating or choosing the
sounds to include in the animation,
keep the intended purpose of the
animation in mind.
Copyright
Remember
that in order to avoid a violation of
copyright law, only original music can be used in
professional productions such as Web animations
and presentations.
Fortunately,
there is a large number of
inexpensive programs that combine sound loops to
create original, royalty-free music for animations
and movies.
Copyright
What type of music can be used in professional
productions?

Any type of music can be used as long as
copyright restrictions are observed. If a
copyrighted piece of music is used, royalties will
have to be paid to the copyright owner and
permission will have to be obtained. If the music
is an original composition, the person who wrote
and played the music must give their permission
to use it.
Review
Adding Sounds into Computer Animations

Recording sound files
 Importing sound files
2.02E Adding and
Animating Text in
Computer Animations
2.02 Develop Computer Animations
Text in computer animations
What is the purpose of text in computer
animation?
 Text performs the same function in an animation as it
does in a graphic: it provides information on the
subject of the animation or directions to the viewer.
 An animation program provides the added option of
animating the text in some way to make it more
effective.
Adding text into computer
animations (Continued)
 To add a text object in animation software:
 Create a layer to hold the text
 Choose the text tool from the toolbox
 Specify text settings
 Key the text.
 Choose formatting options:
 Font, font size, and font style
 Change text color and alignment
Describe what happens to
text when it is added into
computer animations?(Continued)
 The text is inserted and then it is formatted
and animated. In some software, text can be
inserted into its own layer and edited
separately from the other elements.
Possible Animation for Text
(Continued)
 Text can appear and disappear in selected frames in the
movie or presentation.
 Text can fade in or fade out.
 Text can follow a motion path.
 Text can scroll or change colors.
 Text can blink on and off.
 Text can appear one letter or word at a time.
 NOTE: The possibilities for text animation will vary
depending on the animation software being used.
2.02F Publishing Animated Videos
2.02 Develop Computer Animations
Publishing Animated Videos
 Publishing animations and animated
videos involves the following steps:




Analyze and optimize the animation.
Choose an appropriate file type.
Choose the delivery method.
Publish the animation.
Step 1: Analyze and
Optimize the Animation
Analyze Animations For Potential
Problems
 Identify potential problems that may occur
when downloading and playing a movie.
 If the entire movie will be downloaded before
it is played, determine which parts of the
movie are taking the most time to download.
 If the movie will be delivered through a
streaming connection, look for ways to reduce
or control the pauses during download and
playback.
Optimize the Animation
What should occur during the analyzing and
optimizing video files process?
 Animations should be optimized in order to:
 Reduce the file size for quicker downloads.
 Make the video or animation play more smoothly
during playback.
 Maintain sufficient quality for viewing.
 Videos can be optimized anytime or
only when they are published.
Optimize the Animation (Continued)
 Optimizing animation
involves fine-tuning
compression settings.
 Optimize the sounds
in the Library by
compressing to MP3.
Step 2: Choose an
Animation File Type
Animation File Types
What are some animation file types?





Animated GIF
AVI
MOV
MPEG
SWF
Animation File Types
Audio Video Interleave (AVI)
 Microsoft’s animation and video format for computers running
the Windows operating system.
 Does not compress animation as much as other formats.
 Will not play on all operating systems or in all players.
Graphics Interchange Format (GIF)
 Pronounced “jiff” or “gif”
 Animated GIFs can contain 2-D or 3-D images.
 They are used for cartoons, logos, graphics with transparent
areas, and animations.
 GIF files are popular for the use on the Web because they:
 Have small file sizes.
 Do not require a special plug-in or player.
 Are supported by most browsers
Animation File Types
Apple QuickTime Movie (MOV)
 Files can be either downloaded or streamed.
 Run on many different operating systems.
 Must be viewed in the QuickTime player which is a free
download.
Moving Pictures Expert Group (MPEG)
 A very compressed video format.
 Files tend to be much smaller and better quality than other
formats.
 Recommended for videos that will be downloaded instead of
streamed because it does not require a specific player or
plug-in.
Animation File Types
Shockwave Flash (SWF)
 Pronounced “swiff”
 File format for animation created with Adobe Flash.
 Files can contain text as well as both vector and raster
graphics; also may include interactive actions written in
ActionScript.
 Must be viewed in the Adobe Flash Player which is a free
download.
 Popular format for the Web because:
 File size is small.
 Support streaming.
Step 3: Choose a
Delivery Method
Delivery Methods
What are the delivery methods for distributing
computer animations?
 Once videos have been analyzed and optimized
to perform best in the intended medium, the next
step is to publish.
 Delivery methods available for distributing
animations:
• As part of a Web page
• On a CD-ROM or DVD.
• As an executable file which bundles both the
animation and the program to play in a single
file.
Delivery Methods (Continued)
 When an animation or an
executable file is distributed
over the Internet, the entire
file must be downloaded
before the animation can
play.
 Animations distributed as
part of a web page can be
either:
 Streamed
 Downloaded
Streaming
What happens during the streaming process?
Streaming is a technique for transferring audio and video
files over the Internet as a continuous stream of data.
 The Streaming Process
 Data is held in a temporary storage area called a buffer
until it is played by the computer.
 There will always be an initial delay while the first frame is
buffered.
 Suppose an animation plays at 5 frames per second.
 Each frame will play for 0.2 seconds.
 If the first frame takes 0.3 seconds to download, the
animation cannot start playing until after that time has
elapsed.
Advantages and Disadvantages of
Streaming
 Advantages
 Quick Access - files can start playing as soon as a
computer begins receiving the data rather than waiting for
the complete file to download before playing.
 Data is discarded as it is played so a complete copy of the
file is not stored on the viewer’s computer.
 Disadvantages
 The viewer must be connected to the Internet to view the
video.
 The viewer’s connection speed influences the quality of
playback.
 Files cannot be saved and viewed later.
Plug-ins and Players
What is the purpose of a plug-in or player?
 Plug-ins or players may be
required to view an
animation over the Internet.
 A plug-in is a program that
works with the browser to
expand its capabilities.
 Examples:
 Allow it to play video or audio
files.
 Allow it to open certain file types.
Plug-ins and Players
What is the purpose of a plug-in or player?
 A standalone player is a separate
program that can play video and audio
files without the browser software being
open.
 Examples
 List examples of plug-ins and players.
 Adobe Flash Player
 QuickTime
 RealPlayer
 Windows Media Player
Step 4: Publish the
Animation
Publish the Animation
 For animations distributed over the Internet:
 Upload the file to the host computer.
 Create a link to the file or embed it into the web page.
 Test the animation in different browsers.
 For animations distributed on CDs or DVDs:
 Burn the file onto the disk.
 Finalize the disk.
 Test the disk in several different
CD or DVD players.
Factors that Influence
the Delivery of
Computer Animations
Factors that influence the delivery of
computer animations:
 Viewer’s bandwidth, or connection
speed.
 Streaming rate
 Playback rate
Connection Type
determines how much data
can transfer to the network.
Internet
(water is
the data)
Bandwidth
 The amount of data that can be transmitted over
a network in a given amount of time.
 The speed at which data travels over a network
depends on:
 The type of Internet connection for the
network.
 The number of users
Data
using the network at
that specific time.
Bandwidth
Streaming and Playback Rate
 Streaming rate is the rate in frames per second
at which videos can be downloaded or
transferred to a computer and is determined by:
 The viewer’s network connection speed.
 The content of the video file being
downloaded.
 Playback rate is the rate in frames per second
at which the video plays.
Bandwidth and Streaming Rate
What is the relationship between
bandwidth and streaming rate?
 If a lot of people are using the network at one
time, less bandwidth will be available to
download the data.
 This will cause the streaming rate to be slower.
 This means the playback rate will most likely be
slower than the streaming rate.
 This will cause the playback to
pause until more data is
received.
Bandwidth and Streaming Rate
What is the relationship between
playback and streaming rate?
 If the streaming rate is slower than the playback
rate, the video will pause until more data is
received.
 It is a good idea to provide the video in different
file sizes so viewers can choose the file size
best suited for their connection type.
Review
Publishing Animated Videos
Analyze and optimize the animation.




Analyze and optimize the animation.
Choose an appropriate file type.
Choose the delivery method.
Publish the animation.
Review (Continued)
Animation File Types





Animated GIF
AVI
MOV
MPEG
SWF
Plug-ins and Standalone Players




Adobe Flash Player
QuickTime
RealPlayer
Windows Media Player
Review (Continued)
Methods for publishing animated videos
 Website
 CD-ROM or DVD
 Executable file
Factors that influence the delivery and
distribution of computer animations:
 Bandwidth
 Streaming rate
 Playback rate