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