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 some browsers (e.g., Netscape 2.0 and beyond, or Internet Explorer 3.0), can display in sequence, thereby producing animation.

Some Examples of Animated GIFs


The images shown to the right and left 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 to the animation, or to allow the user to interact with the image) it is necessary to go to more sophisticated methods like CGI scripts or Java.

The two examples shown above illustrate the use of animation to amuse and to catch a reader's attention. But animation can serve a more direct educational purpose too. 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 of these examples illustrate in simple terms 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 given above into a simple movie using GifBuilder for the Mac, which is freeware for individual users. In this tutorial, we will assume that the problem of creating the individual frames is a separate one that you have already solved (more about that below). 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) the formats that GIFBuilder recognizes: GIF, TIFF, or PICT.

Collecting the Images

The first step in using GifBuilder 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 "gbimages". 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 button down and selecting "Save this Image As", and placing the file into the directory "gbimages" 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 GifBuilder by double-clicking on its icon. You should then have a display labeled "Frames", as in the following figure:

The frames 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:

(1) If your computer is using newer Mac operating systems that support "Drag and Drop" functions, just open the folder that contains the GIF images, use the mouse to drag their icons from that folder, and drop them into the Frames window of GifBuilder (you may move entire groups of files by selecting then all and dragging to the GifBuilder window; they will be placed in the GifBuilder window in the order that they were selected). As each file is dropped, it will appear in a list in the Frames window. When you add the first frame, another window will also pop up showing the frame; see the last figure on this page.

(2) If the above operation doesn't cause anything to happen, your computer isn't configured to implement "Drag and Drop". In that case, you have only a little extra work to do: choose "Add Frame ..." from beneath the "File" menu (see figure above), and follow the instructions in the resulting dialog box to select manually the GIF files for inclusion in the Frames window.

When you are through, the Frames window will resemble the following (but in your case you will have only 4 entries):

This is the list of frames in the sequence that they will be assembled into the animation. The display gives the filename for each frame, and a list of information on the frames that we will discuss further below when we consider the "Options" menu.

Rearranging Frames

The frame sequence in the GifBuilder window can be rearranged by selecting the line containing a frame with the mouse (hold the button down for a second or two over the line before moving to ensure grabbing it), moving it to the desired position in the list while continuing to hold the mouse button down, and releasing the mouse button at the desired position. In the following figure the frame labeled "fig4.pic" is being moved to between the frames labeled "fig20.pic" and "fig21.pic", as indicated by the horizontal line under the mouse curser and the darkened row at the original position of the frame in the list.

Setting Animation Options

Before making the 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 may be found in the GifBuilder Documentation. For our example we will choose the following options: leave all settings at their default positions, except

(1) Set "Loop" to "Forever" in the dialog box that pops up when it is selected; this will cause the animation to loop continuously.

(2) Use the "Apple-A" keyboard shortcut, or "Select All" from the Finder menu, to select all frames in the Frame window (so that all rows are darkened) and set 20/100 seconds for the "Interframe Delay". Note that in the Options menu actions on frames generally occur only on frames that are selected, so if you want an action to apply to all frames they must be explicitly selected before performing the action. Otherwise, actions will apply only to the highlighted frame(s).

(3) Select for "Disposal Method" the choice "Unspecified" that appears in the corresponding popup window. The disposal method gives GifBuilder several choices for what to do with the preceding frame when a new one is displayed, which gives a lot of flexibility in creating special effects.

(4) Toggle "Frame Optimization" so that a check mark shows beside it in the "Options" pulldown menu. This tells GifBuilder 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.

Testing the Animation

The animation may be checked directly in GifBuilder by choosing "Start" from the "Animation" pulldown menu, or by using the keyboard shortcut "Apple R" (see figure at left). This should pop up a window, like the one shown to the right, 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 (keyboard shortcut "Apple .", and then step a frame at a time by either selecting "Next Frame" from beneath the "Animation" menu, or using the keyboard shortcut "Apple T".

Saving the Animation as a Link

If you are happy with the animation, save it as an animated GIF file: from the "File" pulldown menu select "Save As" and save it in your folder under the name gbtest.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="gbtest.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.)

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 like Superpaint would have worked as well for a simple example like this.

In addition, many programs that you may have already, such as Microsoft Works or KidPix, include rudimentary drawing programs that are often adequate for simple animation frames. The main criteria are that the programs be able to output in PICT, GIF, or TIFF formats (or 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 "Options" 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 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 GifBuilder Documentation to see all the additional cool features that we didn't even discuss in this Tutorial (for example, how to convert a movie in QuickTime format directly into an animated GIF). You may also wish to consult this 3-part animated GIF tutorial for further information.

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 one such site, and here is a gallery of animated GIFS (see individual pages for download restrictions). The animated GIFS at these sites can also give you some ideas about making your own.

Next   Back   Top   Home   Help