Vol. 1, No. 19
Intro to GIF Animation

Is your homepage feeling a little static? Does the typical roadkill show more signs of life than your site? Fear not — you're not alone. There's a simple way to add a little spark to your pages, and that's with animation. Don't worry, you don't have to qualify as a Disney-level artiste to animate your site. In fact, we'll have you doing it in no time!

The most widespread form of Web animation, and arguably the easiest to implement, is the animated GIF, aka the GIF89. (Sure, DHTML is a contender, but cross-platform issues make working with it a pain.) It's not a terribly robust format — your online remake of The Matrix would be better served with some Flash content — but it's well suited for small animations with such minimal content as icons and diagrams. It has no support for sound, its file sizes can be a bit large, and color subtleties can get lost, but it's viewable on a large majority of browsers without any plug-ins, and it's easy and cheap to make.

You're familiar, no doubt, with the still GIF. The GIF89 is a group of GIF images combined in a single file, along with relevant image-display information. Each image acts as a frame of the animation; when they're displayed in sequence, the illusion of motion is created, just as in a cartoon or a picture flipbook. A GIF89 is coded with an IMG tag, just as you would code any other image.

To create animated GIFs, you'll need some software. If you're running a Mac, you're in luck: The software is free. Those with Windows will have to cough up a $20 fee to register the shareware. But it's worth it.

Let's begin. Mac users should download GIFBuilder from: ftp://ftp.cmp.com/pub/filemine/gifbuilder-0.5.sit.hqx (or search for another download site). PC users, you'll need to get the GIF Construction Set (the Classic version is just fine). Both of these are relatively quick downloads. (Linux users can use such tools as Gifsicle and WhirlGif 2.01.)

Before you assemble your animation, you'll need to create the individual frames. This can be done with a paint program, by scanning in drawings, using modified images from a digital camera, or by many other methods. Save each frame as a regular GIF file. Now fire up your software. Both of these programs are very intuitive to use, but we'll walk you through the basics, with separate instructions for Mac and PC users:

Animating GIFs with GIFBuilder (For Mac users only)

The elegant GIFBuilder, with its streamlined interface, is a great program. It's so easy to create your first animated GIF, you'll be convinced you're doing something wrong. Just open the folder containing the frames you've created, start GIFBuilder, and drag the images into the program's "Frames" window. Save the resulting animation as a GIF file. Voila! As you'll soon learn, downloading and installing the program was the hardest part.

Select an image and use the "Options" menu to modify your animation. Use "Loop" to set the number of times the animation plays before freeze-framing on the last image. "Interframe Delay" sets the delay between each image. "Frame Optimization" helps reduce file size by automatically keeping the parts that stay the same from frame to frame and saving only the changes.

Another neat trick to lessen file size is to have the first frame of your image act as the background, with subsequent frames appearing as small, animated elements on top of it. (The subsequent frames appear transparent, except for areas containing action.) To do this, select the images in which you want areas of transparency. Then choose "Transparent Background" from the Options menu. Select "Other," and choose the image color that you want to be rendered as transparent. This color will become transparent in the animation, allowing the background, or the relevant part of the previous frame, to show through. That's all there is to it! Play around with the tool to pick up more neat tricks.

Animating GIFs with GIF Construction Set (For PC users only)

The easiest way to get started is to select "Animation Wizard" from the "File" menu. Like any wizard, it will prompt you with a series of questions, such as, "Do you want this GIF for a Web page?" (Hint: Yes.) "Do you want it to loop indefinitely or only play once?" (That one is up to you.)

Next you have to tell the wizard about the palette of colors you'll be using. Choose the one that best matches your images - it can be fine-tuned later. Then specify how quickly you want the animation to run; 100/100ths (or one second) is generally fine; with more users running fast computers, you might consider setting it at two seconds. Be warned that the program can only offer an approximation — the actual rendering will vary from browser to browser. Choose the images you want to use, in the order in which you want them to appear. When you're done, click "Next," and the animation will be rendered automatically.

The next screen shows the information that makes up the GIF89 file. You can see the names of your images there, along with control blocks with which you can modify the images. There's also a "Loop" command and a "Header" block, which specifies the size and global palette for the animation. Click "View" to see your animation play; right-click when you're done watching it.

That's that! Remove frames from your animation by highlighting them and clicking "Delete." To add more frames later, figure out where in the animation you'll want them to appear; then select "Insert" and "Image." You can adjust the timing of individual frames by selecting the control block before the image you want to modify and clicking "Edit." You can also insert comments for future editors (or thieves, as the case may be) of your GIF89 to read.

Another neat trick is to lessen file size by having the first frame of your image act as the background, with subsequent frames appearing as small, animated elements on top of it. (The subsequent frames appear transparent, except for areas containing action.) To do this, edit the control block for the image in which you want areas of transparency. Then choose "Transparent Color." Click on the eyedropper icon and select a color in the image. Finally, set "Remove By" to "Background." This color will become transparent in the animation, allowing the background, or the relevant part of the previous frame, to show through. That's all there is to it. Play around with the tool to pick up more neat tricks.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

With a little practice, you'll be able to achieve an optimal balance between having too many frames (resulting in huge files), and too few (causing jerky animation). There are a lot of ways to make animations look smoother without adding extra frames. For example, if you want to make a dog appear to run from point A to point E, there's no need to illustrate the dog at points A, B, C, D, and E. Instead, depict the dog at points A and E, and insert one or two blurred running-dog images in between! Check out Webmonkey's strategies guide for more brilliant ideas.

A single animation may very well run at different speeds on different browsers. Be sure to check how your animations look on a few different platforms. If precise timing is crucial to your application (say, an animated stopwatch that really works), GIF89 may not be right for you.

Few commercial cat toys are more captivating than a simple ball of aluminum foil fastened to a durable string.

RESOURCES:

All About GIF89a

Gifsicle: Animated GIFs for UNIX

Webmonkey's GIF Construction Set Tips

Webmonkey's GIF89 Animation Tutorial

Webmonkey's GIFBuilder Tips

Handcrafted Archive