A Complete Guide to Web Design

(やまだぃちぅ) #1
Creating Animated GIFs 325

Animated GIFs

Creating Animated GIFs

Web Design in a Nutshell, eMatter Edition

Transparency


You can set transparency for each frame within an animation. Previous frames will
show through the transparent area of a later frame—if disposal methods are set
correctly.


If the background frame is made transparent, the browser background color or
pattern will show through.


There is a bug in early versions of Netscape in which transparency
only works with background patterns, not colors specified in HTML.

Don’t be surprised if the transparent areas you specified in your original graphics
are ignored when you import them into a GIF animation utility. You may need to
set transparency in the animation package. GIFBuilder offers the following
options:


None
No transparency.


White
All the white pixels in the image will become transparent.


Based on first pixel
The color of the “first pixel”—that is, the top left pixel, the one at coordinates
0,0—is transparent. This is a handy option since you’ll often have an image in
the center and the four corners will be transparent.


Other
This option lets you select one of the palette colors as transparent.


Disposal Methods


Disposal method gives instructions on what to do with the previous frame once a
new frame is displayed.


Most GIF animation utilities offer “optimization,” a file-size reducing process that
takes advantage of the fact that previous frames will “show through” transparent
areas of a later frame. In order for this process to work, disposal method must be
set to Do Not Dispose (or Leave Alone, Leave As Is, etc.). With this method, areas
of previous frames continue to display unless covered up by an area in a
succeeding frame. The four choices are:


Unspecified (Nothing)
Use this option to replace one full-size, nontransparent frame with another.


Do Not Dispose (Leave As Is)
In this option, any pixels not covered by the next frame continue to display.
Use this when you want a frame to continue to show throughout the
animation.

Free download pdf