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 book--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.
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.
ftp://ftp.mindworkshop.com/pub/alchemy/gifcon32.exe
ftp://ftp.mindworkshop.com/pub/alchemy/gifcon.exe
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.
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.
I obviously can't illustrate the animated effect of flipping back and forth between
two images with a printed figure in a book. However, you can load the document at
http://www.mcp.com/sams/books/
235-8/ch12/look.htm to see this and another simple GIF animation.
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 book.
This page is also online at http://www.mcp.com/sams/books/235-8/ch12/wpw.htm. If you view it with Netscape Navigator version 2.0 or higher, or with Microsoft Internet Explorer 3.0, you'll notice that all the icons are animated; a vision appears in the crystal ball, the scepter flashes, the cauldron bubbles, and the book pages turn. These icons are actually four separate multi-image GIFs, and the HTML code for this snazzy action-filled page looks just like an ordinary static Web page.
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 book 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 book), 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 book
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 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 3.0 and Microsoft Explorer 3.0.
Coffee Break: Once you get started with Web page animation, it's hard not to get carried away. I couldn't resist adding a flashing neon sign for the 24- Hour HTML Café, which you can see at: http://www.mcp.com/sams/books/235-8/cafe12.htm
You'll also find links to a number of other animation-enhanced pages. While you're browsing, you might want to check out the GIF Construction Set demonstration page at: http://www.mindworkshop.com/alchemy/gcsdemo.html
It contains a number of snazzy animations which show off features of GIF Construction Set (and animated GIFs in general) that this short chapter didn't have enough space to discuss.
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.
