Perhaps the easiest way to animate your Web page is with GIF animations. They don't require special plug-ins and are read by most browsers.
A GIF animation is a little slide show in which two or more slides, or 'frames', display in sequence to create the illusion of movement. The animation can be short and small in size, as is appropriate for banner ads, or a long, multi-frame animation that might be used in a browsable CD-ROM-based marketing project.
To make a GIF animation, create each frame in a paint program such as Photoshop and save it as a GIF or create it in the GIF animation program itself if has good drawing features.
Next, copy the frames into your GIF animation program and arrange them in the order you want them to play.
You then have to choose from several options.
Do you want the animation to loop (play over and over again) or to play just once?
How long do you want each frame to display before changing to the next frame?
How do you want the background treated? Does each frame load a complete new background or just the bare necessities?
Optimization
Recently I've been hearing that click-through rates on banner ads diminish when banners go over about 14k.
This GIF animation is a hefty 32K. To slim it down, I could replace the scanned fish illustration with a flat color illustration. The dithering on the fish's body is the main culprit, especially since the fish's fins and mouth move, requiring those parts to load three times.
In contrast, the three flat-color bubbles would have minimal effect on file size.
Another way to reduce file size would be to eliminate the fish's moving parts, leaving just the bubbles rising to the top.
Making lean, fast-loading GIFs is an art form in itself. Experimentation will help you learn the ins and outs of it.
Loadtime is determined by three factors:
1. |
Number of frames in the animation: the fewer the frames, the faster-loading the animation. |
2. |
The file size of each individual frame. GIF animation frame size is determined by the same rules that govern GIFs in general: low bit depth and long runs of flat color make the leanest files. Highly dithered or photographic images make the slowest, fattest files. |
3. |
Frame optimization. With highly optimized frames, each new frame is able to reuse most of the background of the previous frame, so that only the new or moving part of the next frame needs to be downloaded.
Frame optimization works well with flat color images, but not with photographic or dithered images. |
Click to see Rudolpho and Angus, jumping stars of my sidekick Dave Stephen's Fantastic Flea Circus.
Dave used a variety of tricks to make his comic-book style animation come in well under the required 100 k file size limit.
Besides using flat colors and a limited color palette, Dave discovered that restricting his palette primarily to pastel colors helped reduce the file size.
Even though the animation is large at 362 by 361 pixels, with 14 frames, it's still only 80 k.
It's a good idea to save a copy of your animation prior to optimizing it - making changes later will be much easier.
One last step before publishing your GIF animation is to upload the file to your server, then check it out on as many platforms as possible.
GIF animations tend to run faster in Web browsers than they do in the programs used to create them. I've also noticed extreme differences in how they run on different platforms.
For instance, one animation we made from a StrataStudio Pro illustration ran slowly and elegantly on our Macs. But on the client's NT, it ran almost sickenly fast.
Also, check out how the illustration looks as it streams onto the Web page. GIF animations begin running as they download and you may experience undesirable effects.
One final consideration. Is that GIF animation really necessary? Does it enhance the viewer's experience of your Web page or just become an annoying distraction that will turn people off to the message you're trying to deliver?
| 
