Web based School

Building a GIF Animation
Multiple Animations on One Page
A Hand-Crafted Animation
- Figure 12.8.
Transparent Animations
- Figure 12.9.
- Figure 12.10.
Doing the Loop
- Figure 12.11.
Summary
Q&A
Quiz
- Questions
- Answers
Activities

Chapter 12 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 "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 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:
ftp://ftp.mindworkshop.com/pub/alchemy/gifcon32.exe
If you're using Windows 3.1 or 3.11, download this file instead:
ftp://ftp.mindworkshop.com/pub/alchemy/gifcon.exe
2. Run the file you downloaded. It will extract and install GIF Construction Set automatically.

Building a GIF Animation

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 time.

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 subsequent images.

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!

A Hand-Crafted Animation

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.

Transparent Animations

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

Doing the Loop

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.

Summary

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&A

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.

Quiz Questions

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

Answers

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.

Activities

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.