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