Chapter
12 Chapter 12Creating Animated GraphicsThere 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 "advanced." 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 display. Software for Making Web Page AnimationsAlchemy 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.
Building a GIF AnimationThe 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.
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. 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.
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 time.
Figure 12.3. Control blocks enable you to make images transparent and to insert a time delay between images.
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. 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
Figure 12.10). 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. |