ANIMATION

Content
 Introduction
 Usage of Animation
 Animation by Computer
 Animation Techniques
 Animation File Formats
 Motion with SVG in HTML5
 Making Animations that Work
Introduction
 Animation makes static presentations
come alive.
 It is visual change over time and can add
great power to your multimedia projects
and web pages.
 Animation is an object moving across or
into or out of the screen.
The Power of Motion
 You can animate your whole project, or you can
animate here and there, accenting and adding
spice.
 For a brief product demonstration with little user
interaction, it might make sense to design the
entire project as a video and keep the presentation
always in motion.
 For speaker support, you can animate bulleted text
or fly it onto the screen, or you can use charts with
quantities that grow or dwindle; then, give the
speaker control of these eye-catchers.
 In a parts assembly training manual, you might
show components exploding into an expanded
view
The Power of Motion

 Visual effects such as wipes, fades, zooms, and dissolves are

available in most multimedia authoring packages, and some of
these effects can be used for primitive animation.
 For example, you can slide images onto the screen with a wipe, or
you can make an object implode with an iris/close effect.
 Figure shows an example of fire effects that you might choose to
add to your animation when using Corel’s MotionStudio 3D.
 But animation is more than wipes, fades, and zooms.
 Animation is an object actually moving across or into or out of the
screen; a spinning globe of our earth; a car driving along a line-art
highway; a bug crawling out from under a stack of papers, with a
screaming voice from the speaker telling you to “Shoot it, now!”
 Until video became more commonplace, animations were the
primary source of dynamic action in multimedia presentations.
The Power of Motion
Principles of Animation
 Animation is possible because of
 a biological phenomenon known as persistence of vision and
 a psychological phenomenon called phi.

 In persistence of vision, an object seen by the human eye remains

chemically mapped on the eye’s retina for a brief time after viewing.
 Combined with the human mind’s need (phi) to conceptually complete a
perceived action, this makes it possible for a series of images that are
changed very slightly and very rapidly, one after the other, to seemingly
blend together into a visual illusion of movement.
 The illustration shows a few cels, or frames, of a rotating logo. When the
images are progressively and rapidly changed, the arrow of the compass is
perceived to be spinning.
 When many images (frames) that differ only slightly are shown very
quickly one after another:
 The eye still retains the previous frame (persistence of vision).
 The brain connects the frames into continuous movement (phi phenomenon).
Principles of Animation

 Digital television video builds 24, 30, or 60 entire frames or

pictures every second, depending upon settings; the speed with
which each frame is replaced by the next one makes the images
appear to blend smoothly into movement.
 Movies on film are typically shot at a shutter rate of 24 frames
per second, but using projection tricks (the projector’s shutter
flashes light through each image twice), the flicker rate is
increased to 48 times per second, and the human eye thus sees a
motion picture.
 On some film projectors, each frame is shown three times
before the pull-down claw moves to the next frame, for a total
of 72 flickers per second, which helps to eliminate the flicker
effect: the more interruptions per second, the more continuous
the beam of light appears.
Principles of Animation

 Quickly changing the viewed image is the principle of an

animatic, a flip-book, or a zoetrope.
 To make an object travel across the screen while it changes its
shape, just change the shape and also move, or translate, it a
few pixels for each frame.
 Then, when you play the frames back at a faster speed, the
changes blend together and you have motion and animation.
 It’s the same magic as when the hand is quicker than the eye,
and you don’t see the pea moving in the blur of the sidewalk
swindler’s shells.
Usage of Animation

 Artistic purposes
 Storytelling
 Displaying data (Scientific visualization)
 Instructional purposes
Animation by Computer

 Using appropriate software and techniques, you can animate visual

images in many ways.
 The simplest animations occur in two dimensional (2-D) space;
more complicated animations occur in an intermediate “2½-D”
space (where shadowing, highlights, and forced perspective provide
an illusion of depth, the third dimension); and the most realistic
animations occur in three-dimensional (3-D) space.
 In 2-D space, the visual changes that bring an image alive occur on
the flat Cartesian x and y axes of the screen.
 A blinking word, a color-cycling logo (where the colors of an image
are rapidly altered according to a formula), a cel animation or a
button or tab that changes state on mouse rollover to let a user know
it is active are all examples of 2-D animations.
Animation by Computer
 These are simple and static, not changing their position on the screen.
Path animation in 2-D space increases the complexity of an animation
and provides motion, changing the location of an image along a
predetermined path (position) during a specified amount of time (speed).
 Authoring and presentation software such as Flash or PowerPoint provide
user-friendly tools to compute position changes and redraw an image in a
new location, allowing you to generate a bouncing ball or slide a
corporate mascot onto the screen.
 Combining changes in an image with changes in its position allows you
to “walk” your corporate mascot onto the stage. Changing its size from
small to large as it walks onstage will give you a 3-D perception of
distance.
Animation by Computer

 In 2½-D animation, an illusion of depth (the z axis) is added to

an image through shadowing and highlighting, but the image
itself still rests on the flat x and y axes in two dimensions.
 Embossing, shadowing, beveling, and highlighting provide a
sense of depth by raising an image or cutting it into a
background.
 Zaxwerks’ 3D Invigorator ([Link]), for example,
provides 3-D effects for text and images and, while calling
itself “3D,” works within the 2-D space of image editors and
drawing programs such as Illustrator, Fireworks, and After
Effects from Adobe and PaintShop from Corel.
Animation by Computer
 In 3-D animation, software creates a virtual realm in three dimensions,
and changes (motion) are calculated along all three axes (x, y, and z),
allowing an image or object that itself is created with a front, back,
sides, top, and bottom to move toward or away from the viewer, or, in
this virtual space of light sources and points of view, allowing the
viewer to wander around and get a look at all the object’s parts from all
angles.
 Such animations are typically rendered frame by frame by high-end 3-D
animation programs such as NewTek’s LightWave or Autodesk’s Maya.
 Today, computers have taken the handwork out of the animation and
rendering process, and commercial films such as Shrek, Coraline, Toy
Story, and Avatar have utilized the power of computers.
Animation Techniques
 When you create an animation, organize its execution into a
series of logical steps.
 First, gather up in your mind all the activities you wish to
provide in the animation.
 If it is complicated, you should create a written script with a
list of activities and required objects and then create a
storyboard to visualize the animation.
 Choose the animation tool best suited for the job, and then
build and tweak your sequences. This may include creating
objects, planning their movements, texturing their surfaces,
adding lights, experimenting with lighting effects, and
positioning the camera or point of view.
 Allow plenty of time for this phase when you are experimenting
and testing.
 Finally, post-process your animation, doing any special
renderings and adding sound effects.
Animation Techniques
Cel Animation:
 The animation techniques uses a series of progressively different
graphics or cels on each frame of movie film (which plays at 24
frames per second).

 A minute of animation may thus require as many as 1,440

separate frames, and each frame may be composed of many layers
of cels.

 The term cel derives from the clear celluloid sheets that were
used for drawing each frame, which have been replaced today by
layers of digital imagery.
 Keyframes refers to the first and the last frame of
the animation.
 The frames in between the keyframes are drawn in
a process called as tweening.
 Tweening: It is an activity that requires calculating
the number of frames between keyframes and the
path the action takes, and then actually sketching
with pencil the series of progressively different
outlines.
 As tweening progresses, the action sequence is
checked by flipping through the frames.
Animation Techniques
Cel Animation:
 Cel animation artwork begins with keyframes (the first and last
frame of an action).
 For example, when an animated figure of a woman walks across
the screen, she balances the weight of her entire body on one foot
and then the other in a series of falls and recoveries, with the
opposite foot and leg catching up to support the body.
 Thus the first keyframe to portray a single step might be the
woman pitching her body weight forward off the left foot and
leg, while her center of gravity shifts forward; the feet are close
together, and she appears to be falling.
 The last keyframe might be the right foot and leg catching the
body’s fall, with the center of gravity now centered between the
outstretched stride and the left and right feet positioned far apart.
Animation Techniques
Cel Animation:
 The series of frames in between the keyframes are drawn in
a process called tweening.
 Tweening is an activity that requires calculating the number
of frames between keyframes and the path the action takes,
and then actually sketching with pencil the series of
progressively different outlines.
 As tweening progresses, the action sequence is checked by
flipping through the frames.
 The penciled frames are assembled and then actually filmed
as a pencil test to check smoothness, continuity, and timing.
Animation Techniques
Cel Animation:
 The penciled frames are assembled and then actually
filmed as a pencil test to check smoothness, continuity,
and timing.
 When the pencil frames are satisfactory, they are
permanently inked, photocopied onto cels, and given
to artists who use acrylic colors to paint the details for
each cel.
Animation Techniques
 Women were often preferred for this painstaking
inking and painting work as they were deemed patient,
neat, and had great eyes for detail.
 In the hands of a master, cel paint applied to the back
of acetate can be simply flat and perfectly even, or it
can produce beautiful and subtle effects, with
feathered edges or smudges.
Animation Techniques
Cel Animation:
 The cels for each frame of our example of a walking
woman— which may consist of a text title, a background,
foreground, characters (with perhaps separate cels for a left
arm, a right arm, legs, shoes, a body, and facial features)—
are carefully registered and stacked.
 It is this composite that becomes the final photographed
single frame in an animated movie.
 To replicate natural motion, traditional cel animators often
utilized “motion capture” by photographing a woman
walking, a horse trotting, or a cat jumping to help visualize
timings and movements.
Cel Animation
Animation Techniques
Computer Animation
 Computer animation programs typically employ the
same logic and procedural concepts as cel animation
and use the vocabulary of classic cel animation—terms
such as layer, keyframe, and tweening.
 The primary difference among animation software
programs is in how much must be drawn by the
animator and how much is automatically generated by
the software as in figure.
 In path based 2-D and 2½-D animation, an animator
simply creates an object (or imports an object as clip
art) and describes a path for the object to follow.
Animation Techniques
Computer Animation
 The computer software then takes over, actually creating the
animation on the fly as the program is being viewed.
 In cel-based 2-D animation, each frame of an animation is
provided by the animator, and the frames are then stitched
(usually with some tweening help available from the
software) into a single file of images to be played in
sequence.
 Creabit Development’s GIF Animator ([Link]-
[Link]) and Alchemy Mindworks’ GIF Construction
Set Professional ([Link]) simply string
together your collection of frames.
Animation Techniques
Animation Techniques
Computer Animation
 For 3-D animation, most of your effort may be spent in
creating the models of individual objects and designing the
characteristics of their shapes and surfaces.
 It is the software that then computes the movement of the
objects within the 3-D space and renders each frame, in the
end stitching them together in a digital output file or
container such as an AVI or QuickTime movie.
Animation Techniques
Computer Animation
 On the computer, paint is most often filled or drawn with
tools using features such as gradients and anti-aliasing.
 The word inks, in computer animation terminology, usually
means special methods for computing color values,
providing edge detection, and layering so that images can
blend or otherwise mix their colors to produce special
transparencies, inversions, and effects.
Animation Techniques
Computer Animation
 You can usually set your own frame rates on the computer.
2-D cel-based animated GIFs, for example, allow you to
specify how long each frame is to be displayed and how
many times the animation should loop before stopping.
 3-D animations that are output as digital video files can be
set to run at 15, 24, or 30 frames per second.
 However, the rate at which changes are computed and
screens are actually refreshed will depend on the speed and
power of your user’s display platform and hardware,
especially for animations such as path animations that are
being generated by the computer on the fly.
Animation Techniques
Computer Animation
 Although your animations will probably never push the
limits of a monitor’s scan rate (about 60 to 70 frames per
second), animation does put raw computing horsepower to
task.
 If you cannot compute all your changes and display them as
a new frame on your monitor within, say, 1/15th of a
second, then the animation may appear jerky and slow.
 when the files include audio, the software maintains the
continuity of the audio at all cost, preferring to drop visual
frames or hold a single frame for several seconds while the
audio plays.
 Kinematics is the study of the movement and motion of
structures that have joints, such as a walking man.
 Animating a walking step is tricky: you need to calculate
the position, rotation, velocity, and acceleration of all the
joints and articulated parts involved—knees bend, hips flex,
shoulders swing, and the head bobs.
 Surface textures can then be applied to create muscle bound
hulks or smooth chrome androids.
 Inverse kinematics : is the process by which you
link objects such as hands to arms and define their
relationships and limits (for example, elbows cannot
bend backward).

 Once those relationships and parameters have been

set, you can then drag these parts around and let the
computer calculate the result
 Morphing is a popular effect in which one image
transforms into another.
 Morphing applications and other modeling tools that offer
this effect can transition not only between still images but
often between moving images as well.
 The morphed images were built at a rate of eight frames per
second, with each transition taking a total of four seconds
(32 separate images for each transition), and the number of
key points was held to a minimum to shorten rendering
time. Setting key points is crucial for a smooth transition
between two images.
 The point you set in the start image will move to the
corresponding point in the end image—this is important for
things like eyes and noses, which you want to end up in
about the same place (even if they look different) after the
transition. The more key points, the smoother the morph.
Animation File Formats
 Some file formats are designed specifically to contain
animations, so they can be ported among applications and
platforms with the proper translators.
 Those formats include
 Director (.dir and .dcr),
 AnimatorPro (.fli and .flc),
 3D Studio Max (.max),
 GIF89a (.gif), and
 Flash (.fla and .swf).
 Because file size is a critical factor when downloading
animations to play on web pages, file compression is an
essential part of preparing animation files for the Web.
 A Director’s native movie file (.dir), for example, must be
preprocessed and compressed into a proprietary Shockwave
animation file (.dcr) for the Web.

 Compression for Director movies is as much as 75 percent or

more with this tool, turning 100K files into 25K files and
significantly speeding up download/display times on the Internet.

 Flash, widely used for web-based animation, makes extensive

use of vector graphics to keep the post-compression file size at
absolute minimums.

 As with Director, its native .fla files must be converted to

Shockwave Flash files (.swf) in order to play on the Web. To
view these animations within a web page, special plug-ins or
players are required
 3-D animations, the individual rendered frames of an
animation are put together into one of the standard
digital video file containers, such as the Windows
Audio Video Interleaved format (.avi), QuickTime
(.qt, .mov), or Motion Picture Experts Group video
(.mpeg or .mpg)
Motion with SVG in HTML5
 HTML5 can deliver in a browser animation built
within an SVG (Scalable Vector Graphics) file, where
graphic elements can be programmed to change over
time ([Link]/TR/SVG11/[Link]).
 In the following simple code, a patch of red expands
within a rectangle, filling it in three seconds.
 Type this code into a text processor and save it as
plain text with a .svg extension.
 Open the file with File | Open from an HTML5-
compliant web browser to see it work. Change some
parameters (duration, colors, location) and reload or
refresh it to see the effects of your changes.
Motion with SVG in HTML5
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.
 Although disabled in Apple’s popular iOS, Adobe’s Flash
remains the most widely used tool for creating multimedia
animations for Macintosh and Windows environments and
for the Web.
Making Animations that Work
 Flash directly supports several 2½-D features,
including z-axis positioning, automatic sizing and
perspective adjustment, and kinematics. External
libraries can extend Flash’s capabilities: open source
Papervision3D
Making Animations that Work
❖ 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 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
❖ A Bouncing Ball
▪ 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.

▪ The individual 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
❖A Bouncing Ball
▪ 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
❖A Bouncing Ball
▪ 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 commonsense
physics to give them the ring of truth.
❖A Bouncing Ball
▪ Unless your animation requires precision, ignore the hard
numbers you learned in high school (like 32 feet per second
per second), and 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.
▪ This is illustrated in Figure. In the case of a perpetual-
motion bouncing ball (even better 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.
❖A Bouncing Ball
▪ You can use the same images for downward motion as you
use for upward—as in frames 11 through 18 in Figure —by
reversing them.
▪ You might also add a squash frame when the ball hits the
floor. The amount of squash would be determined by the
type of ball—a steel ball or a balloon or a very soft rubber
ball.
▪ The 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.
❖A Bouncing Ball
▪ 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.
▪ Then 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.
▪ The 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.
▪ Then 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.)
❖A Bouncing Ball
❖A Bouncing Ball
▪ This 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.
▪ The smaller the better if users will be downloading this
animated GIF file into their web browsers.
❖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.
▪ The 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 chroma-keyed
blue background in a studio; a few frames of this were grabbed,
and the blue background was made transparent in each image.
▪ The gorilla was difficult to find, so a toy model dinosaur about
25 centimeters tall was used; again, a few frames were captured
and the background made transparent to form a composite. That
was all that was required for image resources.
❖Creating an Animated Scene
▪ 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.
▪ The 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.
▪ The same was done for the
dinosaur, to give him a
lumbering, bulky look as he
chased the little man across the
bridge
THANK YOU