Animated Gifs

A GIF animation is basically one big GIF file that is composed of a bunch of smaller GIF files. They are easy to make; no programming is required. First, use a paint or drawing program to make the individual frames of the animation. Save each frame as a separate GIF file. Then, use a special piece of software to assemble the separate frames/files into one big GIF file. Throw it up on the web and Netscape does the rest. Here are some instructions for a very simple bouncing ball animation.

How does it work?

When you view an image created with GIF89a, it's downloaded once from the server and then reloaded from your browser's cache on subsequent iterations of the loop. This means that once a page is downloaded, the animations can loop even when you've pulled the plug on your network connection. One advantage that these animated GIFs have over a client-pull or server-push is that they won't tax your server. A server-push or client-pull requires that an image be downloaded for each frame of the animation, as well as for each iteration of the loop. This eats up bandwidth and possibly CPU cycles.

The following instruction are from Stevemd's Animation Instructions


Step 1 - Make the animation frames

Use a paint or drawing program to make the individual frames of the animation. I use Paint Shop Pro, a shareware program from JASC. Each frame is just like a page in one of those flipbooks that you probably made as a kid. Save each frame as a GIF file. Here are the frames/files for the bouncing ball animation;

When you save the individual frames, name them with sequential numbering scheme, for example, the above frames might be called BALL1.GIF, BALL2.GIF, BALL3.GIF, etc. This will be helpful later when you assembly the animation.

Step 2 - Assembling the Animation

I use Gifcon (GIF Construction Set for Windows) from Alchemy Mindworks to assembly the individual frames into a single, multi-image animation file. This is a shareware program for PCs. For Macs you can try the freeware program Gifbuilder.

The following instructions are for Gifcon.

  1. Launch Gifcon

  2. From the Menu select FILE|OPEN. (For now, don't use FILE|NEW)

  3. Select your first frame from the list of files (BALL1.GIF in this case). Click OK. The Gifcon window will now show a HEADER block and the IMAGE block for the first image. (By the way, the HEADER block shows the size of the animation screen. Since we used FILE|OPEN, the screen was automatically set to be the same size as the first image. If you used FILE|NEW, you would have to edit the HEADER block to the proper screen size by double-clicking on it.)

  4. Hightlight the IMAGE block by clicking on it once.

  5. From the MENU select INSERT|IMAGE

  6. Select your second frame from the list and click OK.

  7. Repeat steps 5 and 6 for the rest of the frames. Recent versions of Gifcon speeds up this process by letting you select and load several images at once. Just hold down the CTRL key while selecting the separate images. The files will be loaded in the order they are listed. You can also hold down the SHIFT key to select several contiguous files.

  8. After all the images are loaded, you need to insert CONTROL blocks above each of the IMAGE blocks. A CONTROL block effects only the next image - i.e. you need a CONTROL block for each image. To start, highlight the HEADER block just above the first IMAGE. From the Menu select INSERT|CONTROL to insert the first CONTROL block.

  9. Double click on the CONTROL block to open a dialog box. Here you can set the timing delay (in 1/100s of a second; i.e. 100 = 1 second) for the following IMAGE block. You can also set how the image is removed ('nothing' is a good choice for now. HELP can give you more information on the various options).

  10. In a similar way, INSERT and edit CONTROL blocks for all the other images. If all the CONTROL blocks are the same, you can speed up the process by using copy and paste (CTRL-C and CTRL-V) to insert the blocks. When you are done, your Gifcon window should look like the one on the right.

So now you have a working animation. You can view the animation by selecting VIEW from the GIFCON menu, though the animation may run rather slowly. When viewing it from Netscape, it will run at the proper speed.


Step 3 - Improving the Animation

This animation works fine but there is a major improvement you can make. So far in this example, each frame of the animation is a complete new frame. Often this results in a large file size that is slow to load. The animation seems to takes forever to play. Wouldn't it be nice if your browser could download a much smaller image of the ball and just move it around on the screen? Well it can - almost. Here's how;

Below are the first and second frames of the animation. In the second frame I've drawn a box around the portion of the frame where the change is occurring and then cropped the frame to that size. Using this smaller piece of the full frame reduces the size of the GIF animation file. There are two important things to remember here;

1) When you select the area to crop, you must not only include the new position of the ball but also include a "tail" that will cover up the previous image of the ball. Think of it as cropping out a sticker that you will paste on the previous frame. The sticker must cover up the old ball as well as place the ball in its new position.

2) When you crop the smaller image from the whole frame, make a note of the coordinates of the upper-left-hand corner of the cropping box. You will need it later to properly position the sticker on the screen in Gifcon.

1st Frame 2nd Frame
upper-left corner (0,13)		 Cropped 2nd Frame

Below I've shown the original full frames along with the improved cropped frames. Now assemble the animation using just the cropped frames. Don't forget to include the CONTROL blocks. (Note, the first frame is a full frame for this simple example. When you become more advanced, you can also crop the first frame like the others, but then you will also have to modify the HEADER block to have the correct screen size.)

Full
Frame
Cropped
Frame
Upper-left corner (0,0) (0,13) (19,37) (19,66)
Full
Frame
Cropped Frame
Upper-left corner (25,70) (44,56) (57,57) (75,65)

The last step in assembling the improved animation is to position the cropped images properly on the animation screen. To do this, double click on the IMAGE block. This opens a dialog box with a place to input the coordinates of the upper-left corner of the image. (You noted these when you cropped the image from the full frame - remember?). Do this for each frame that has a non-zero position.

Not all animations lend themselves to using this cropped approach. For example, my juggling animation doesn't lend itself to cropping because there is too much changing across the whole frame. The PEZ animation and the animated interview do make use of cropped frames to keep the file size down. Usually the file size will be significantly smaller when using cropped frames, sometimes by a factor of 5 or more, depending on the complexity of the animation.


ANIMATION TOOL SITES
For the PC
Photoimpact by Ulead Systems
Gif Construction Set
Microsoft GIF Animator (Win95 only)
Animagic GIF
GIF Loop [DOS]
VideoCraft GIF Animator by Andover
WhirlGIF by Tihomir Surdilovic [DOS]
GIF Wizard
Hot Dog Pro Version 3.0 - 8 frame limit
Gif-gIf-giF

For the Mac
GifBuilder by Yves Piguet
GIFmation by BoxTop Software, Inc.
GIF Wizard
Gif-gIf-giF

For UNIX
MultiGif by Andy Wardley

Animate It OnLine
Free Animated Banners from Andover Advanced Technologies
Text Animator by Neurotec
VRL's Muti-Graphic Format Imager
GIF Wizard reduces the size of your gif animations. Excellent. Try it!


Links

Happy Holidays