How to make...

Animated Gifs

The following is a quick exercise to demonstrate how animations for the web (animated gifs) can be created. If you would like help with any of the instructions, please feel free to ask me (Hilary). Enjoy the session!

1. Come up with an idea. For this demonstration, I've selected the FLEAT III whale icon (currently on the conference page).

2. Design the frames. There are various applications in which you can create the frames for your animation. It's a good idea to use a program which is capable of exporting it's color palette in CLUT (color look up table) format; Photoshop, for instance. For this demonstration I've created the frames for you in photoshop which can be located in the Frames folder. Each image has been indexed with the same color palette and then exported as a normal 'gif89' file. The CLUT file (Color Palette) can be located next to the Frames folder.

3. Assemble the frames into a single file. I have chosen the application 'Gif Builder' by Yves Piguet to serve this purpose. A copy of Gif Builder can be downloaded from http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif home/GifBuilder.html

1. Launch the application by double-clicking on the Gif Builder 0.4 icon.
2. Drag and drop all the frames from the Frames folder into the default window. (You'll notice that the frames will maintain their numerical order).
3. At this point, you should be able to use the mouse or the arrow keys to scroll through the list of frames which will change the view in the 'untitled.gif' window. This allows you to preview the animation.
4. The next step is to storyboard your animation. A storyboard is the events which will transpire during the animation. In this example, my storyboard is to have the words 'Delegate Information' fade out, the FLEAT Whale to appear and disappear, for the words to fade in and then to repeat indefinitely.
5. If you scroll through the list of frames, you should see the words: 'Delegate Information' fade out and the FLEAT Whale pop up. The easiest way to complete the animation is to duplicate frames 001 - 011 (since 012 is the whale at the highest point). The goal is to have the last frame of the animation smoothly loop to the first frame. To select multiple frames, hold the shift button while clicking on frame 001 and then click on frame 011. While the frames are selected, go up to the menu Edit and select Duplicate Selection.
6. Order the frames from 001 - 012 - 001 by selecting and dragging the frames.
7. The next item is to set the 'interframe delay', which determines the length of time (in 100ths of seconds) a particular frame is to de displayed.
8. Highlight and set frames 001 (first frame), 012 (middle frame) and 001 (last frame) to an interframe delay of 150 by choosing Options > Default Interframe Delay...
9. Next, select Options > Colors > Load Palette and load in the file Color Palette. (This way, the program is using a specific assortment of colors, as opposed to system colors, etc).
10. Select Options > Loop... and set the animation to loop 'forever'.
11. Select Options > Frame Optimization. (This feature will save file space on the final animation).
12. Finally, select File > Save and save the file to the desktop as Fleat.gif.
13. Drag the new file over the Netscape icon to view!

You can check the file size of the animation by selecting the file and choosing File > Get Info.

Please feel free to ask me any technical questions you may have about animations. You are welcome to keep this paper and to write me email.