Animation on the Web works no differently than animation anywhere else. Just like in a flip book, animation is a series of still images displayed in succession to create an illusion of fluid motion. The faster the frames advance, the more fluid the animation becomes. Unfortunately, the Web can be a very slow place, and an animation that should run quickly often crawls across the screen unless special technology is used.
A number of different ways exist for creating web animations, including client pull, server push, animated GIFs, and the Shockwave and Flash multimedia plug-ins. In client pull, an HTML page gives the browser instructions to request and load another document automatically, similar to a slideshow. Web pages are displayed one after the other with a specified time delay in between. This feature is useful for step-by-step instructions. But client pull is slowed by the need to load a whole page rather than a single cell of animation, which prevents the illusion of fluid animation.
Client pull requests are embedded within the HTTP response header of a web page that the server sends back to the client. The <META> tag inserts meta-information into a response header. Meta-information helps parse a web page, but the browser does not display it. A response header is the beginning of each HTTP response that a server sends back to a client with the requested web page.
Server push is a complement to client pull, although server push is the more complex of the two. Server push requires a Common Gateway Interface (CGI) script that tells the server when to automatically serve a new document or image. (For information about CGI, turn to Chapter 35, “How CGI Scripting Works.”)
It also requires client browser capability of recognizing the MIME-type, multipart/x-mixed-replace. This MIME-type enables multiple documents to be sent within one message. To understand how server push works, imagine an email message with text, hypertext, a digital movie, and sound. You can see how multiple “documents” (media types) can be sent within a single message. The multipart message is simply a series of images that displays one image right after the other. The server sends, or pushes, each image. In this way, a small animation can be embedded among the text and images of an otherwise static web page.
Animated GIFs are a series of graphical GIF images that roll up into a single image—much like a flip book seems to animate a series of drawings as you thumb through the pages. The animated GIFs load into a browser just like any GIF file does; however, they load in a series to give the illusion of motion. Animated GIFs have the benefit of speed because images are cached on the client PC and loaded from memory rather than from the Internet. They represent an easy solution to adding motion to web pages.
More complex multimedia animation has become possible using Macromedia’s Shockwave and Flash plugs-in. Shockwave plays multimedia files created with Macromedia’s popular Director and Authorware programs, whereas Flash uses its own special tools. You must first download and install the Shockwave and Flash plug-ins before you can view any web pages that have Shockwave or Flash animations.
Client pull is executed by the Refresh command. A refresh command is written into an HTML document using the <META> tag. The contents of the <META> tag are added to the header’s meta-information that the server sends along with the HTTP response. During a client pull sequence, the browser reads this header information that instructs it to use your PC’s internal clock to keep track of the time elapsed between pages retrieved. When the time has elapsed, the browser requests and displays the next page.
