Animation Tips and Techniques - Part One
I've been mulling around some ideas for miscellaneous
tips and techniques for animation for awhile, now, and
came up with a few here. Animation software has really
improved this past year or so. It's a lot easier than
it used to be. Adobe® ImageReady and Macromedia®
Fireworks® are two of my favorites, but there's
also Jasc® Animation Shop (packaged with Paint
Shop Pro) which is also very user-friendly. I
really can't keep up with all of them so check here
E. Frazier's software page for a more complete list.
Anyway, here are the tips:
Approach your animation project or think about it as
being made up of two parts or steps:
A. First create the frame images
B. Then assemble the animation
These steps break down very conveniently this way because
you will use distinctly different kinds of software
applications for each. You can use an image editor (such
as Adobe Photoshop®, Jasc
Paint Shop Pro or Corel PHOTO-PAINT®)
or drawing program (such as CorelDRAW®,
or Deneba Canvas) or even a 3D program to create
the individual frames. Some 3D
programs will take care of the entire process from start
to finish and you won't need the animation program to
assemble the individual frame images.
Create frames in true color wherever possible (more
here on true color).
You can make the individual frames using the GIF89a
format but the main drawback with saving frames as GIF
files is that they have a limited color palette. The
GIF format only supports a maximum of 256 colors. With
the newer generation of animation software (such as
ImageReady or Fireworks), you can assemble the frames
using true color images (such as Photoshop PSD, Windows®
BMP or Macintosh® PICT) and
the software will figure out the best palette for the
finished animated GIF.
If the individual frames are saved as GIF files and
each consumes a full palette of colors (256) you can
get color flicker in the finished animation unless the
animation software can somehow compensate for the different
colors between the frames. Each GIF image has its own
palette and when you are saving frame images as GIF
files, there will be subtle differences between them.
The advantage to building the animation with true color
frames is that the colors in the finished palette aren't
committed until the GIF file is generated.
Sometimes you will want to save the frames as GIF images
when the animation has a transparent background, though.
Just be aware of the limitation of the GIF format.
Understand the main factors affecting GIF file size:
A. The size of the image (its dimensions or number
The number of pixels in the image is the biggest factor.
You can always downsample an image if you want a smaller
117 X 117 pixels
80 X 80 pixels
B. The total number of colors in the palette.
A GIF image with 64 or 128 colors will compress to
a smaller size than one using 256 colors:
C. Use a global color palette.
Some animation software applications support individual
palettes for each frame. This may be desirable but there
is a much greater chance for color flicker and slow
browser rendering. Always try to use a global palette.
D. Use "super compression" - redundant
When you load an animated GIF in an animation program,
some programs will reconstruct the frames so they are
visually appealing, rather than display them in their
Actual super compressed images in the frames (when
viewed in GIF Construction Set):
Not all programs support super compression (redundant
pixel removal on a pixel-by-pixel basis). Some programs
will remove redundant pixels only within a rectangular
region. Can you notice the difference between the following
frames and the ones shown above?
When the animation is played in a browser, the individual
frames are rendered one by one. Each frame is displayed
one after the other in order. Rather than storing an
entire image for each frame, super compression works
by identifying only the pixels that change from one
frame to the next. In effect, this is like stacking
the changed pixels on top of the previous frame as the
animation is played.
Note: For this to work the
redundant pixels must be in adjacent subsequent frames.
If one frame is exactly like another but not adjacent,
then there may not be any redundant pixels to remove.
Here To Continue...