NOTE TO THE READER: The next three pages cover the entire process of creating an animation.
- 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 to get software for your computer. If you run into a problem, go to the Common Problems of GIF Bugs pages 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
NOTE: Due to excessive size, this tutorial is now in three parts.
Some Thoughts about GIF Animations on the Web
1st Thought: make your images the right size, number of colors, and appropriate. The Conservation on the Web discusses this in length, explaining terms, concepts and what you can do to make your GIFs smaller. The Conservation page has a great example of how you or better software can reduce images greatly. On that page, a blackboard with an Apple next to it is animated over with the letters: A, N, I, M, A, T, E. Animating the whole blackborad, each time adding one letters would result in eight 2K 256-color images, or about 16000 bytes of animation. But by using the blackboard on the first image and adding images of just the letters (positioned with x,y coordinates) the same animation can be done in 3,960 bytes total(also speeded up the animation without any timed delays). Editing each image block allows for x and y positioning to place the letters where they belong. Not very difficult to do and extremely effective in conserving bandwidth. The animation looks identical. Some programs will let you input the seven large images and calculate the parts that change or add to each image. This is often called calculating "dirty rectangles".
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
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...
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. :->
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.
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
Okay, so I didn't know WHERE to fit these in!
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 !
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 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.
Constructing Animations, part two
- PART ONE : Preparing All the Pieces
- Some Thoughts about GIF Animations on the Web
- Making a Sequence of Animations
- Scattered Tips & Tricks
- 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.
Creating A GIF89a Animation File
Start GIF Construction Set. (Register it to prevent a hideous fate from befalling you.)
There are two ways to start a GIF Animation file
ONE WAY TO START AN ANIMATION GIF
- Select FILE/OPEN from the menu and select your first GIF.
- Now Select FILE/SAVE AS and rename the GIF to it’s final animation name. Click on OK DON’T PRESS [ENTER]!!! [ENTER] CANCELS!
SECOND WAY (I prefer this way) TO START AN ANIMATION GIF
- Select FILE/NEW from the menu. A blank GIF Block list with only a HEADER will appear.
- Start inserting images.
Why do I prefer it, here’s why:
The first image you bring in, should be the one to make the global palette. Even if you delete that image from the file afterwards. Why? Here’s my reasoning (If it is flawed someone please tell me) The global palette should contain the widest range of colors for all of the images. So I would think that if you have a frame where a rainbow of colors bursts open, insert that image first so that wide palette will be covered.
On a particularly troublesome set of images I found that color shifts were being introduced along the way. Especially with whites turning gray, greenish or yellow. I solved it by creating a composite bitmap of all the major images in the animations. Everything on a single large bitmap. I inserted that and created the Global Color table from it. I then discarded the image and began inserting the actual images in order. No more color shifts.
GIF89A HEADER & LOGICAL SCREEN DESCRIPTOR BLOCK
HEADER GIF89A Screen (640x480)
INSERT AN IMAGE
If any colors in the image are not represented by the global palette, a dialog box will pop up with up to six choices. You must choose one of the active choices (inactive choices are grayed out). True color, 24-bit images, are internally converted to 256 color images in GIF Construction Set. GIF does not support more than 256 colors.
Check out the Image Palette page for photographic examples of the following options.
USE A LOCAL PALETTE
This increases the files size by as much as 779 bytes. A new palette of colors is generated for this image only. The only problem I see is some 256-color displays may not handle too many palette swaps very well. You may see what appears to be a colorful negative images, or flashes on screen.
USE A LOCAL GREY PALETTE
This inserts a palette that is composed of 256 levels of gray. Color #0 is black, color #1 is white, and #2 through #255 range from near-black to almost white. You can use this to convert a color image to grayscale. Though, because of sorted palettes this method of conversion will often leave the image very dark.
REMAP IMAGE TO THE GLOBAL PALETTE
Similar to DITHER below. GIFCon simply replaces colors absent in the global palette with one that is closest to it. REMAP is not a good option for photographic images.
DITHER IMAGE TO THE GLOBAL PALETTE
This means that GIFCon will repaint your image to make up for colors that are not in the global palette. This may include using a dot of red and a dot of orange next to eachother to get that odd brownish-orange color you used. This is known as dithering. This is best for photo-like images. Some detail may be lost.
USE AS THE GLOBAL PALETTE
You only get this option once. One image can have its palette copied into the global palette. Once done, you can’t choose another. For this reason I suggest picking your global palette first, rather than do it as an afterthought.
USE AS IS (MAY CAUSE COLOR SHIFTS)
This option causes a GPF in GIFCon when I go to save. Be very cautious if attempting to use it. What this means is what every color #0 is use that color. Whatever color#253 is use that color. You see GIFs work like a color by number set. If a particular pixel is color #197, the decoder goes to the color palette, finds #197 as paints the pixel that color. USE AS IS will simply use the GLOBAL palette. This option often does not work.
FIFTEEN BIT QUANTIZE
This option will produce more attractive images if your palette requires color matching and remapping. However it’s also pretty slow, especially on older machines. It does, however produce smoother gradients, and more exact representations of higher color images.
If you are running into real problems with color variances that cause GIF Con to perform color shifts, here's a solution. Create a bitmap that is a composite of all the pieces of animation, a large bitmap. Insert that composite into GIF Con so that it picks a palette that covers all the variation in the images. Then delete the image, and insert the sequence of animation remapping to the available colors.
The IMAGE BLOCK will now appear on the Block List. It will show how big the image is in pixels (width by height) and how many colors are in the image.
HEADER GIF89A Screen (640x480)
IMAGE 503 x 86, 256 colours
If the image is wider or taller than your screen, adjust your logical screen to hold it. For the previous example it should be adjusted to read:
HEADER GIF89A Screen (503x86)
IMAGE 503 x 86, 256 colours
Let’s edit the image block and see what options we have. Select it on the list, and hit the EDIT button.
You can specify the X & Y position of the image, relative to the SCREEN area defined in the HEADER GIF89A Screen Block. Zero (0) left and zero (0) top means the image starts at the upper-left hand corner of where the GIF is placed on your web page. A top of 12 means the images starts 12 pixels down. A left of 25 means the image is displayed 25 pixels to the right. Negative values are not allowed, so if you have an image that should move left, start with a number higher than zero and decrease the number to show movement to the left. The same is true for moving up, negative top values are not allowed.
INTERLACED IMAGES
In the Image Block you can specify an interlaced image. Interlaced images in an animation may not interlace past the first frame. My first animation was interlaced for every frame. I would consistently see interlacing occur on the first image, but not on any of the subsequent frames. A GIF must be set to be SAVED as interlaced, to be displayed at interlaced.
GRAPHIC CONTROL EXTENSION BLOCK
HEADER GIF89A Screen (503x86)
CONTROL
IMAGE 503 x 86, 256 colours
Let's edit that CONTROL Block by either selecting it and hitting the EDIT button, or double-clicking on it.
Transparency
Now you get to specify a color to be transparent. Click on the check box for transparency. The default transparency color is 0 (usually black). By clicking on a color, you get to see the current palette associated with this image. Select the color that should be replace with transparency. If you see multiple instances of the desired color (this happens often with white) choose the first instance of it in the map (reading left to right and down). In version 1.0F and later, an eyedropper feature is provided. With this you can simply point to the color you want to be transparent. This is much easier. You should use the VIEW button to verify that the transparency has the desired effect. Only one color can be transparent per image.
Lastly, For transparent animations to work you MUST use remove by background for EVERY frame unless you want a trail of previous images left on th screen. If remove by previous is implemented, this will become an alternate choice. Until then use "background".
Wait for User Input
This would normally cause a pause that would wait for some form of input from the user (or an expired timed delay) before preceding. Netscape ignores this.
This Delay is measured erroneously in seconds by GIFCon before version 1.0G. It should be 1/100ths of a second. This makes it near impossible to test time delays in earlier versions of GIFCon. Get 1.0G from the Alchemy Mindworks site. Netscape handles the timing this way: display the IMAGE, waits the desired time, performs the removal. The next control or image block then takes over. This is correct according to the GIF specifications. The star should revolve over 12 seconds. The afterimages occur because the remove by is set to nothing (see below).
This determines what is done with the IMAGE after the time delay or user input has occurred. There are four actions.
Creating A Stream of Images
Okay, so now you've inserted your first image, it's time to create that "stream of images" that GIF allows us. With the last IMAGE BLOCK in GIF Construction Set highlighted, you now want to insert the second image in the series, then the third, then the fourth, then the fifth, etc. Like this...
HEADER GIF89A Screen (503x86) <- Check width and height
CONTROL
IMAGE 503 x 86, 256 colours
IMAGE 502 x 86, 256 colours
IMAGE 499 x 86, 256 colours
IMAGE 501 x 89, 256 colours <- Note height (89)
IMAGE 504 x 88, 256 colours <- Note width (504)
Notice that the example images I used here are changing shape slightly. Image #4 is the tallest at 89 pixels, and image #5 is the widest at 504 pixels. Both of those dimensions exceed our Screen (503x86) so we need to increase the Logical Screen in the Header accordingly or risk a GPF in Netscape. If you need to position each image within the logical screen, you will need to EDIT each image. Yes it's tedious, but if you need to, you need to. If these images have a transparency color, you will need to insert a Control block before each and every one. Now, here's a little short cut. Unless you need to alter the timing on the individual images, you will probably have a series of identical control blocks: same transparent color, same time delay, same removal by. If you set one Control Block, you can EDIT/COPY it into the clipboard. Then click on the first image (so the next will be inserted at the right point.) Now With your hands on the keyboard... [ALT]+E, P, [down arrow] ...and repeat. You can put this in a macro if you have a real long one with a lot of images. These three keystrokes, will insert the copied Control Block, after it is inserted, the Control Block will be highlighted. The down arrow will highlight the next image. This is the perfect point to insert the next Control block. Once you get the rhythm down, inserting twenty or thirty of these is a snap. Deleting them can be done the same way. What you will end up with is something similar to this...
HEADER GIF89A Screen (504x89)
LOOP <- 1.0b versions before 1.0G of GIFCon
CONTROL APPLICATION-DEFINED will show instead
IMAGE 503 x 86, 256 colours of LOOP.
CONTROL
IMAGE 502 x 86, 256 colours
CONTROL
IMAGE 499 x 86, 256 colours
CONTROL
IMAGE 501 x 89, 256 colours
CONTROL
IMAGE 504 x 88, 256 colours
This is what a animated GIF should look like when you're finished. Note the LOOP, is what you will see when the GIF is set up to loop. Let's get onto that.
