CSc 050: Creating Animated GIFs

Animated GIFs are pictures with self-contained animation. They are also surprisingly quite simple to create. Like most animation, the illusion of movement is created by placing several still pictures together into one GIF file. The still pictures are called frames (not to be confused with frames as defined in our frame tutorial.) The still pictures are then shown in rapid succession. We have our own animated GIF Gallery if you'd like to see our collection.

An Example

For example, the animation above was created by using these four frames:

All that is required of you is to create the individual frames. Software is available which will take care of the rest of the animation for you. For Macs, a program called GIFBuilder can be used to create animated GIFs. For PCs, GIF Construction Set will do the job. You can download GIFBuilder or download GIF Construction Set right now.

Once you have the frames, using one of these programs to do the animation is quite simple. For GIFBuilder, use the Add Frame command in the File menu to add the individual stills to the main window:

You can then use the Animation menu to view the animation. Under the Options menu, use the Loop command to control how long the animation lasts and use the Interframe Delay... command to control the speed of the animation. Save your picture, and you're ready to place it into your own web page via the <img> tag. That's it!

Back to Tutorial Index