Images

Animated GIFs

Image Formats | Creating Images | Changing Format | Transparent Backgrounds | Background Tiling | Animated GIFs | Image Resources | Screen Captures | Going Further

Most files in GIF format display as static images. However, it is possible to construct animated GIF files. These contain a set of GIF images that most browsers 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!

Animated GIF files have an advantage over Java and CGI script animations in that they do not require server or client software beyond that of the basic Web server and browser. Thus, they are the simplest means to implement animation. Of course, they can only produce animation; if one wants to go beyond this (for example, to add sound or allow user interaction) it is necessary to employ more sophisticated techniques.

The two examples shown above illustrate the use of animation to amuse and to catch a reader's attention. But animation can also serve a more direct educational purpose. For example, here are three examples taken from an introductory astronomy class:

1. An illustration of why the planets sometimes exhibit retrograde motion in our sky (a period when they appear to drift opposite to their usual direction of motion with respect to the background stars).

2. An illustration that planets move faster on their elliptical orbits when they are nearest the Sun; this is called Kepler's 2nd Law.

3. An example combining humor with teaching: the (almost certainly apocryphal) discovery of the theory of gravitation by Isaac Newton.

Notice particularly that the first two examples provide simple illustrations of concepts that would be much harder to convey using only words or even static pictures.

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 shown above; we will use a program known as Animagic (it 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 they might be 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.

Animagic is available for download here. (The downloaded file is in a ZIP format. Before being used, the file must be "unzipped". This process will require a program such as WinZip to expand the file so that Animagic can be used.)

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 included 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:

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.)

How to Make the Original Frames

We have intentionally left open the question of how the original frames are produced, since that will vary with your preferences and the availability of drawing and painting software on the computers that you normally use. The examples shown here were drawn with Freehand (which is a relatively expensive but professional-quality drawing program), simply because it was available. Much less expensive programs would have worked as well for a simple example like this.

In addition, many programs that you may have already, such as Paint, include rudimentary drawing tools that are often adequate for simple animation frames. As an easy test of your newfound skills, you might try using Paint to create some frames for animating the piece of graffiti that we made earlier in the Changing Formats section. (Here is what the final animation might look like.) The main criteria is that the program you use must be able to output in GIF, PCX, or BMP formats (or in a format that can be converted to those by another piece of software).

Note that in simple animations the successive frames are very similar to each other. One can use that to advantage in making the frames by starting with a master and then just making small modifications to obtain each successive frame. For example, a simple revolving image can be constructed using a single drawing that is just rotated in each successive frame, and the motion of an object can be simulated by drawing the object once, and then just changing its position in successive frames. Another option to simulate motion is to make the frames all copies of the same image, and then to use the capability under the "Frames" menu to offset each successive frame from the previous one by a specified amount to simulate motion. However, in this case one may have problems with the redrawing of the background.

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, 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 to see all the additional cool features that we didn't even discuss in this Tutorial.

However, before leaving this subject, let's temper the enthusiasm slightly with the observation that gee-whiz gimcracks like animation are most effective when used sparingly if their primary purpose is to attract the reader's attention. Don't overdo it, or your readers will be distracted from the content by the flashing lights, or (worse) become so annoyed that they leave and don't come back. Use some taste, and remember that there is nothing whatsoever wrong with making your page attractive and interesting, as long as the bottom line is CONTENT.

Animated GIF Archives on the Web

It's generally more fun to make your own, but you can also download a variety of animated GIFs from the Web (from sites that give permission to do so). Here is a gallery of animated GIFS. You can find many others by using a search engine. The animated GIFS at these sites can also give you some ideas about making your own.