How to Make an Animated GIF 
by Richard Weers

Making an animated GIF (Graphics Interchange Format) can be as easy or difficult as we want to make it. The animation is simply a series of individual GIFs which are referred to as frames that are viewed in sequence making some kind of movement. The animation is limited only by our imagination and /or graphic skill. 

The animation can be as simply as a series of letters appearing one after the other as if they are being typed or it can be a moving image that is animated. The possibilities are unlimited as is evident by viewing many of the web sites today. 

However, in order to accomplish this animation we will need a graphics program to create the animation and save it in a GIF89a file along with an animation editor in which to assemble the animation. And finally we must place the animation into an HTML document by using the <IMG> tag: 

<IMG SRC="MyAnimation.gif" WIDTH=100 HEIGHT=50 ALT= "My Animation">  SRC="MyAnimation.gif" means this is the name and location of my GIF89a file.

 WIDTH=100 HEIGHT=50 means the size of the graphic on the page.

 ALT= "My Animation" shows what a test only browser will see.

Before we can go any further we need something to animated, so we must create a series of individual images. The more images we create for our animation the smoother the visual result will be; however, this will also result in a larger graphic file and will result in slower loading.

 Using a large number of colors will also create a larger file with the same results of slowing down the loading time for our animation. While GIF89a (which is the format being used for the animation) supports a maximum of 250 colors the fewer colors we use the less data there will be and the smaller we can make the graphic files. If we only use 4 colors, we can reduce the palette to only 2 bits and have up to a 75% decrease in the file size. 

Any graphic program that will save files in the GIF89a format can be used to created our images. PaintShop Pro is my favorite graphics program for creating animations and is relatively easy to use. An example of a simple animation of letters appearing one at a time spelling out a message can be viewed at http://lonestar.texas.net/~weersrg and was created very simply. 

Using PaintShop Pro the entire message THE CORRECT TIME IS was made using the text tool and saved as a GIF89a file for the final image. Next keeping the entire message on the screen, the letter S was erased and the image again saved as another GIF89a file with a new file name 2E Using the same procedure, each letter was erased (next the "I") and saved until the last file saved was the T. When all of these individual files were combined into the animated GIF file beginning with the file containing the "T" they spell out the message THE CORRECT TIME IS in an animated sequence. 

A much more complicated image I created is located at http://www.connecti.com/~voice and consist of a monkey walking back and forth across the screen. This was created by drawing and changing the position of the arms, legs and tail and facial features of the monkey for each of the many frames used for the animation.

 How do we get the animation? There is an excellent program (shareware) that can be used to place the images we have created into an animated GIF. GIF Construction Set by Alchemy Mindworks Inc. is an excellent program for creating the animation. It has an animation wizard which will take us step by step through the process of putting all the individual GIF files into one final GIF89a file that is our animation. Viewing and editing the animation is easily done within the program while we are creating it. Whatever we want our animation to do is easily accomplished in this program. The on screen Help provides all the assistance needed to create a simple or complex animation . 

The GIF89a file format that provides the means to create this animation has a built-in compression algorithm and some of the things we can do with the GIF89a format to create our animation are: 

  1. Specify how many 100ths of a second to wait before displaying the next frame 
  2. Have the animation wait for a user input 
  3. Specify a transparent color so that our animation does not have a visible background 
  4. Display lines of text that can be overlaid on a graphic image without damage to the underlying image.

  5.  

     

  6. Indicate how we want each of the frames to be removed after it has been displayed 
So with a little effort and creativity we can change our static homepages to reflect movement and animation. 

Richard Weers is an artist and one of the assistant webmasters for the Alamo PC home page. You can find out even more about Richard by visiting his home page at http://lonestar.texas.net/~weersrg