• First, the preparation of individual frames and what to consider
• Second, putting together an animated GIF file
• Third, looping animated GIFs and other information

At some point you will need to go to the SOFTWARE TOOLBOX icon to get software for your computer. If you run into a problem, go to the CRITTER ALERT for a listing of solvable and unsolvable bugs.

Constructing Animations

PART ONE : Preparing All the Pieces

• Some Thoughts about GIF Animations on the Web
• Making a Sequence of Animations
• Scattered Tips & Tricks

PART TWO : Making a Basic Animation

• Creating A GIF89A Animation File

PART THREE : Netscape Extensions and Troubleshooting

• Making a Animated GIF loop in Netscape 2.0
• Troubleshooting

NOTE: Due to excessive size, this tutorial is now in three parts.

Some Thoughts about GIF Animations on the Web

1st Thought: Always be conscious of bandwidth. Bandwidth refers to how much data you can push over your telephone line. The average user is still using a 14.4 modem. You best average throughput is about 1.7 kilobytes of data (1.7k, 1,700 bytes) per second of bandwidth. That assumes that you have a clear connection, are connecting at the optimum compression level, no telephone noises, your PC and modem are able to keep up with the rate of data coming in, your access provider (Netcom, UUNET, AOL, Compuserve, Prodigy) is able to keep the transfer rate at that level, and the source of the data (somewhere out there on the internet) is equally able to feed the data out. If any of those gets busy your average transfer rate will begin to drop. Some publications suggest that 1k per second is a good meter to measure Web pages by. This is a modest measure as most sites and modem should be able to exceed this. Unfortunately I have been on a number of services, at varying times, that proved how slow connections can get. A Web page with a total of 30k of text and graphics will take 30 seconds to display. 100k=1 minute 40 seconds. I think it is a good measure for the status of the internet today. Many sites and providers don't maintain throughput at levels that match the capability of 28.8kbps modems(3.4k per second). The more popular the service is at the time you use it, the slower things may become. By this same standard, my home page is obscenely large. I admit this. The main title animation is 110k and growing. At best, my page loads in 35 seconds, by the measure discussed here, almost two minutes! With time I will reduce it as best as possible.

To conserve bandwidth, do whatever you can to make your image compact and small. A recent example was a test animation by Arlene Gladney. The animation showed a sign with a painter working on it. Letters appeared one by one, spelling out the message "THIS IS EASY" The animation was 58k. Each frame was the entire graphic output with a single letter added. A short suggestion and a quick change reduced the file to only 10k, a 48K savings(also speeded up the animation without any timed delays). The suggestion was simple. The first frame should be the painter and his sign. The second would be just the letter "T" , the third "H", the fourth "I" and so on. Editing each image block allows for x & y positioning to place the letters where they belong. Not very difficult to do and extremely effective in conserving bandwidth. The animation looks identical.

GIF allows for any number of colors between 2 and 256. The fewer colors the less data and the smaller the graphic files. Not all software will let you set the bits per pixel for GIFs. Abode Photoshop(Mac/Win), GIFConvertor(Mac), and PhotoGIF(Mac), Picture Publisher(Win), Paint Shop Pro 3.0(Win), LVewPro, WebImage from Group42, Graphic Convertor(Mac), Fractal Painter, Painter 2.0, PhotoStudio from ArcSoft, ImageMagick, ClarisPaintShop, PaintIt, ColorIt and ToolWorks 2.2(SGI Indy) all do. DeBabelizer 1.6.5 does but only for GIF87a images.

Making A Sequence of Animations

Well, first thing you'll need is a series of images that look like an animation sequence. Like this series of counter-clockwise spinning stars:

Each cell or frame of the animation changes slightly. Notice each star is in an identical "bounding box" of red. This gives a frame of reference for the animation, like the edge of a movie screen. If you don't work with a fixed-size "bounding box" each frame of your animation will shrink and grow by a few pixels as the object changes shape. When inserted into a GIF sequence, the object will shift up, down, right and left with each change of size. Like so...(CLICK to replay)

I use Corel Draw, but you can use anything that you are comfortable with. You'll need to save each frame of the animated sequence into a separate GIF or other bitmap format. It you are using GIF Construction Set or another GIF assembly program, you may be able to save your animations into any format and import them when you insert the images into the final GIF. GIF Construction Set handles GIF, BMP, PCX, IMG, JPG, MAC, PICT and many more. I find it does a much better job of remapping colors than some of the heftier image-editing products. GIFBuilder can use PICT & TIFF with an Applescript.

Regarding the background color that you're bounding box is set to. On some browsers desparately in need of being updated, transparency isn't supported and your transparent color will become apparent. Pick a color that will look alright if possible. I have often picked a bright contrasting color that was easy to pick out from the palette, only to see the garish color displayed in an older browser.

Besides the above star animation, there is also another style that is a bit more difficult. The star works almost like a flip-book. It constantly replaces the entire "bounding box." But what if we wanted to show a ball bouncing around inside of a big box. To redraw the box every frame (GIF) would waste precious bandwidth in the download. Wouldn't it be nice if we could just draw the tiny ball and move it around the box. :->

Click on either image to replay them. Unfortunately Netscape doesn't allow this yet. The left image uses the Remove By Previous Image. The right Remove By Background. As you can see the right image of the ball is replaced by the background of the HTML page. This gives it the effect of an eraser. The left image should have had the effect of the ball bouncing in a box, but Netscape doesn't support Remove by Previous Image. Previous image should restore the image back to the way it was before the ball was painted on. I placed the last frame of the ball far below the box's bottom edge. This ball is outside the Header GIF89a Screen description of how big this GIF is. Consequently, since it has been placed "off-screen", it is not displayed.

But all is not lost. There is a way to do the above animation, with a little ingenuity.

The bouncing ball animation has the first GIF as a box. Then all the remaining GIFs as 32x32 pixel balls. The same GIF of the ball is reinserted over and over. I edit each image block and change the top and left position of each ball image to simulate movement over the image of the box. This will reduce size greatly, but means more upfront work in getting the animation done. However, we still have the problem of the trail of blacks balls. I could reinsert a patch of the background after each ball's appearance. This would paint the background of the box over the ball. This effectively, is what the Previous Image setting would be doing. Yes, the flicker is annoying, but you may not have to paint over EVERY position like I did with this example. One way would be to have the ball's image include a "trail" of white that would paint over where it's been. Once again, planning and time can overcome what software can't (yet). This also brings up a bug in GIF Construction Set for Windows. The positioning of the images inside the GIF file is off by one pixel down and one pixel right. If you set the position at 0,0, GIFCon will position it at 1,1. Netscape does NOT make this mistake.

How will all this look to non-Netscape clients?

Most non-Netscape browsers will only show the first frame of your sequence. A few will only show the last. You may be able to construct an animation that will look good in all. If the first and last frame as presentable (or matching) your animation will look great everywhere. My rolling stars are setup this way, you can check them out in the Gallery.. The first and last frame contain the star in an upright position. In the continuous animation, you will notice that this is revealed by the star noticeably staying in the upright position a fraction longer than the others. It is noticeable but the animation doesn't suffer terribly in this case. My "INTERcoNnEcTions" animation on the Home page, however, looks awful in anything but Netscape 2.0. Most browsers see a black box. Other see the words "forming links.." and nothing else. Both are undesireable. The end graphic problem is simple to solve. Provide a full repaint of the finished composite graphic. The first however is troublesome. If I include a full-displayed graphic it will ruin the effect. I am still awaiting a brainstorm =:-> The simplest solution, I know is to have a blank, fully transparent image as the first frame. This would leave a blank space rather than an eyesore.

Scattered Tips & Tricks

Okay, so I didn't know WHERE to fit these in!

If you aren't looping your animations:

If you are looping you're animations:

Want to fade an image out? An easy way is to take the image into a bitmap editor. Use a spray paint tool, like the rudimentary one in Paintbrush. Set it to hard settings, no transparency. You want it to paint random dots of a specific color. Pick the color that will be your tranparent color. Paint some random dots on the image. Save as a frame. Paint some more. Save as a frame. Continue till there is nothing left of the image. When sequenced in the GIF this will look this the image is disintergrating or, if in reverse, materializing. I used this on my EMAIL animation for the fade in of the letter, and the fade out of the hand. Both looked good, and the process was extremely quick.

Trying to think up some animations? Steve shows up that animations can be more then decorative. He uses GIF animations to instruct home page visitors how to juggle. There are definitely some exciting applications out there, so be creative.

I like to create a directory for each animation and EXPORT or SAVE each frame of the animation into it. If the final animation will be called STAR.GIF, name each animation STAR01, STAR02, STAR03. I often get lazy and just name them S01.GIF, S02.GIF, S03.GIF.

Looking to use animation programs to help out with the process. Here are some recommendations from other visitors:

Hans Huter : When creating gif-animations on a mac, I found that nothing beats the combination of Macromedia Director + Gifbuilder :

- just animate your sprites in Director (keep the stage as
  small as possible, and the frame-rate very low)
- Then export the frames as picts (in a new folder)
- Open Gifbuilder, drag the images into the gifbuilder-window
- set the options and choose build from the file-menu..
- voila !

Although it may not be the most efficient in file-size, you can create animations in a matter of minutes rather than animating each frame in Photoshop, and corrections to the animation can be made in a few seconds if you have both the programs opened...

Glenn Steffler suggests using Gold Disk Animation Works Interactive, or better yet, Astound for Windows.

Fenil Patel suggests Egor to create animation on web by Sausage Software people. It is available to download.

Lisa Carter suggest this: After reading your tutorial, I noticed one of the major sections was on tips and tricks to force your gifs into a single color palatte - which can be a lot of work, particularly if your images dither badly. I would like to *highly recommend* a great utility called "Dave's Targa Animator".

Contrary to the name, DTA works with much more than Targas. It will both read and write GIF files, as well as TGA, BMP, TIF, FLC, FLI, PCX and a number of other formats. DTA is a DOS command-line utility that was designed to process a directory full of numbered images and turn them into an Autodesk animation - although it will write to another directory and created numbered pictures, instead if you want it to.

DTA would be very useful for GIF animations because it can read a directory full of GIF files, calculate a single, optimized color palatte, and then re-write the GIF files with the new, optimized palatte - a big time saver.

DTA can also bulk resize images (with anti-aliasing!), and can do many neat fade and transition effects. DTA will also interpolate frames. (say, for example, you had an animation with 30 frames and decided that was way too big. DTA can cut that down to 15 images from averaged frames.) It will also do rotations, red-blue 3d and many other features.

You can usually find the latest version of DTA at http://povray.org.

Any ideas, suggestions,utilities, or examples, please mail them over for inclusion in this page.

Royal Frazier