Image Files | Animated GIFs
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!
 |
 |
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. They are also easier to create than (all but the simplest) Flash animations. Thus, animated gifs 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, Java, or Flash.
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:
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. (The current version is 1.0 and is available here.)
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
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 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 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 browse
in the resulting dialog box to find and
manually select the GIF files for inclusion in the
Frames window.
When you are through, the Frames window will resemble the following:
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.gif" is being moved to between the frames labeled "fig1.gif" and "fig2.gif", as indicated by the horizontal line under the mouse curser and the darkened row at the original position of the frame in the list.
Note: if you experiment with re-ordering your frames, make sure you have restored the original ordering of the figures before proceeding with the rest of this tutorial.
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 "Unspecified" in the submenu of options for "Disposal Method". 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":
The animation should now run in the window that popped up when you dragged the first image into the Frames window. (If you've closed that window, you can re-open it by selecting "Preview Window" from the "Window" menu. If this preview window is not open, all the options in the "Animation" pulldown menu will be grayed out and unavailable.) The animation 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 "Step" 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> |
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 fact, 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).
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.