How to Make an Animated GIF
Now that you're familiar with including images (either as GIF's or JPEG) on your web page, you can now start to make your images move. To accomplish this, we will be building an animated GIF file. This document tells you how to do this with a utility called GIFBuilder, which you will find in the Launcher.
An animated GIF is constructed by taking several pictures and gluing them together.
Here are some simple images I constructed with Adobe Photoshop. They were drawn
as little pictures that are 50 pixels wide and 80 pixels tall. Beside each picture, I've included the name of the file that contains the image:
| guy0.gif |
 |
guy1.gif |
 |
guy2.gif |
 |
guy3.gif |
 |
| guy4.gif |
 |
guy5.gif |
 |
guy6.gif |
 |
guy7.gif |
 |
| guy8.gif |
 |
guy10.gif |
 |
guy11.gif |
 |
guy12.gif |
 |
| guy13.gif |
 |
guy14.gif |
 |
guy15.gif |
 |
guy16.gif |
 |
| guy17.gif |
 |
guy18.gif |
 |
guy19.gif |
 |
guy20.gif |
 |
| guy21.gif |
 |
guy22.gif |
 |
guy23.gif |
 |
|
|
If we use these as frames of an animation we get a little movie. Press here to see the move (be ready, it's fast!).
The process of constructing this is fairly straightforward:
- Generate all the frames you want in your animation. I used PhotoShop, and saved all my images as GIF files, but you can save them as PICTs as well. (You can find all my GIF files in a folder in this directory called "guy".)
- Start GIFBuilder. You will find it in the Launcher.
- Return to the Finder (select it from the upper right menu) select all the GIF files you want included. You can select multiple files by holding down the shift key
when you click on each file. The order you select them is the order they will appear in the animation.
- Drag the GIF files from the folder into the GIFBuilder window called "Frames". You may have to drag some windows around to do this.
What should appear is something like this:
- In the "preview" window, we see one of the frames of the image:
If you pull down the Animation menu you can Run the animation. A shortcut for this is command-R (command is the key with the Apple on it). It should run for about 2.3 seconds, according to the Frames window.
- Now, pull down the File menu to Save (or hit command-S) and save the animation as an animated GIF. Make sure the end of the filename has ".gif" on it.
If you include this type of image in your web page, it runs as a little animation. Here are some other things that you can do:
- You can make your animation run in a loop by pulling the GIFBuilder options
menu downto "Loop...". Press Forever:
Here's what the animation looks like: 
- Right now, the guy jumps about 10 frames per second. You can change the speed by
- Selecting all the frames: press command-A, or pull down the edit menu to Select All.
- Pull down the Options menu to "Interframe Delay".
This animation runs as fast as possible: 
and this is one frame every 20/100's of a second: 
.
- Below, the left guy is opaque, and the right guy is transparent:
The transparent guy is nice if you have a complex background. To get this, do the following:
- Select all the frames in the Frames window.
- Select menu item Options/Transparent Background/White. This tells the computer to consider all the white pixels to be transparent.
- Select menu item Options/Disposal Method/Restore to Background. This tells the computer that between each frame, the background should be repainted.
That's it!
In this demonstration, I generated all the frames by hand with PhotoShop. There are other methods, though, that allow you to generate pictures automatically. I discuss this a little bit in my Introduction to POV.
By the way, you can download animated gifs off the web by holding the mouse down on the animated GIF (in Netscape). It will eventually pop up a window that allows you to Save this Image. Save the image to your local disk. You can use GIFBuilder to look at the individual frames, or change the way the animation looks. Try it with some of the animations above.
Or...try building an animation of your own today!
Thought:
What would happen if you scanned in one of your favorite cartoons and one picture in each frame. Set the interframe delay up to a large number, like 600.
Press here for an example.
