Web Site Building · Integrating Graphics · Animation

What this is about:

A visitor from the United Kingdom named Ian requested we transform his Radiology Group logo into an animated GIF by rotating the title text around the baby x-ray graphic. In this tip we'll describe the steps necessary to create a simple animated GIF from a static drawing.

Simple GIF Animation

Animated GIFs are one of the easiest ways to add pizzazz to your site. They require no special programming knowledge, they don't require plug-ins or special software, and they put far less strain on user's machines than do Java applets, JavaScript commands, and Shockwave or Flash animations.

An animated GIF file comprises a number of images or frames to be displayed successively, each described by its own GCE (Graphic Control Extension), preceded by a header whose content by default applies to all the frames. The GCEs allow the duration for which each frame is displayed to be specified in hundredths of a second. Some economy of data is possible where a frame need only rewrite a portion of the pixels of the display, because the Image Descriptor can define a smaller rectangle to be rescanned instead of the whole image.

Figure 1 below is the logo for the British Paediatric Radiology and Imaging Group sent to us by Ian. His original was larger than the sample we are using here for the demonstration, and more readable. To create the rotating effect, we used our favorite graphic editing software to rotate the text by 90, 180, and 270 degrees as shown in Figures 2, 3, and 4.

Figure 1

Rotate 90 Left
Figure 2

Rotate 180
Figure 3

Rotate 270 Left
Figure 4

You'll notice we erased the baby x-ray image from Figures 2,3,4. This was done to reduce the size in bytes of the final animated product. When designing animated GIFs it is a good idea for each frame to only reflect what has changed from the previous frame. This will save download time from your Web site. You design animated GIFs frame by frame. If you change a large area or a large part of the overall image from frame to frame, the browser will have to reload more of the GIF for each frame, increasing the file size. Try to make sure that only the necessary parts of the image change from frame to frame.

Animated GIF Switching to GIF animation software (there are many shareware products available for download from the Web), we inserted each of the four images as frames in the animation. We set the timer to display each frame for 15 hundredths of a second, and for this demonstration, set the animation to loop forever. In the final product we created for Ian we set the loop counter to 5 so the text will rotate around the baby 5 times, then settle into static position as in Figure 1 above.