Exercise 12 - Animated GIFS


  1. Examples
  2. Yahoo's guide to GIF animation sites
  3. GIF animation on the WWW (a tutorial)
  4. Animated Gif Artists Guild - Winner's Gallery
  5. GIFBuilder for the Macintosh
  6. Gif Construction Set for Windows ($20)
GIF animation exploits a little used ability of the GIF format that allows more than one image within a single file, and gives us the ability to present a kind of a "slide show" contained in just one graphic. Unlike Java, Shockwave and CGI scripts, they are easy to create and don't place great demands on the web server or the browser. The format is actually referred to as GIF89a, and was first created back in 1989. At present - animated GIFs are used only on the World Wide Web, and most web browsers support them. Animated GIFs are self contained, and rely on no other helpers or plug-ins to play them. They are placed onto your web page with the IMG tag, just as are other GIFs. They do not support sound or interactivity, however. We'll use Photoshop to create some pictures and GIFBuilder to assemble the images and export them as GIF89a.

Step 1. Draw each frame of the animation

  1. We are not going to concern ourselves with perfect artwork, we just want a series of pictures. For this we'll use Photoshop.Open the Photoshop application on the hard drive, and create a new file 1 inch high and 1 inch wide.
  2. Using the brush tool, start to draw a circle. Make a short curve. SAVE AS.... 1.
  3. Repeat until you've completed the circle in about 5 steps, name each one consecutively (1 through 6). Add a final element in the center if you like in the last drawing.
1. 2. 3. 4. 5. 6.

Step 2. Collect frames in GIFBuilder

  1. Launch GIFBuilder, creating a new file. Drag your individual images, one at a time and in numerical order, into the FRAMES WINDOW. If you get them out of order, you can drag them into their correct position.
  2. Under OPTIONS, the only one we'll worry about now is LOOP....FOREVER.
  3. Choose ANIMATION>START to view your work.
  4. Save as circle.gif

Step 3. Place your animation on your web page using <IMG SRC="circle.gif">


Return to Main Menu
© 1998 - E. Barbara Meyer - EdTech Center - School of Life Sciences - University of Illinois - Urbana, IL USA - http://www.life.uiuc.edu/edtech/html/