webschmeb animation

Making gif89a animations.


For lots of gif89a animation examples, and some how-to tips, see the Animation Gallery.

What the heck is a gif89a animation?

Gif89a is an image-file format that has been around for a while, and is used extensively on the web: whenever you see a transparent gif, you are seeing an aspect of the gif89a spec. However, there are other aspects of the gif89a format that are only now being supported, namely, the multiple-block option, which allows users to build an animation by stacking many image 'blocks' together in one image file. It LOOKS like a plain-old binary image, but when you view it with Netscape 2.0 or other compatible browser, it 'plays' as an animation.

Gif89a animations are great for a lot of reasons: they are server-independent and portable; they do not add big burden to the server's processing power in the way that CGI does; the software to create them is cheap to free; they are easy to make; they are usually small; there are no plugins or special settings required to view them, since they will be recognized by graphical browsers as a gif, if not an animated gif.

But will the final product be as cool as, say, a shockwave animation? More to the point, are there bugs?

Fortunately, many of the implementation issues that you might notice when you look at a gif89a animation -- that annoying 'disk whir' noise, the 'downloading image' message that Netscape 2 displays, the suspicion that Macintosh users may crash -- are browser-related and not the fault of the gif89a format. For example, that disk-whirring sound and the constant 'downloading image' message are fixed in Netscape 3 beta/Atlas. Moreover, you can use currently-supported (or partly-supported) features of gif89a to 'work around' current annoyances; I add significant time lags both to insure against Macintosh 'crashes' and to minimize the 'noise'. (See some examples of how to use time to improve the animation/reduce the need for high bandwidth.) Browsers that recognize animated gifs may incorrectly interpret the frame-rate assigned to the frames of an animated gif, slowing it down too much; this is why you could insert a time lag of a tenth of a second per frame and the browser plays it back at a half second or so per frame. Although these drawbacks are annoying as hell to people like me, who see gif89a animations as a superb, open-platform, bandwidth-friendly way to spice up a website, most of the drawbacks are temporary.

There are other features of gif89a that will allow interactivity once the browsers work out the bugs in implementation. Many browsers recognize some but not all aspects of the gif89a spec; Netscape and Microsoft Internet Explorer recognize most of the gif89a features, including animation. Most browsers will show transparent gifs, but old browsers will not recognize the additional 'blocks' of an animated gif and will just display the first image. Similarly, other aspects of gif89a are not recognized by any but the newest browser: Netscape 3 (Atlas) beta will recognize the 'loop iteration' feature of gif89a animations, but most browsers will not. When browsers recognize the 'wait for user input' gif89a feature, then true interactivity will be accessible to non-programmers and those who can't afford expensive multimedia software.

How do I make the images that will become the frames of my animation?

Gif89a employs the use of multiple 'blocks'. A block is an individual component of the gif89a image, and may be of several types: a control block, an image block, a loop block, a comment block, and a plain text block. The part of the animation that everyone sees is the image block, and you need to use whatever graphics application you normally use to create these images. Since most graphics applications do not support the 'block' property of gif89a yet, you should make the 'frames' of your animation as separate images and save them individually as gifs.

Now that I have these gifs sitting around, how do I put them together?

A growing number of utilities for both Mac and Windows will do the trick in a fairly user-friendly manner. I used Gif Construction Set for Windows to make the above swirling swirl. A list of utilities that you can download is available at REI world. Most of the utilities for making gif89a animations allow you to place multiple gifs in the one file (using menus or drag and drop). Using the utility, you stack these blocks in 'chronological' order. Most utilities have a graphical interface which makes this fairly easy, and if you misplace a block you can also remove it. For example, if you want a looping animation of transparent gifs, you would do the following:
1) Open a gif image using the animation utility.
2) Insert a 'control' block before this image, and use the menu options provided by the control block to set the transparency.
3) Insert the second image. You will be presented with a menu option which takes you to a standard file-finding menu for selecting the image.
4) Insert a control block before this image.
5) Insert a 'loop' block. You can only insert one of these. The 'blocks' will be displayed in the order in which you placed them.

Now can I save the file and impress my friends?

Using the utility, save the file as a new gif (in 89a format) under a new name. Voila! A portable, programming-free gif file that won't break most browsers and will actually animate on many of them. Be careful not to edit the file in your usual graphics application, which probably won't recognize the gif89a properties and will drop the extra blocks.

back



t h e   n e t   n e t   |   t h e   g a l l e r y   |   f o o d   &   m u s i c
w e b     s c h m e b   |   r e a d m e   |   f e e d b a c k   |   s u b m i t