150
Multimedia: Making It Work
Making Animations That Work
Animation catches the eye and makes things noticeable. But, like sound, 
animation quickly becomes trite if it is improperly applied. Unless your 
project has a backbone of movie-like, animated imagery, use animation 
carefully (and sparingly) like spice to achieve the greatest impact. Your 
screens may otherwise become busy and “noisy.”
Multimedia authoring  systems  typically  provide  tools to simplify 
creating animations within that authoring system, and they often have a 
mechanism for playing the special animation files created by dedicated 
animation software. Today, the most widely used tool for creating multi-
media animations for Macintosh and Windows environments and for 
the Web is Adobe’s Flash. Flash directly supports several 2½-D features, 
including  z-axis positioning, automatic sizing and perspective  adjust-
ment, and kinematics. External libraries can extend Flash’s capabilities: 
open-source   Papervision3D  (http://blog.papervision3d.org)  provides 
extensive  support  for  true  3-D  modeling  and  animation;  Figure 5-5 
shows   GreenSock’s  TweenMax  (www.greensock.com/tweenmax)  pro-
viding sophisticated tweening capabilities within Flash.
Figure 5-5 
Plug-ins for Flash can make tweening easier.
Copy pdf bookmarks - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
acrobat split pdf bookmark; how to add bookmarks to pdf document
Copy pdf bookmarks - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
export excel to pdf with bookmarks; bookmark pdf acrobat
151
Chapter 5   Animation
A Rolling Ball
First, create a new, blank image file that is 100 × 100 pixels, and fill it with 
a sphere.
Create a new layer in Photoshop, and place some white text on this 
layer at the center of the image. 
Make the text spherical using  Photoshop’s “Spherize” distortion filter, 
and save the result. 
To animate the sphere by rolling it across the screen, you first need 
to make a number of rotated images of the sphere. Rotate the image in 
45-degree increments to create a total of eight images, rotating a full circle 
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
document file. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. Also a preview
how to bookmark a pdf file; delete bookmarks pdf
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Demo Code in VB.NET. The following VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
excel hyperlink to pdf bookmark; create pdf bookmarks from word
152
Multimedia: Making It Work
of 360 degrees. When each is displayed sequentially at the same location, 
the sphere spins:
For a realistic rolling effect, the circumference (calculated at pi times 
100, or about 314 pixels) is divided by 8 (yielding about 40 pixels). As each 
image is successively displayed, the ball is moved 40 pixels along a line. 
Being where the rubber meets the road, this math applies when you roll 
any round object in a straight line perpendicular to your line of sight.
A Bouncing Ball
With the simplest tools, you can make a bouncing ball to animate your 
web site using GIF89a, an image format that allows multiple images to 
be put into a single file and then displayed as an animation in a web 
browser or presentation program that recognizes the format. 周e indi-
vidual frames that make up the animated GIF can be created in any 
paint or image-processing program, but it takes a specialized program 
to put the frames together into a GIF89a animation. (Animating with 
GIF89a files is discussed in Chapter 13.) As with the rolling ball example, 
you simply need to flash a ball on the computer screen rapidly and in a 
different place each time to make it bounce up and down. And as with the 
rolling ball, where you should compute the circumference of the ball and 
divide by the number of images to determine how far it rolls each time 
it flashes, there are some commonsense computations to consider with a 
bouncing ball, too. In the formula, s equals distance, a equals acceleration 
due to gravity, and t equals time:
s = ½ at
2
Gravity makes your bouncing ball accelerate on its downward course 
and decelerate on its upward course (when it moves slower and slower 
until it actually stops and then accelerates downward again). As Galileo 
discovered while dropping feathers and rocks from the Leaning Tower 
of Pisa, a beach ball and a golf ball accelerate downward at the same rate 
until they hit the ground. But the real world of Italy is full of air, so the 
feather falls gently while the rock pounds dirt. It is in this real world that 
you should compose your animations, tempering them always with com-
monsense physics to give them the ring of truth.
Unless your animation requires precision, ignore the hard numbers 
you learned in high school  (like  32  feet per  second per  second), and 
C# PDF File Compress Library: Compress reduce PDF size in C#.net
NET framework. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. C# class demo
export pdf bookmarks to excel; create bookmark pdf
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
add bookmarks to pdf file; add bookmark pdf
153
Chapter 5   Animation
simply figure that your ball will uniformly accelerate and decelerate up 
and down the pixels of your screen by the squares: 1, 4, 9, 16, 25, 36, 49, 64, 
81, 100 are the squares of 1, 2, 3, 4, 5, 6, 7, 8, 9, and 10. 周is is illustrated 
in Figure 5-6. In the case of a perpetual-motion bouncing ball (even bet-
ter than Silly Putty), it goes up the same way it comes down, forever, 
and this makes the job easy, because the up and down movements are 
symmetrical. You can use the same images for downward motion as you 
use for upward—as in frames 11 through 18 in Figure 5-5—by reversing 
them. You might also add a squash frame (not shown in Figure 5-6) when 
the ball hits the floor. 周e amount of squash would be determined by the 
type of ball—a steel ball or a balloon or a very soft rubber ball. 周e ball 
would squash when it hit and un-squash as it bounced up again. With a 
bit of programming, you might allow the user to choose the elasticity of 
the object, the amount of gravity, and the length of fall. Some animation 
software provides tools for this: it’s called “easing.”
Figure 5-6 
To make a bouncing ball seem natural, don’t forget the acceleration effects of gravity. If you loop the 
18 images shown here, the ball will bounce forever.
How to C#: Basic SDK Concept of XDoc.PDF for .NET
create, load, combine, and split PDF file(s), and add, create, insert, delete, re-order, copy, paste, cut This class describes bookmarks in a PDF document.
export bookmarks from pdf to excel; convert word pdf bookmarks
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
by C#.NET PDF to HTML converter toolkit SDK, preserves all the original anchors, links, bookmarks and font style that are included in target PDF document file.
pdf create bookmarks; copy pdf bookmarks
154
Multimedia: Making It Work
Open a graphics program and paint a ball about 15 pixels in diameter 
(if you have an odd-number diameter, there is a middle pixel that can be 
your center alignment point). If you wish to be fancy, make the ball with 
a 3-D graphics tool that will shade it as a sphere. 周en duplicate the ball, 
placing each copy of it in a vertical line at the ten locations 1, 4, 9, 16, 
25, 36, 49, 64, 81, and 100. 周e goal is to create a separate image file for 
each location of the ball, like the pages of a flip-book. With Photoshop, 
you can create a single file with ten layers to contain each ball at its 
proper location, and you can add an eleventh background layer, too. 周en 
save each layer showing against the background as a separate file. (Use 
numbers in your filenames like ball01, ball02, and so on, to keep them 
organized.)
周is is a construction process also easily managed with Director or 
Flash, in which you can place the same cast member or object (the ball) 
where you wish on the presentation stage.
You can also add a background and other art elements, and when you 
are done, you can export each frame as a graphics file using the export 
function. You will probably also wish to set the size of your stage to a small 
area just sufficient for your animation, say 32 × 120 pixels. 周e smaller the 
better if users will be downloading this animated GIF file into their web 
browsers.
VB.NET PDF: Basic SDK Concept of XDoc.PDF
create, load, combine, and split PDF file(s), and add, create, insert, delete, re-order, copy, paste, cut This class describes bookmarks in a PDF document.
add bookmarks to pdf; create bookmark in pdf automatically
VB.NET PDF Page Replace Library: replace PDF pages in C#.net, ASP.
edit, C#.NET PDF pages extract, copy, paste, C# page with another PDF page from another PDF file text, images, interactive elements, such as links and bookmarks.
editing bookmarks in pdf; pdf reader with bookmarks
155
Chapter 5   Animation
To turn your collection of images into a GIF89a animation, you 
need  an  application like  Stone Design’s  GIFfun  (for  Macintosh;  see 
Figure 5-7) or ULead’s GIF Animator (for Windows). 周ese tools orga-
nize the sequence of images to be shown, set timing and transparency, 
and (most importantly) let you save the  final GIF  file in  the proper 
format. See Chapter 13 for more details about animated GIF files and 
where to use them.
Figure 5-7 
Many applications are available for Windows and Mac that will help 
build animated GIF files. Shown here is GIFfun for Mac, free from Stone Design (www 
.stone.com/GIFfun/), for organizing images and creating animations.
Creating an Animated Scene
A creative committee organized a brief storyboard of a gorilla chasing a 
man. From a stock library containing many images licensed for unlimited 
use, a photograph was chosen of Manhattan’s Central Park where a bridge 
crossed a small river and high-rise apartments lined the horizon. 周e chase 
scene would occur across the bridge. To produce frames of the running 
man, a real actor was videotaped running in place against an Ultimatte 
156
Multimedia: Making It Work
chroma-keyed blue background in  a studio; a few  frames of this were 
grabbed, and the blue background was made transparent in each image. 
周e gorilla was difficult to find, so a toy model dinosaur about 25 centime-
ters tall was used; again, a few frames were captured and the background 
made transparent to form a composite. 周at was all that was required for 
image resources.
As illustrated in Figure 5-8a, the background was carefully cut in half 
along the edge of the bridge, so that the bridge railing could be placed 
in front of the runners. 周e running man was organized in a series of six 
frames that could be repeated many times across the screen to provide 
the pumping motions of running. 周e same was done for the dinosaur, to 
give him a lumbering, bulky look as he chased the little man across the 
bridge (see Figure 5-8b). 周e result, in Figure 5-8c, was simple and quickly 
achieved.
The animation storyboard called for 
a photo-realistic monster chasing 
a running man through a city park 
amid screams of terror. The man was 
already in Director, running in great 
strides across an arched footbridge 
in a woodsy scene with high-rises 
in the background; he even looked 
over his shoulder a few times in 
panic. We were scouting around 
for an effective Godzilla when a 
friend dropped by with a motorized, 
12-inch Tyrannosaurus Rex from 
Toys’R’Us. It was perfect—opening 
a toothy, gaping mouth every few 
steps as it lumbered along on C 
batteries.
I took the dinosaur and a video cam-
era home to the delight and fascina-
tion of my three-year-old daughter, 
who helped rig a white sheet in 
front of the living room fireplace 
and a cardboard-box runway where 
Mr. TRex could strut his stuff before 
the camera. A couple of lamps gave 
him a sweaty sheen. We recorded 
about five minutes of video as my 
daughter happily retrieved Mr. TRex 
each time he nosed off the “cliff” at 
the end of the stage.
I grabbed a still image about every 
fourth frame of the recording and 
imported the resulting files into 
Director as cast members. They 
needed a little cleanup and scaling, 
but the fellow looked really convinc-
ing when he was finally scored to 
run across the bridge. Next day, I 
mixed a bunch of sounds—singing 
birds, running footsteps, screams, 
roars, sirens, and gunshots—and it 
was done.
First Person
157
Chapter 5   Animation
Figure 5-8 
The upper 
portion of the photo was placed 
behind the runners (b) and the 
lower portion in front of them, 
to make them appear to run 
behind the bridge railing (c).
b
c
158 
For your review, here’s a summary of the important 
concepts discussed in this chapter.
Define animation and describe how it can be 
used in multimedia
By definition, animation is the act of making 
■■
something come alive.
Depending on the size of the project, you can 
■■
animate the whole thing or you can just animate 
parts of it.
Visual effects such as wipes, fades, zooms, and 
■■
dissolves, available in most authoring packages, 
are a simple form of animation.
Animation is an object actually moving across, 
■■
into, or out of the screen.
Discuss the principles of animation
Animation is possible because of a biological 
■■
phenomenon known as persistence of vision and 
a psychological phenomenon called phi.
With animation, a series of images are changed 
■■
very slightly and very rapidly, one after the 
other, seemingly blending together into a visual 
illusion of movement.
Digital display video builds 24, 30, or 60 entire 
■■
frames or pictures every second. Movies on film 
are typically shot at a shutter rate of 24 frames 
per second.
Discuss the animation techniques of cel and 
computer animation and choose the correct file 
types for animations
Cel animation, an animation technique made 
■■
famous by Disney, uses a series of progressively 
different graphics on each frame of movie film.
Cel animation artwork begins with keyframes; 
■■
these are the first and last frames of an action.
Tweening is an action that involves creating 
■■
the frames to depict the action that happens 
between keyframes.
Computer animation programs typically employ 
■■
the same logic and procedural concepts as cel 
animation.
You can usually set your own frame rates on 
■■
the computer, but the rate at which changes are 
computed and screens are actually refreshed will 
depend on the speed and power of your display 
platform and hardware.
Kinematics is the study of the movement and 
■■
motion of structures that have joints.
Inverse kinematics is the process in which you 
■■
link objects such as hands to arms and define 
their relationships and limits, then drag these 
parts around and let the computer calculate the 
result.
Morphing is an effect in which one image 
■■
transforms into another.
Some file formats are designed specifically to 
■■
contain animations, and they can be ported 
among applications and platforms with the 
proper translators.
Create computer-generated animations from 
multiple still images
Multimedia authoring systems typically provide 
■■
tools to simplify creating animations within that 
authoring system.
Chapter 5 Review
■■
Chapter Summary
159 
周e most widely used tool for creating multi-
■■
media animations for Macintosh and Windows 
environments is Adobe’s Flash.
With the simplest tools, you can make a 
■■
bouncing ball to animate your web site using 
GIF89a.
Making animations appear natural requires a 
■■
basic understanding of the principles of physics. 
You should compose your animations using these 
principles, tempering them always with common-
sense physics to give them the ring of truth.
animated GIF (152)
animation (140)
cel (143)
cel animation (144)
color cycling (142)
easing (153)
inks (146)
inverse kinematics (147)
keyframe (144)
kinematics (146)
morphing (147)
path animation (142)
pencil test (144)
persistence of vision (141)
phi (141)
3-D animation (143)
translate (142)
tweening (144)
2-D animation (142)
2½-D animation (143)
Key Term Quiz
■■
An object seen by the human eye remains chemically mapped on the retina for a brief time after viewing. 
1. 
周is phenomenon is called _______________.
周e human mind needs to conceptually complete a perceived action. 周is phenomenon is called 
2. 
_______________.
To make an object travel across the screen while it changes its shape, just change the shape and also move 
3. 
or _______________ it a few pixels for each frame.
周e animation technique made famous by Disney involves showing a different image for each frame. 周is 
4. 
technique is called _______________ animation.
周e first and last frames of an action are called _______________.
5. 
周e series of frames in between the first and last frames in an action are drawn in a process called 
6. 
_______________.
In computer animation terminology, _______________ usually refers to special methods that allow images 
7. 
to blend or otherwise mix their colors to produce special transparencies, inversions, and effects.
周e study of the movement and motion of structures that have joints is called _______________.
8. 
周e effect in which one image transforms into another is known as _______________.
9. 
Key Terms
■■
Documents you may be interested
Documents you may be interested