|Fleeting Glimpse > GIF Animation Instructions > Assembly|
Once you have saved all the images as separate files, you need to assemble them in the proper sequence into a single GIF89a animation file. These directions are for Gifcon (GIF Construction Set) but I've tried to write them generically so you shouldn't have much trouble adapting these directions to any other animation programs.
In Gifcon, first select SETUP from the toolbar. Make sure the following are checked (leave the others unchecked);
There are several ways to load images into Gifcon. I find the easiest is to use the Animation Wizard to get the basic assembly done. Then you can edit it further if necessary.
Start with Animation Wizard
You now have a working animation. You can view it by selecting VIEW from the Gifcon toolbar or you can view it in Netscape by selecting from the FILE menu OPEN FILE and selecting the animation file. For non-looping animations, reload the page to replay the animation.
Now is a good time to save your animation; from the menu select FILE|SAVE AS.
If this is one of your first animations and you don't want to edit it. then Fast Forward to the next step. But if you are ready to learn how to manually edit animations, here are some suggestions.
Fast Forward >>
Edit the animation if necessary
An animation file contains the images plus 3 types of settings;
In Gifcon, the images and settings are contained in a set of "blocks" as shown in the figure above.
Other GIF assembly programs don't use this 'block' interface; there are no Control blocks, Loop blocks, etc.; just the images and the settings. You usually find the settings under a "Global Animation Property" tab or menu and a "Image/Frame Property" tab or menu.
Editing the images
Sometimes when you add a new image to the animation file, you may get a dialog regarding a color palette conflict. For drawn and gradient images, select REMAP THIS IMAGE TO GLOBAL PALETTE. If you've been following these instructions, your desired global palette should be already in place and the file you are inserting should already have the same palette loaded. Often the reason for the conflict isn't that the colors are different between the global palette and the image you are inserting. but that they are just in a different order. In this case Gifcon will adjust the order of the colors without changing the colors themselves. You should never select any of the local palette settings; these can make your animation look bad and can increase the file size.
- Modifying images: If you want to modify an image in your graphics program, the easiest way is to go back to the original gif image file, modify it, then delete the old Image block from Gifcon and INSERT the new one.
If you no longer have the original image file, you can extract it from the uncompressed animation file selecting BLOCK|EXTRACT from the menu.
- Moving and copying images: You can move or copy an image, control or comment block by highlighting the block and using the cut, copy and paste functions.
- Deleting images: You can delete a block by highlighting the block and pressing the del key or selecting DELETE on the toolbar.
Editing the global animation settings
Browsers tend to ignore the Background color setting and display the web page background instead.
- Change the looping: To edit, double click on the Loop block. The Loop block contains one parameter -- the number of times the animation will repeat (ex. a setting of 1 means the animation will play once then repeat 1 time for a total of 2 run-thrus; a setting of 4 results in 5 run-thrus). A setting of 0 makes the animation loop forever. To play just once and stop, delete the Loop block altogether.
Editing the image settings
The "Wait for user input" setting is ignored by Netscape and IE.
If you leave out the CONTROL block altogether, the frames without the CONTROL blocks will load immediately after the previous frame, with no delay at all.
For looping animations, browsers tend to pause at the last image before replaying the animation. You may want to give the last image a shorter delay to compensate for this pause, or a longer delay if you want a longer pause.
- Interlacing: Located in the IMAGE block, leave this unchecked for each image. Interlacing sometimes causes Netscape to flicker when displaying the first frame. Plus interlacing actually increases the total download time of the animation. Besides, browsers only use it on the first image of the animation; it is ignored on the other images.
- Local Palette: Located in the IMAGE block, leave this unchecked for each image. As discussed previously, global palettes are the best. Using local palettes may cause the animation colors to shift significantly and causes Netscape to flicker as hte local palette is loaded.
- Transparency and Remove by: If you set transparency in your original images, it was lost when the images were loaded into Gifcon. You have to set it again here. Double click on the Control block above the image where you want to set transparency. Check the transparency box, click on the eyedropper and when the image appears, select with the eyedropper the color you want to be transparent. You have to set transparency in every Control Block where you want it.
Note: only one color in an image can be transparent. Also note that transparency is not really a color but a palette number also called a color index); in other words, you can have two of the same color in a palette as two different palette numbers, one transparent and one not.
Transparent backgrounds brings up a complexity that is confusing at first but worth explaining since most animators run into at some point. It involves the "Remove by" setting in the Control block. This setting tells the browser how to dispose of each image after it has been displayed. There are 4 options (though actually there are only two);
For images that are drawn as if on a piece of paper -- no transparency, all the same size -- Nothing/Leave as is the best "Remove by" setting to use -- just keep adding the images to the pile. However if there is a transparent area in the image, for the webpage background to show through, Nothing/Leave as is causes a problem. Imagine that instead of drawing the image on paper it is drawn on a transparency; a clear piece of film. As each image is laid down, the previous image shows through the transparency so you see both the new image and the previous one. As a result, you end up seeing a string of objects in all the previous positions. The way to fix this is to remove each image before the next is laid down. In the two bouncing ball animations on the right I have made the formerly grey area transparent so that the white background of the webpage shows through. In the first, Remove by is set to Nothing so each new image is displayed on top of the former. See how all the previous images show? In the second, Remove by is set to Background. You don't see all the previous images because they were removed before the next image is displayed.
Unfortunately, the topic gets a bit more complex. After the last discussion, you might ask "Why not just use Remove by Background all the time -- it would work for both transparent and non-transparent images?" Yes, but... some of the compression software doesn't work if the animation has "Remove by Background" anywhere in the animation - Gifcon's compression algorithm is an example of this. Other compression programs like Smaller Gif don't seem to have this constraint. So here is the best advice;
Best advice on setting Remove by -- If your animation has a transparent background, use Remove by Background. Otherwise use Remove by Nothing.
|Fleeting Glimpse > GIF Animation Instructions > Assembly|