Simple animations for the WWW


The following methods of creating animations are covered client pull, server push and animated GIF's.

Client Pull

This is the simplest of the three methods as all one needs to do is create your web pages as normal and add one line to do the client pull. The browser requests a page on its own, without intervention from the user making it look like animation. The client pull has two main drawbacks:

  1. For each page a new connection is made making this the slowest method.
  2. The user can only terminate the animation by going to a diffent page or closing the window.

To do a client pull put the following line in the <HEAD> section of your HTML file.

<META HTTP-EQUIV="Refresh" CONTENT="1; URL=next.html">

The number after CONTENT tells the browser how long to wait before getting the next page. URL is the URL of the next page. Here is an example of a client pull.

Server Push

In a server push the server keep the initial connection open and sends the browser multiple pieces of data. You can use a server push to work like a client pull sending a new document. Usually they are usually used to send multiple images to the browser with each one replacing the previous in the same location. This requires all the images to be the same size or weird things will happen.

The server push uses the MIME type multipart/x-mixed-replace, which allows the server to send different types of data. To implement a server push you need to create a CGI script that sends the MIME type header, then the content type header, the data and an end of data header. The CGI script can be written in any language you like, below is a simple PERL example.

#!/usr/local/bin/perl
# This line tells the browser a server push is coming
# boundary=myboundary tells the browser that the string myboundary
# separates the data elements
print "Content-Type: multipart/x-mixed-replace;boundary=myboundary\n\n";
print "--myboundary\n";

# Tell the browser were going to send a gif file
print "Content-Type: image/gif\n\n";
open(PIC,"red.gif");
# Send the browser the gif file
print ;
close(PIC);
# Tell the browser were done sending the gif file
print "\n--myboundary\n";

The script would be called from your HTML file like this

<IMG SRC="/cgi-bin/animate.cgi" ALT="">

where SRC is the name of your script. Since the server push requires only one connection its faster than a client pull. Also the user can use the stop button to quit the animation.

Animated GIF's

The GIF graphics file format allows for multiple images to be placed within a single file. You can also control the time, in 100ths of a second, to wait before displaying the next image. An additional feature is the application- specific extension, Netscape's allows the images to loop back and play a certain number of times. You can specify the number of time the images should be played but Netscape currently only support 1 time or forever. A more detailed explanation of the GIF file format is available.

Basically you create a series of GIF's using you favorite graphics editor then combine them together into an animated GIF file. An animated GIF is faster than using a server push, so if your images are GIF this is the way to go. The browser will keep reading the images out of their cache so if a user doesn't have much memory it can hit the hard disk frequently. Programs to create animated GIF's can be found for most platforms below are a few.


Tips for success

Cautions

Additional Info

Browser support for the various types of animation discussed.
Browser Client Pull Server Push Animated GIF
Netscape 2.0 Yes Yes Yes
Internet Explorer 3.0 Yes No Yes

If you have information on addtional browsers let me know and I will add them.


Any questions or comments let me know.