|
|
by Dick Oliver
There are several ways to add some movement to a Web page. You could hire a programmer or spend a few months learning the Java language. You could use a pre-built applet or OLE component to play some sort of video or interactive media file. Or you could ask all the visitors to your Web site to go get a helper application or plug-in program to play your favorite media file format. All of these can be excellent solutions in many situations, but every one of them involves an investment of time and resources, even before you start to produce the animation itself.
Wouldn't it be nice if you could just "snap together" three or four gif images to make a simple animated graphic, without having to deal with any extra software components or media viewers at all? And wouldn't it be great if people using older Web browsers automatically saw at least the first frame of your animation, without your having to do any extra coding or producing additional graphics files? And while we're wishing, how about an animation format that can save a cool animated icon in a 20 K or smaller file?
Believe it or not, these utopian dreams have already become a reality. In fact, multiframe animation was built into the gif file format way back in 1989. The compression is very efficient, and it's almost shamefully easy to make gif animations. Every user of Netscape Navigator and Microsoft Internet Explorer (which means the vast majority of Internet surfers) can see animated gifs without any additional software or add-ons. You can include these animations in a Web page exactly as if they were "ordinary" gifs, with the <IMG> tag. Most browsers will support gif animation in their next releases, but in the meantime, those who use browsers other than Navigator or Explorer will always see just the first (or in some cases, the last) image in the animation.
Ease of creation and use makes gif animations a great choice for simple animated icons and any Web page graphics that could use a little motion to spice them up. In this chapter, you'll learn how to create gif animations and how to optimize them for the fastest possible display.
You'll also learn some even sneakier tricks to create movement and interactivity on your Web pages with ordinary HTML. These include dynamic documents that automatically load another document after a specified time period as well as an example of how to use embedded frames to create images that respond to user interaction.
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; Alchemy Mindworks' gif Construction Set, a nifty little utility designed especially for assembling multi-image gifs, can import BMP, JPEG, pcX, TIFF, and almost any other graphics file format you throw at it.
| Tip |
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 can also automatically create scrolling text and a number of transition effects with the Edit | Banner and Edit | Transition commands. 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. |
The following numbered steps show you how to make a simple gif animation. This animation will flip back and forth between two artistic renderings of the word "LOOK" that I created in Paint Shop Pro.
| Tip |
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. |
I obviously can't illustrate the animated effect of flipping back
and forth between two images with a printed figure in a book.
But you can load the look.htm
document on the
CD-ROM if you'd like to see the action.
Figure 19.5 shows a page I created for the CD-ROM to accompany my book 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.
The page in Figures 19.5 through 19.7 is also on the CD-ROM included with this book, as /examples/wpw/wpw/wpw.htm. If you view the page 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, the mirror revolves, the book pages turn. These icons are actually five separate multi-image gifs, and the HTML code for this snazzy action-filled page looks just like an ordinary static Web page (see Listing 19.1).
Listing 19.1. The Web Page Wizardry Page (wpw.htm)
<HTML> <HEAD><TITLE>Web Page Wizardry</TITLE></HEAD> <BODY BACKGROUND="bubsmoke.jpg" BGCOLOR="black"> <CENTER> <IMG SRC="wpwtitle.gif" LOWSRC="hat.gif"><P> <A HREF="visions.htm"><IMG SRC="visions.gif" BORDER=0></A> <A HREF="programs.htm"><IMG SRC="programs.gif" BORDER=0></A> <IMG SRC="spacer.gif"><IMG SRC="spacer.gif"> <A HREF="brews.htm"><IMG SRC="brews.gif" BORDER=0></A> <IMG SRC="spacer.gif"><IMG SRC="spacer.gif"> <A HREF="worlds.htm"><IMG SRC="worlds.gif" ALIGN="absmiddle" BORDER=0></A> <A HREF="pages.htm"><IMG SRC="pages.gif" BORDER=0></A><BR> <A HREF="visions.htm"><IMG SRC="vistext.gif" BORDER=0></A> <A HREF="programs.htm"><IMG SRC="prgtext.gif" BORDER=0></A> <A HREF="brews.htm"><IMG SRC="brwtext.gif" BORDER=0></A> <A HREF="worlds.htm"><IMG SRC="wrltext.gif" BORDER=0></A> <A HREF="pages.htm"><IMG SRC="pagtext.gif" BORDER=0></A> </CENTER> </BODY> </HTML>
| Note |
If this were a page on the Internet instead of a CD-ROM, I would have included ALT attributes so that users of very old browsers or very slow modems would see some text without having to wait for the graphics to download. For example, <IMG SRC="wpwtitle.gif" ALT="Web Page Wizardry">. |
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, with it you can 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.
For example, let me explain how I created the spell book that flips its own pages. To start, I just sketched the first image from scratch and then drew five views of the turning page on separate layers, as shown in Figure 19.8.
| Note |
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. |
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.
| Tip |
If you're wondering how I did the rotating mirror within Photoshop, know that I didn't. I used a 3D modeling program to build a 3D model of the mirror and a keyframe animation of it rotating. Then I brought the images from that animation into Photoshop to add the magic window through which you can see the castle. You can find out more about creating 3D models and putting "virtual reality" scenes on your Web pages in the Web Page Wizardry book. |
When I created the spell book, I knew that gif Construction Set is able to import BMP files and dither them down to 256 colors. I also knew that I could get the best results by giving gif Construction Set one file that was already dithered to 256 colors, however, so that gif could use that file's colors as the global palette to which all other files in the animation could be matched. Therefore, I used Photoshop's Mode | Index Color command to change the first image in the sequence (the book with flat pages) to 256 colors and saved that in the gif format. In Paint Shop Pro, you could achieve the same thing with the Colors | Decrease Color Depth command.
Next, I fired up gif Construction Set and assembled the images the same way I assembled the images in the step-by-step example earlier in this chapter. The only difference between the present example and the previous example is how I handled the global palette and the dithering of the imported BMP files. For the first image in the spell book gif, I inserted the 256-color gif file and chose Use this image as the global palette, as shown in Figure 19.9. For all other images, I inserted the true-color BMP files and chose Dither this image to the global palette, as in Figure 19.10.
| Tip |
In this case, the subtle gradations of color in these images look a lot better when dithered, so I was willing to put up with the slightly larger file sizes that dithering creates. For most situations, however, you should use Paint Shop Pro's nearest color algorithm to change all images to 256 colors before bringing them into gif Construction Set, and then choose Remap this image to the global palette when importing them, rather than Dither this image to the global palette. They might not look quite as pretty, but they'll often come out a lot smaller and faster. On the other hand, when you need the absolute best possible quality and don't care so much about size or speed, you have the option of using a separate optimized palette of colors for each image. To do this, choose Use a local palette for this image when you insert each image. |
As demonstrated in the earlier LOOK example, you can make the background transparent by inserting a control block in front of each image and choosing Transparent colour and Remove by: Background when you edit the control block (see Figure 19.11). You can use the eyedropper tool (mentioned previously in this chapter) to pick the transparent color or you can click the number next to the eyedropper to pick the color directly from the global or local palette (see Figure 19.12).
To make sure you pick the right color you want to be transparent, you can click on the View button to preview the animation. Note that the background color used during the preview can be set by selecting File | Setup and picking a color from the Edit view mode background drop-down list box (Figure 19.13). You may want to choose a contrasting color (in this example, white or gray) to check the transparency value, and then choose a color similar to your Web page background (in this example, black) to see what the animation will look like on the page.
| Tip |
Notice that the Setup dialog box also includes some controls to fine-tune the dithering of true-color images. You'll probably never need these, but if you're not happy with the results of a dithered image, this is where you go to fuss and fiddle with it. |
In the first example in this chapter, I mentioned that you can make an animation continuously loop by clicking Insert then Loop in gif Construction Set. You need to know one more thing to create a successful looped animation, however, 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 the animation. This way, the "jerk" becomes invisible because it occurs between two identical images. For example, Figure 19.14 shows the complete pages.gif animation. This animation actually contains only six separate images-the seventh image is a repeat of the first.
Figure 19.14: For smooth animation, it often helps to make the first and last images identical.
Repeating the first image does increase the size of the gif file, so you may be willing to tolerate a little jerkiness to keep the size down. Also, in an animation such as the LOOK logo example, you never notice or care about the jerk anyway. It's a good idea to try the animation without the first image repeat to see whether 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 will display only the first image, however.)
| Tip |
One more tip on looping: If you highlight the LOOP block and click the Edit button, you can set a number of iterations for the animation to repeat before stopping. This doesn't work in Netscape Navigator 2.0, but it does work in Navigator 3.0 and Microsoft Explorer 3.0. |
You can improve the speed and reduce the size of gif animation in two ways. One way is to save only the part of the image that changes from one frame to the next and insert this smaller gif file instead of replacing the whole image. The other way is to make transparent any part of the image that doesn't change. This can also dramatically reduce the size of the file because a solid region of transparency will compress much more efficiently than the same region filled with complex image data.
The most impressive application of these techniques is an animation in which a small moving character or object is superimposed over a complex backdrop. You can save the backdrop only once as the first image and then insert only the images of the small changing region for subsequent images. This can easily reduce the size of the animation file by a factor of 10 or more. I'll use a less dramatic example, though, where we'll actually only shave about 6 K off a 26 K animation file. You can, of course, apply the same technique to a larger file.
Like the spell book, the crystal ball animation was created as a number of separate image layers in Photoshop (see Figure 19.15). Instead of saving each frame in the animation as a layer, in this case I used the opacity slider to vary the transparency effects between layers as I swirled the "fog" layer around with the smudge brush. You could achieve the exact same effect in Paint Shop Pro by using the smudge brush on multiple copies of the original image.
Only the first image of the series was saved in its entirety, however. I cropped off the bottom part (including the gold stand) of all the other images. Figure 19.16 shows the five images used to build the animation. Note that these include a cropped copy of the first image to put at the end of the animation.
When I assembled these images in gif Construction Set, I set each Edit Control Block to Remove by: Previous Image instead of Remove by: Background (Figure 19.17). This keeps the previous image visible under any transparent areas-or areas not covered by the current image if the current image is smaller than any of those previous. This way, the gold stand from the first image remains unchanged when the smaller cropped frames are displayed.
You may also notice in Figure 19.17 that I specified a delay of 20/100 (or 1/5) of a second between animation frames. This slows the animation down enough so that the foggy haze seems to drift in and out, rather than snap back and forth like someone changing TV channels.
| Tip |
You can control where a smaller image appears over a larger one by highlighting the image block and clicking Edit (see Figure 19.18). In this example, both the Image left (horizontal offset) and Image top (vertical offset) values are 0, meaning that the top left corner of the image should be placed exactly over the top left corner of the entire animation. If you have a small object to place in the middle of a large backdrop, however, you can adjust these offsets to place the object just where you want it. |
The largest animation on the Web Page Wizardry home page is the bubbling cauldron. Because the big fat pot had to be dithered for the shading to look good, the animation weighs in at more than 40 K-about twice as large as the other multi-image gifs on the page.
There's a sneaky way to cut that file size almost in half. In Figure 19.19, I placed a blue rectangle over the unchanging (and biggest) part of each image, except for the first one. Then, when I pulled these images into gif Construction Set, I set blue to be transparent and chose Remove by: Previous Image in the Edit Control Box, as I did for the crystal ball images.
Unfortunately, this sneaky stunt only works when you don't need to use the transparency for the background of a Web page to show around the edges of an image. (If I used the same black color to block out the pot as I used for the background around the top and bottom, parts of the steam, bubbles, and fire would not get erased properly between frames.)
If I were posting this page on the Internet, I would probably choose to use a solid black background on the page so I could use the optimized Remove by: Previous Image version of this animation (26 K) instead of the fully transparent Remove by: Background version (40 K). But, because this is for CD-ROM, I splurged and went with the fancy background and the 40 K image. Even with this move of reckless abandon, all the animation on the page still only adds up to 120 K, which is smaller than the static graphics on many Web pages these days.
Chapter 16, "Bigger, Faster, Better Graphics," reveals a number of other ways to reduce the size and increase the speed of your gif graphics.
Dynamic documents are pages that automatically change without any action from the user. Dynamic documents are not new to Internet Explorer 3.0 (they were first introduced in version 2.0), but they represent yet another very striking development in HTML content presentation.
There are two basic approaches to producing a dynamic document: server push and client pull. As these terms suggest, server-push documents are sent automatically by the server without being "asked for." A client-pull document, on the other hand, is a page that instructs the browser (client) program to automatically initiate a request for another page.
| Tip |
Dynamic documents work beautifully within frame documents. You can have one frame automatically refreshing itself while the other frames display ordinary static pages. (See Chapter 7 "Creating and Enhancing Web Pages with Frames," for an introduction to frames.) Oh, and whatever you do, don't put a server-push animation into your background image. On second thought.... |
Server-push is different from standard HTTP information transfers. Normally, when you use Internet Explorer (or any other Web browser) to request a document from a site on the World Wide Web, your computer makes a request of another computer, the other computer processes your request and sends back the information you requested (if it is available), and that is the end of the communication.
With server-push, however, Internet Explorer establishes a connection to an HTTP server and keeps that connection open, enabling content to be "streamed" out of the server until the parameters of the HTTP request have been satisfied. Server-push programming usually involves some kind of Perl or C programming knowledge.
Before you embark on any substantial work, though, be sure to check with your Internet access provider to find out whether their server is capable of handling server-push programs or whether you could expect to be billed extra for the service. Server-push scripts are known to bring the most robust servers down.
Unlike many other Internet Explorer extensions, Internet Explorer's implementation of server- push has not been very widely adopted by other browsers, and for the most part, server-push programs can be viewed only by Internet Explorer. The multimedia dimensions that server- push offers are expected to be superseded by more advanced animation and multimedia interfaces such as Java.
For a fun demonstration of server-push, point your Internet Explorer browser to http://anansi.panix.com/~sorabji/smile.smile.smile.html.
Client-pull is different from server-push in that the main "work" involved is performed by the Web browser. The <META> tag is used to automatically request another page after a specified time period. The syntax of the <META> tag looks somewhat bizarre at first.
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://someplace.com/page2.html">What this tag does is send a message pretending to be from the server saying Refresh: 2; URL=http://someplace.com/page2.html. When Internet Explorer sees this message, it waits two seconds, and then loads the URL given. In this case, a document named page2.html is loaded from someplace.com, but the URL could be any other document anywhere else on the Internet (or a file on the local hard drive). It could also be any type of viewable file, such as a sound or multimedia file for which a plug-in or helper application has been configured.
The net effect is simple: Internet Explorer retrieves one document and then pauses for a couple of seconds before loading a second document. This can be very striking when used as an attention-getting device, but it can also be useful if you want to be reasonably certain that visitors to your page will see a set of pages in a certain sequence.
Depending on what you wish to accomplish, server-push can be more efficient and reliable than client-pull because client-pull involves multiple HTTP requests and because the speed of HTTP requests can vary considerably.
For a working example of client-pull animation, open the catdog2.htm file on the CD-ROM that accompanies this book. The HTML for this animation is listed here and illustrated in Figure 19.20.
Figure 19.20: This page (catdog2.htm) automatically turns into Figure 19.21 after two seconds.
<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=catdog3.htm"> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog2.gif"><A HREF="catdog4.htm">Click here to stop.</A> </BODY> </HTML>
After two seconds, the page automatically replaces itself with the catdog3.htm file, listed here and shown in Figure 19.21.
Figure 19.21: This page (catdog3.htm) automatically turns back into Figure 19.20 after two seconds.
<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=catdog2.htm"> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog.gif"><A HREF="catdog4.htm">Click here to stop.</A> </BODY> </HTML>
When the user clicks the Click here to stop. link, a similar page without any client-pull animation tags is loaded. This page, called catdog4.htm, is listed following:
</HTML><HTML> <HEAD> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog.gif"><A HREF="catdog2.htm">Click here to start.</A><P> <A HREF="catdog.htm">Click here to go back.</A></BODY>
One very interesting use of client-pull animation is to put a client-pull page inside a floating frame. Chapter 7 "Creating and Enhancing Web Pages with Frames," explains all the nitty-gritty of floating frames, but I'll review the essentials here and show how they can be used to change or animate graphics on a Web page in response to someone clicking on a link.
With floating frames, you can embed one Web page into another. The <FRAME> tag works just like the <IMG> tag except that the SRC can be an HTML document. For example, you could place the Microsoft home page in a 400¥400-pixel area on one of your own Web pages, as in the following code:
<FRAME SRC="http://www.microsoft.com/" WIDTH=400 HEIGHT=400>This area would have its own little scrollbar, and any links that the user clicks within the frame will display their corresponding documents within the frame without changing the main page at all. You can even use the standard IMG ALIGN attribute to center the frame or wrap text around it.
The real fun begins when you give a frame a name with the <FRAME NAME> attribute. You can then make any link on the page change the contents of that frame using only the <A TARGET> attribute. For example, the page in Figure 19.22 includes the following tag in the upper-left cell of the table:
<FRAME SRC="tabula.gif" NAME="picture">This displays the tabula.gif image in that cell when the page loads. Each of the product names is a link that displays an image of the corresponding table in the frame named "picture", as in the following:
<A HREF="table1.gif" TARGET="picture"><H2>Tabula Suprema</H2></A>When the user clicks one of these links, the picture immediately appears in the frame without any reloading of the main page (see Figure 19.23).
| Note |
For details on how to make colorful tables like the one in Figures 19.22 and 19.23, refer to Chapter 6 "Effective Use of Tables." |
When used in conjunction with gif animations and/or client-pull animation, floating frames turn your Web pages into an interactive, action-filled experience. To accomplish this sort of interactivity before the invention of floating frames, you would have had to use complex programming or scripting languages. Now you can do it as easily as placing any other image on the page!
This chapter has shown you how to spice up your Web graphics with animation and interactivity. Chapter 20, "Backgrounds, Image Maps, and Creative Layouts," brings all the ingredients of a full-flavored graphical Web site together and serves up some creative examples for you to enjoy.
