GIF animations don't offer the interactivity of Shockwave files, nor the flexibility of Java applets, but they do have a few things going for them: (1) they don't require the user to download a plug-in in order to see them; (2) browsers that don't support GIF animation can at least display a static image, rather than a "broken" one; (3) the user sees the frames as they load, instead of having to wait for the entire file to load before anything is displayed; and (4) they're easy to assemble.
When designing a GIF animation, it may help to think of a familiar metaphor: the flip-book animation. Flip-book animations are created by drawing a picture on the edge of a page, then drawing the same picture--slightly altered--on the next page, and so on, so that when the pages are flipped, it looks as if your drawing is moving. In a GIF animation the principle is the same: You create two or more frames--each slightly different from the last--that when viewed in sequence simulate motion.
The first thing you need to think about is what you want to happen in your animation. How complex is the action? Is realism or "natural" motion the aim, or will choppy or cartoon-like motion be more suitable? Is repetition (or "looping") necessary (or perhaps undesirable) for your animation? The more frames that are needed to accomplish an animation, the bigger the file will be--and looping puts extra strain on the receiving machine's processor. Keep these factors in mind when deciding to incorporate GIF animations in your pages.
Now let's get to an example. This animation you may have seen elsewhere on internet.com--it's the ad banner for Web Interactive, for which the slogan is "Where the Internet Comes Alive!" In the printed conference brochure, the word "alive" was rendered in the Chili Pepper font, which looks jiggly to begin with. The combination of the word "alive" with a font that fairly bursted with action made me want to set the image in motion.
I wanted to make the animation as small as possible, so my goal was to make the word "dance" in only two frames. First, I opened my original Photoshop-layered file of the banner (using the layers feature in Photoshop isn't necessary, but I find it useful for lining up objects in each frame, and for checking to see that the change from one frame to the next makes visual sense). I duplicated the "Alive!" layer and then hid the original. Next, I selected the "A" using the lasso tool, and rotated it (Image, Rotate..., Arbitrary...) 5 degrees clockwise (CW). Then I selected the "l" and rotated it 5 degrees counterclockwise (CCW). I continued on through the exclamation point, rotating 5 degrees in alternate directions.
To save the different layers as separate GIF files, I first saved the entire file, then I made all the layers except the rotated one visible. Next I chose Indexed Color... from the Mode menu; an alert asked, "Flatten visible layers and discard hidden layers?" I said OK. I saved the image as a GIF, then reopened my layered file. This time I made all the layers visible except the unrotated "Alive!" and repeated the indexing procedure--making sure to select Previous for my palette. (This will ensure that there is no unintended animation caused by two different dithering patterns blinking back and forth.)
To assemble my files into an animation I used GifBuilder, a GIF animation program for Mac; there are similar programs available for Windows and Unix platforms as well. I like GifBuilder because it is so easy to use: A quick scan of the menus tells you all you need to know about assembling an animation.
To begin with, I used the File menu to Add Frame; since my animation was to be a looping two-framer--and since some browsers that don't support GIF animation show the first frame only and some show the last--it didn't really matter which frame came first. I happened to put the unrotated frame first. I used the Options menu to set my file looping Forever. The only thing left to do was to attempt to control the speed of the animation.
I say "attempt to control" because several factors determine the actual speed of the animation, including the speed of the connection and the receiving machine's processor. Another thing to keep in mind is that the speed of animation you see in GifBuilder is slower than you will see if you view the animation in a browser via a T1 line. Why this is I have no idea, but I've found it to be consistently the case. Since the speed of a single animation can vary so widely, I chose to worry more about whether it will be too fast than too slow.
Fig 1: The Alive! animation, viewed in GifBuilder
I adjusted the slight pauses between frames by double-clicking on the numbers in the Delay column of the Frames window, and increasing them a little at a time until I had an animation that was a bit slower than what I judged was "maximum visible speed" (above which the viewer would get dizzy trying to keep up with the motion). I viewed the results of each increase by selecting Start from the Animation menu. When I was satisfied with the results, I selected Save from the File menu and viewed my animation by opening the file in Navigator. Here's what the finished product looks like:
Before I end this week, I want to mention two more benefits to GIF animations: (1) since they're treated as GIF files, they take the regular IMG tag and all its extensions--including an ALT specification (something Shockwave files currently don't allow); and (2) assembling the files may be easy, but learning the techniques involved is even easier--all one has to do is save an animation from a Web page and open it in GifBuilder or another animation program, and the designer's methods are laid bare.
