[Previous]

[Find]

[Next]

Royal Frazier's

- MIRROR sites: closer, faster, non-English -

If you have a few minutes, please fill out the Visitor Survey. It will help in making this site better.

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

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
• Troubleshooting

Some Thoughts about GIF Animations on the Web

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. Some programs will let you do 256 color, 16 colors, or black and white. Not all do adaptive palettes-that is construct a palette that is specifically for the colors you used in your image. 

Making A Sequence of Animations

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. Each program accepts different images. Some only accepts GIFs. Some now accepts other movie formats, such as QuickTime MOV, AVIs, MPEGs, & FLiCs and convert them straight to a GIF89a animation. Newer software is also adding special effects, transitions, morphs, and other features which will generate in between images on certain simple types of animation. This saves you from producing individual images. Many of them are simple like, a sliding image, dissolving image, fade in/out. Advanced 2d and 3d animation programs will allow you to create models and vector paths to execute "actor" along. Some of them can be complex others simple, but more restricted.

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 up front 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-AnimGIF clients?

Non-animated GIF browsers will only show the first frame of your sequence. A few older ones show the last image but they have disappeared from the market. Having the first image being the only one seen can be a problem for certain effect. Say you want something to appear from nothing. The first frame is nothing and that's what non-animated browser will show-nothing. If I include a copy of the full end graphic it will ruin the effect. The best solution is a Javascript detection routine that will serve up different images, animated for known animation clients, non-animated for unknowns. 

Scattered Tips & Tricks

If you aren't looping your animations:

remember the last frame will be the final one, the one that will stay on screen.

you can remove the last frame completely, having the graphic apparently vanish once it has played.

If you are looping you're animations:

The first frame should be the presentable one. Most browsers will display this as a static GIF so this will make the most pleasant appearance in the most browsers.

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 transparent 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 disintegrating 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? STEVEMD showed us that animations can be more then decorative. He uses GIF animations to instruct home page visitors how to juggle. Unfortunately, the pages are no longer available. 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 !

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 palette - 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 palette, and then re-write the GIF files with the new, optimized palette - 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.

Copyright 1996,1997 Royal E. Frazier Jr.

Last Updated: March 1997