A Few Animated Thoughts
by Heather Champ
It used to be that animation on the Web was either generated by a client pull or a server push. A client pull simulates movement by including a <META> tag with the <HEAD> which instructs the browser to load another document after a specified amount of time. The full tag looks something like this.Tips & Tricks
<HEAD><META HTTP-EQUIV=REFRESH CONTENT="5; URL=http://url of the next document"></HEAD>
The "refresh" attribute instructs the browser to pull in the document at the URL specified. The document will refresh after the time specified in the content, in this instance, five seconds. Client pull animation is tricky given that sometimes the next document will load even if the current document hasn't loaded completely.
The document of a server push, however, remains static as a cgi-script forces a stream of images that reside on the server. In some scripts you can specify the time delay between images, but ultimately the speed of the animation is determined by a user's modem.
These two methods provide rather crude animation that for the most part have been replaced with GIF (Graphics Interchange Format) animations, more specifically version 89a, which allows for a number of images to layered on top of one another. This layering allows friendly browsers to view the succession of frames, which gives the illusion of animation. I've also seen instances in which Java or Shockwave has been used to create simple animations. It's rather like using a large hammer to whack a small fly, and given that these technologies require more advanced browser and operating systems, it can reduce your viewing audience.
While the inclusion of animations have become the norm, it behooves a designer not to become too overwhelmed and animate every element on a given document. Even a single animation can prove to be distracting, and a small herd of animations can be downright silly.
Animations themselves can become quite large, which will increase the download time. What can you do to reduce the file size? Careful planning from the beginning can result in a lean and elegant solution. If you intend to animate a smaller section of a large image, you need not include it entirely within the animation. Animate the smaller section and then the image can be pieced seamlessly together within the HTML document. If you choose this method, it's best to "loop" the animation so that the pieced image can be viewed in it's entirety when the download is complete. It's also possible to create smaller file sizes by working with a reduced color palette and using the 216 "Internet safe" colors. Large areas of flat color will produce smaller files than those with more, varied color.
When you feel the animation is complete, it's a good idea to run though the sequence frame by frame. It is possible to delete a frame here and there while still retaining a "good" look and feel. Fiddling with the timing, either by slowing down or speeding up the frames, can smooth over any rough patches that may occur.
Taking the time to plan an animation will ensure a better experience for the user and provide a better product for your client. Alhough people quibble over what speed modem the majority of users are surfing with, it's necessary to remember that data will download at approximately 1 k per second at 14.4 Kbps and half that using a 28.8 modem. Add up all the file sizes, and you will see just how long it will take for your animated jewel to appear.
