HTML | Animated GIFs 		Next

Animated GIFs

Files in GIF format normally display as static images. However, it is possible to construct animated GIF files. These contain a set of GIF images that most browsers (e.g., Netscape 2.0 and beyond, or Internet Explorer 3.0 and beyond), can display in sequence, thereby producing animation.


Some Examples of Animated GIFs

The images shown below are examples of simple animated GIFs. If they aren't moving, try reloading the frame. If they still don't move, your Browser may not support animated GIFs; get one that does!


Example: Constructing an Animated GIF

We are going to illustrate the construction of animated GIFs by assembling the first 4 frames of the "Singer Hornets" example given above into a simple movie using Animagic for Windows (which is shareware). In this tutorial, we will assume that the problem of creating the individual frames is a separate one that you have already solved. Typically the frames to be used might be collected from somewhere else, or produced with a drawing or painting program and saved in (or converted to) 256-color files in the formats that Animagic recognizes: GIF, PCX or BMP.

Collecting the Images

The first step in using Animagic is to collect the images that will comprise the animation. Here are the 4 images that we are going to use in the example:

Make a subdirectory in your main folder called "amimages". Now, beginning with the leftmost image and proceeding to the right and down by rows, copy each of these images into this folder by placing the mouse cursor over the image, holding the right button down and selecting "Save Picture as", and placing the file into the directory "amimages" with the default file name (these should be fig1.gif, fig2.gif, ... fig4.gif). As the names indicate, these are GIF files.

Assembling the Frames

Hide the browser window and open Animagic. You should have a display labeled "Frame List", as in the following figure:

The Frame List display should have no entries in it. If, as in the above figure, this is not true, select "New" from the "File" pulldown menu to clear it (see figure to the left). Now, add the GIF files that will compose the animated GIF to the frames display in the order that they should appear. To do this, use File/Open in Animagic; in the window that appears browse to the folder where you've placed the four files, and select them. (You only need to click on fig1.gif and then press the shift key and click on fig4.gif; all four files will then be selected. Be sure not to press the shift key until after you've clicked the first file name.) You should now see all four file names listed, each in quotes, in the "File name" field of this Animagic window as shown below:

Now click "Open" and the file names will appear in the Frame List window. If you look carefully, you will also see the four frames displayed in sequence (i.e., fig1.gif, then fig2.gif, etc.) in the main Animagic window. Finally, this window will display fig1.gif again, and its name will be highlighted in the Frame List window. The Frame List window should now resemble the following:

This is the list of frames in the sequence that they will be assembled into the animation.

Now select "Frame rate" in the "Animation" menu to set the speed at which your new animation will play. This menu selection opens a display that looks like the following:

The "All Frames" section lets you specify the number of milliseconds that each frame in the animated gif will be displayed. (If you want different frames to be displayed for different lengths of time, you can use the "Selected Frame" section of the display to set display times for individual frames.) The figure shows that each frame will be displayed for 500 milliseconds, or that two frames per second will be shown.

You can play your animation by either selecting "Play" in the "Animation" menu, or by clicking on the button with the triangle in the tool bar. If you wish to speed up or slow down the animation, just use the Frame rate display again.


Rearranging Frames

The frame sequence in the Animagic window can be rearranged by:

  1. clicking the file name that you want to move in the list,
  2. choosing "Cut" from the "Edit" menu,
  3. clicking at the spot where you want to move that frame, and
  4. clicking "Paste" from the "Edit" menu.

Alternatively, you can clear the contents of the Frame List window by choosing "New" from the File menu and then use File/Open for only the file that will be your new first frame. Then use "File/Append frames" to load each subsequent frame, one at a time, in whatever order you desire the frames to be played.


Setting Animation Options

Before making an animation, we may set a variety of options that control how the animation will run. These can be accessed from the "Options" pulldown menu (see figure at right). A more detailed account of the options and their effects (and, of course, of many other features of Animagic) is provided in the program's documentation. For our example we will leave all settings at their default positions, except Toggle "Optimizations/Crop to dirty rectangles" so that a check mark shows beside it, as in the adjacent figure. This tells Animagic to keep only things that change in succesive frames when it builds the animation, which can reduce the size of the final animation file by a substantial amount.

Note that by default an animation runs continously, looping over and over. You can have the animation stop after a certain number of iterations by using "Loop Count" in the Animation menu. ("Loop" is selected by default in the Options menu. If you simply toggle it off and save the animated gif, the animation will play only once in your browser.)



Testing the Animation

As we have already noted, the animation may be checked directly in Animagic by choosing "Play" from the "Animation" pulldown menu (see figure at left), or by using the arrow button in the toolbar. This should pop up a window, like the one shown below (where you also see the arrow button), in which the animation runs. It should loop continuously, since we chose that option.


 

You may also display the animation a step at a time: halt it by pulling down "Stop" from beneath the "Animation" menu (or click the black square button in the toolbar), and then step a frame at a time by selecting "Next frame" from beneath the "Animation" menu.


Saving the Animation as a Link

When you are happy with the animation, save it as an animated GIF file: from the "File" pulldown menu select "Save anim as" and save it in your folder under the name amtest.gif. Now let's see if we can display it with the Web Browser.

Open your homepage file and use the mouse to copy and insert the following text into a convenient place in the file: 

   <h2> Animated GIF Examples </h2>
   <center>
   <a href="amtest.gif">Example 1</a>
   <p>
   </center>

Save the file and open the Web Browser (reload if necessary). You should now have a link labeled "Example 1" in your homepage that displays the permanently looping animation when you click on it. (As a check, the animated GIF that you have just made should look like this.)

Making Your Own Animation

The preceding example shows you how to make an animated GIF; you now have all the expertise required to make your own animated GIFs, and you know how to link to them. So what are you waiting for!

Start thinking about the animation you would REALLY like to put on your homepage, and read the documentation included with Animagic (or check the program's online documentation) to see all the additional cool features that we didn't even discuss in this Tutorial (for example, how to create all sorts of special effects such as fades and dissolves in an animation).

Next