Creating Animated Graphics
There are several ways to add some movement to a Web
page, and most of them are covered in the most advanced chapter in this guide--Chapter 20,
"Scripting, Applets, and ActiveX." However, you can actually add animation to
standard GIF images, and it's so easy to do that the technique doesn't even qualify as
GIF animations are a great way to make simple
animated icons and add a little motion to spice up any Web page. In this chapter, you'll
learn how to create GIF animations and how to optimize them for the fastest possible
Making Web Page Animations
Alchemy Mindworks' GIF Construction Set is a nifty
little utility designed especially for assembling GIF animations. There are a few other
GIF animation programs available, including both freeware and advanced commercial software
packages. However, GIF Construction Set offers the best mix of great features, ease of
use, and low price.
(For Macintosh users, I recommend GifBuilder, which
is available free at http://www.shareware.com.
Another good GIF animation program for the Mac is Gif.gIF.giF at http://www.cafe.net/peda/ggg/) To Do:
You can download a free evaluation copy of GIF Construction Set from the Internet. I
recommend that you do so now so that you can try your hand at building an animation or two
as you read this chapter.
|1. If you are using Windows 95 or NT,
download this file:
If you're using Windows 3.1 or 3.11, download this file instead:
2. Run the file you downloaded. It will extract and install GIF Construction Set
The first step in creating a GIF animation is to
create a series of images to be displayed one after the other. You can use any graphics
software you like to make the images. You don't even need to use software that supports
GIF to make the images; GIF Construction Set can import BMP, JPEG, PCX, TIFF, and almost
any other graphics file format you throw at it.
Time Saver: The fastest way to create a
simple GIF animation with GIF Construction Set is to select File | Animation Wizard. This
will start an "interview" that leads you through all the steps discussed below.
You also can create scrolling text and a number of transition effects automatically with
the Edit | Banner and Edit | Transition menu options. These commands provide an easy way
to add some quick animation effects to still images. In this chapter, however, I show you
how to create animations "by hand," without using the Wizard or automatic
effects. This will give you a head start when you want to use the advanced animation
tricks discussed toward the end of the chapter.
Before you assemble an animation with GIF
Construction Set, you may want to open the images you'd like to include from another
graphics program so you can refer to them as you put the animation together. Figure 12.1
shows the four images for this example open in Paint Shop Pro with the GIF Construction
Set program in the foreground.
Figure 12.1. Use Paint Shop Pro or any other
graphics program to produce the individual "frames" of your animation.
To Do: You may want to create a few frames for your own animation and use them to follow
along with the numbered steps below.
You'll find it easier to build and modify animations
if you give the images for each animation similar names. You might name the images for a
dog animation dog1.gif, dog2.gif, dog3.gif, and so on.
The following numbered steps show you how to make a
simple GIF animation.
- 1. To start a new animation, start GIF
Construction Set and select File | New. At the top of the white area, HEADER GIF89a Screen
(640x480) should appear. This is the first "block" in the GIF file, to which you
will be adding additional image blocks and control blocks that will be listed below it.
2. Click the Edit button, and the dialog box in Figure 12.2 appears. Enter the screen
width and depth (height) of the largest image you want to use in the animation and click
OK. (Not sure how big your images are? Paint Shop Pro displays the width and depth of the
current image in the lower-left corner of the screen.)
Figure 12.2. GIF Construction Set runs in a fairly
small window, allowing you to see other applications, such as Paint Shop Pro, at the same
- 3. If you want the animation to loop
continuously when viewed in Netscape Navigator, click the Insert button and then click
LOOP. This inserts a special control block telling it to immediately restart the animation
every time it finishes. If you want to create an animation that plays only once and then
stops (leaving the last image on display), skip this step.
4. Click Insert, then Image, and then choose the first image in the animation. This is
also the image that will be displayed by browsers that don't support GIF animation.
5. A dialog box will appear, saying, "The palette of the image you have imported
does not match the global palette for this file." To make your animated GIF file as
small as possible, select Use this image as the global palette for the first image you
insert. Then select Remap to global palette if you see this dialog box when inserting
6. Press the up arrow once, or click LOOP, Insert, and Control, in that order. This
inserts a control block in front of the image. Click Edit to get the Edit Control Block
dialog box shown in Figure 12.3. You can enter a time delay to wait between this image and
the next. (The other options are explained later in this chapter.)
Figure 12.3. Control blocks enable you to make
images transparent and to insert a time delay between images.
- 7. Repeat steps 4 through 6 for every image in
the animation. Remember that the control block for an image has to appear just above the
image block in the list. However, you need to insert the image first and then go back to
edit the control block to add transparency.
A little confusing? Don't worry, you'll be an old pro at it by the end of this chapter. In
the meantime, if you make a mistake, you can highlight any block and click Delete to get
rid of it.
8. When all the images and control blocks are inserted in the right order (as in
Figure 12.4), select File | Save As to save the animation. Be sure to give it a name
ending in .gif!
9. Using your favorite Web page editor, make an HTML document with an <IMG>
tag referring to the GIF file you just saved as the SRC (for example, <IMG
SRC= "lookani.gif">). Load the document in Netscape Navigator or
Microsoft Internet Explorer to see the results.
You can also preview the animation within GIF Construction Set by clicking View at any
time during the construction process.
Figure 12.4. The images will be listed in order,
with a small preview of the current frame to the right.
Figures 12.5 through 12.7 show a page I created for
the CD-ROM to accompany Web Page Wizardry from Sams.net Publishing. Web Page Wizardry is
an excellent choice if you want to learn about more advanced animation and multimedia
techniques after you finish this guide.
Figure 12.5. At first glance, this looks like a page
full of regular GIF images.
Figure 12.6. Viewed in a modern Web browser,
however, the page in Figure 12.5 becomes an animated scene full of action.
Figure 12.7. Notice the differences between this
shot and the one in Figure 12.6. It's alive!
I could have created all this animation in Paint
Shop Pro or another shareware graphics program, but I decided to bring in the heavy
artillery and create it in Adobe Photoshop instead. Not only does Photoshop offer more
advanced drawing and coloring tools, but more importantly, it also lets you keep various
parts of an image in separate layers that you can modify independently. This feature
(which is also found in a number of other commercial graphics editors) makes drawing
simple animation a breeze.
By way of example, let me explain how I created the
spell guide that flips its own pages. To start, I sketched the first image from scratch and
then drew five views of the turning page on separate layers, as shown in Figure 12.8.
Time Saver: To make "layered"
animations like this in Paint Shop Pro, start by drawing the basic image (in this case the
guide), and using Edit | Copy and Edit | Paste | As New Image to create multiple copies of
it. Then add the details for each image (in this case the turning page) separately.
Figure 12.8. Photoshop makes it easy to build
animation because you can just draw the changes from frame to frame and use transparency
to show or hide it at will.
After I drew all the pages, I turned on each layer one at a time (keeping the guide and
background layers always on) and used Photoshop's File | Save a Copy command to save each
view as a separate true-color BMP file.
You can make the background transparent by editing
the control block in front of each image and choosing Transparent colour and Remove by:
Background when you edit the control block (see Figure 12.9). You can use the eyedropper
tool (mentioned earlier) to pick the transparent color, or you can click on the number
next to the eyedropper to pick the color directly from the global or local palette (see
To make sure you have picked the right color to be
transparent, you can click the View button to preview the animation.
Just A Minute: Note that the background color
used during the preview can be set by selecting File | Setup and picking a color under
Edit view mode background.
Figure 12.9. If you want the animation to have a
transparent color, insert and edit a control block before each image.
Figure 12.10. To pull up this color-picking palette,
click the number next to the eyedropper tool (255 in Figure 12.9).
In the first example in this chapter, I mentioned
that you can make an animation loop continuously by clicking Insert, then on Loop in GIF
Construction Set. However, there's one more thing you need to know to create a successful
looped animation, and it isn't at all obvious. Because of the way that Netscape Navigator
processes and displays multi-image GIF files, you will often find that the first frame of
a looping animation is skipped or only half displayed, making a noticeable jerk or some
other subtle-but-annoying effect.
The way to avoid this is to always repeat the first
image at the end of any fast-moving animation. This way, the jerk becomes invisible
because it occurs between two identical images. For example, Figure 12.11 shows the
complete pages.gif animation. This actually contains only six separate
images--the seventh one is a repeat of the first.
Repeating the first image does increase the size of
the GIF file, so it's a good idea to try the animation without the first image repeat to
see if you're happy with the results. If you are, the only reason to consider repeating
the first image is that a few older browsers will display only the last image in the
animation. (Most older browsers, however, will display the first image.)
Figure 12.11. For smooth animation, it often helps
to make the first and last images identical.
Time Saver: One more tip on looping: If you
highlight the LOOP block and click the Edit button, you can set the number of iterations
for the animation to repeat before stopping. This doesn't actually work in Netscape
Navigator 2.0, but it does work in Navigator 4.0 and Microsoft Explorer 5.0.
This chapter introduced you to animated GIF images,
which are the easiest and quickest way to add some action to your Web pages. You found out
where to get GIF Construction Set, an excellent shareware program for putting together GIF
animations. You also saw how to control the timing of each frame in an animation, and make
animations partially transparent.
GIF animations can be placed on Web pages using the
same <IMG> tag as ordinary, unmoving images. All the <IMG>
attributes and options discussed in Chapter 9, "Putting Images on a Web Page,"
also work with animated images.
- Q I've seen quite a few animations on the Web that
show a three-dimensional object rotating. Can I make those with GIF Construction Set?
A Yes, but you'll also need some kind of 3D modeling and rendering software to create
the individual frames.
You also may have seen interactive, three-dimensional virtual reality scenes and objects
embedded in Web pages. Those are something completely different from GIF animations, made
with a special language called the Virtual Reality Modeling Language, or VRML. For more
information on VRML, refer to Web Page Wizardry: Wiring Your Site for Sound and Action,
from Sams.net Publishing.
Q My GIF animation looks great in Microsoft Internet Explorer, but runs way too fast in
Netscape Navigator. What's up?
A When you don't include a time interval between frames, some Web browsers (such as
Explorer 3.0 and Navigator 2.0) leave a short pause between frames anyway, which is
usually what you want. Navigator 3.0, however, will run the animation as fast as it can,
which usually makes it look psychotic.
The solution is to always include a time interval in the control block before every image
in the animation.
Q I've seen moving marquee-type signs on Web pages. Are those GIF animations?
A Sometimes they are and sometimes they aren't. There are several ways to make text
move across an area on a Web page. One of the easiest ways is to use GIF Construction Set,
which can make several types of fancy marquees from a simple string of text that you type
in. See the GIF Construction Set online help for details.
Note that GIF animations are only one way to make marquees. Java applets or ActiveX
controls are often used to make marquees as well (see Chapter 20). Some versions of
Microsoft Internet Explorer even support a special <MARQUEE> tag, but it is
likely to become obsolete soon.
Q I have a Windows AVI video clip. Can I turn it into a GIF animation?
A Yes. The Microsoft Web site (http://www.microsoft.com/)
has a little program you can download called Microsoft GIF Animator that will do the
trick. A more advanced video editing program that supports AVI and GIF files is VideoCraft
from Andover Advanced Technologies (http://www.andatech.com/).
You can also embed AVI files directly into Web pages, as discussed in Chapter 20.
- 1. If you want your logo to bounce up and down
on your Web page, how would you do it?
2. How would you make a quarter-of-a-second pause between each frame of the animation?
3. Which of the following should you normally choose in the Edit Control dialog box
for each frame of a transparent animation, under Remove by?
Nothing Leave as is Background Previous Image
- 1. Use Paint Shop Pro or another graphics
program to make a few images of the logo at various heights (perhaps squishing when it
reaches a line at the bottom). Then assemble those images using GIF Construction Set, and
save them as a multi-image GIF animation file named bounce.gif. You can then
place that animation on a Web page using the <IMG SRC="bounce.gif">
tag, just like any GIF image.
2. When you build the animation in GIF Construction Set, insert a control block before
each image, and click the Edit button to edit each control block. Enter 25 as the time
delay (in centiseconds).
3. Remove by: Background is what you'll almost always want, but feel free to
experiment with the others to see what they do.
- GIF Construction Set can make slide shows of
dissimilar images by automatically generating transition effects, such as fading between
pictures. It can also automatically add a number of special effects to still or moving
text. If you take a little time to explore the advanced features of this program, I'm sure
you'll find it time well spent.
- Don't forget that GIF Construction Set is shareware,
and that the free copy you downloaded is for evaluation purposes. If you like it (and who
wouldn't!?), be sure to send Alchemy Mindworks their well-earned $20 registration fee at
the address you see when you exit the program.