In my examples, I will give Unix style scripts. Personally, I prefer to use scripts. It makes it easier to debug the results.
The animation consists of 28 images. In the beginning, the frog just sits there
and looks at a letter:
In the animation the gray color is chosen as a transparent background color. If I choose that each frame will be disposed by the background, each frame stands for it self. The background functions as an eraser.
The animation script looks as follows:
#! /bin/sh whirlgif -background 5 -loop 0 -trans 5 -disp back -o animfrog.gif \ -time 80 frog01.gif \ -time 20 frog02.gif frog03.gif frog04.gif frog05.gif frog06.gif frog07.gif \ frog08.gif frog09.gif frog10.gif frog11.gif frog12.gif frog13.gif frog14.gif \ frog15.gif frog16.gif frog17.gif frog18.gif frog19.gif frog20.gif frog21.gif \ frog22.gif frog23.gif frog24.gif \ -time 15 frog25.gif frog26.gif frog27.gif \ -time 300 frog28.gif exit
If you are interrested, all the GIFs mentioned by name in the scripts on this page can be fetched with the HTTP-protocol - but I'm not telling you how ...
In my favorite paint-program, I reduced the Color Map - the paint program calls it the Palette
- to 16 colors. I only bothered with editing the first frog and saved it as frog00.gif
.
Then I re-animated the whole thing using the
-globmap option, which takes the Color Map from the first GIF and uses it in all the
subsequent frames, i.e. Images.
The animation script now looks as follows:
#! /bin/sh whirlgif -globmap -background 5 -loop 0 -trans 5 -disp back -o froganim.gif \ -time 80 frog00.gif \ -time 20 frog02.gif frog03.gif frog04.gif frog05.gif frog06.gif frog07.gif \ frog08.gif frog09.gif frog10.gif frog11.gif frog12.gif frog13.gif frog14.gif \ frog15.gif frog16.gif frog17.gif frog18.gif frog19.gif frog20.gif frog21.gif \ frog22.gif frog23.gif frog24.gif \ -time 15 frog25.gif frog26.gif frog27.gif \ -time 300 frog28.gif exit
The new file is now 19.236 bytes. The reduction in size - as well as time for upload - is some 20%. You will not see any difference between the two animations unless your browser treats 16-color maps different from 256-color maps.
To create an even smaller animation, I can use the -minimize option. I give up the transparent option, and repaint the gray background white in all the 28 frames. The disposal method will be set to the default of Whirlgif. If I show the animated frog on a white background and without a frame, few people will note the difference, even if it actually uses only 8 different colors.
#! /bin/sh whirlgif -globmap -minimize -loop 0 -o minifrog.gif \ -time 80 a00.gif \ -time 20 a01.gif a02.gif a03.gif a04.gif a05.gif a06.gif a07.gif \ a08.gif a09.gif a10.gif a11.gif a12.gif a13.gif a14.gif a15.gif \ a16.gif a17.gif a18.gif a19.gif a20.gif a21.gif a22.gif a23.gif \ -time 15 a24.gif a25.gif a26.gif \ -time 300 a27.gif exit
The resulting size is only 5.236 bytes, compared to the original 23.019 bytes. I could have squeezed it a bit more, had I had the tools to make 8-color GIFs.
The output from the examples 1-3 is shown on a separate page for comparison.
The pipe smoker icon on my home page was made by copying the same image without smoke 30 times and then let the smoke develop from image to image.
#! /bin/sh whirlgif -minimize -time 25 -o ../images/pibe.gif -loop 0 /tmp/pibe???.gif exit
You do not need a lot of different images to make an animation. Once upon a time, I
started up the intranet of one company, and nobody had decided, how the welcoming
page should look.
I got inspired by looking at the screens in the company, where the standard screen
saver had the logo running around like a billiards ball.
Let the red spot with its yellow border represent the company logo. The ugly greenish color around it will be the transparent color and thus invisible.
I wanted to animate the preliminary page with the company logo running as a billiards ball within a frame, and name the image While We Wait For a Good Home Page.
My idea about the first frame was that it should look like the image here:
I cooked up a dirty little program which calculated the positions of the logo and generated the
following script:
#! /bin/sh whirlgif -trans 0 -background 3 -o pausebillede.gif -loop 0 \ -disp back -time 300 Ball1.gif \ -disp back -time 30 -off 64:48 Ball.gif \ -disp back -time 30 -off 128:96 Ball.gif \ -disp back -time 30 -off 192:144 Ball.gif \ -disp back -time 30 -off 256:192 Ball.gif \ -disp back -time 60 -off 320:240 Ball.gif \ -disp back -time 30 -off 373:200 Ball.gif \ -disp back -time 30 -off 426:160 Ball.gif \ -disp back -time 60 -off 480:120 Ball.gif \ -disp back -time 30 -off 427:80 Ball.gif \ -disp back -time 30 -off 374:40 Ball.gif \ -disp back -time 60 -off 320:0 Ball.gif \ -disp back -time 30 -off 256:48 Ball.gif \ -disp back -time 30 -off 192:96 Ball.gif \ -disp back -time 30 -off 128:144 Ball.gif \ -disp back -time 30 -off 64:192 Ball.gif \ -disp back -time 60 -off 0:240 Ball.gif \ -disp back -time 30 -off 40:180 Ball.gif \ -disp back -time 30 -off 80:120 Ball.gif \ -disp back -time 30 -off 120:60 Ball.gif \ -disp back -time 60 -off 160:0 Ball.gif \ -disp back -time 30 -off 200:60 Ball.gif \ -disp back -time 30 -off 240:120 Ball.gif \ -disp back -time 30 -off 280:180 Ball.gif \ -disp back -time 60 -off 320:240 Ball.gif \ -disp back -time 30 -off 360:180 Ball.gif \ -disp back -time 30 -off 400:120 Ball.gif \ -disp back -time 30 -off 440:60 Ball.gif \ -disp back -time 60 -off 480:0 Ball.gif \ -disp back -time 30 -off 416:48 Ball.gif \ -disp back -time 30 -off 352:96 Ball.gif \ -disp back -time 30 -off 288:144 Ball.gif \ -disp back -time 30 -off 224:192 Ball.gif \ -disp back -time 60 -off 160:240 Ball.gif \ -disp back -time 30 -off 107:160 Ball.gif \ -disp back -time 30 -off 54:80 Ball.gif exit
I ran into a problem. All browsers let the document background override the background of the GIF. As I had decided that the image should run within a table frame, my solution was to order the browser to set the background color of the table to what I had intended should be the background color of my image. The HTML code reads:
<TABLE BORDER=9 BGCOLOR="#0000FF" CELLPADDING=0><TR><TD> <IMG SRC="pausebillede.gif" WIDTH="591" HEIGHT="351" ALT=""> </TD></TR></TABLE>
If you have a fair idea of the structure of a GIF-file, skip this section, as it will not go into details.
Two GIF formats exist, called GIF87a and GIF89a.
GIF Signature | Contains the text GIF87A | |
Screen Descriptor | The size of the GIF screen i.e. the total size to be set off to all images below. Whether or not a Global Color Map follows - and if so - the number of colors used in the Global Color Map and the color used as background color. | |
Global Color Map | The default colors to be used in the images. | |
The Local Color Map is optional |
Image Descriptor | The size and the position of the following image. Whether or not a local color map should be used, and the size of it. |
Local Color Map | The colors to be used in the following image. | |
Image Data | Each pixel of the image is described by its color. Data are compressed (LZW). | |
GIF Terminator | Ends the GIF file |
The Color Maps are optional. The GIF87a specifications state that a Default Color Map should be used, if all Color Maps are absent. It says nothing, however, about what a Default Color Map is. Whirlgif needs at least one of them.
As you may understand, it is possible in a GIF87a file to define some sort of a bulletin board, with several pictures (images) on it. Very few GIF viewers can handle more than one image, and only a few of those will show the total screen with its background color. Browsers like e.g. Netscape, Opera, and the Internet Explorer can to some extend, but note my remarks about my problem with example 5 above.
GIF Signature | Contains the text GIF89A | |
Screen Descriptor | The size of the GIF screen i.e. the total size to be set off to all images below. Whether or not a Global Color Map follows - and if so - the number of colors used in the Global Color Map and the color used as background color. | |
Global Color Map | It is taken from the first image whether it contains a Global or a Local Color Map | |
Application Extension | Contains the Netscape Loop Marker | |
The Local Color Map is only written, if it differs from the global. |
Control Block | Tells whether or not a transparent color is defined, and if so, the color. The delay time before this (coming) image is to be presented. The Disposal method, i.e. what should happen after this image has been shown |
Image Descriptor | The size and the position of the following image. Whether or not a local color map should be used, and the size of it. | |
Local Color Map | The colors to be used in the following image, if they differ from the global. | |
Image Data | Each pixel of the image is described by its color. Data are compressed (LZW). | |
Comment Extension | An ASCII text. Either a user defined comment e.g. about who created the animation, or the standard comment that says that the file was compiled with Whirlgif, the release, and the number of images. | |
GIF Terminator | Ends the GIF file |
The above does not give all variants of the GIF89a formats. If you want to know more, refer to the specifications of the terms used in the second column.
Each Color Map takes up 3 times as many bytes as the number of colors. Color Maps in GIF files can have 256, 128, 64, 32, 16, 8, 4, or 2 colors. Most image processing programs can only treat the boldface numbers. Whirlgif can treat them all but depends on the abilities of your paint program(s), which often call the Color Map your palette.
If your aim is to make relatively small GIFs, it is a good rule to use as few colors as possible. In animated GIFs use the same Color Map throughout your images.
The -globmap option minimizes the amount of Color Maps by repacking each image to the nearest color in the Global Color Map. In this program it is a pure geometrical approximation. Sometimes it is a good approximation. If you use the -globmap option, view your animation carefully. The beauty is in the eye of the beholder.
If you are unhappy with the result, try first to edit the colors of the first image. Ultimately, you may have to reduce the number of colors in each frame by means of your favorite image processing program. For certain GIFs this may not drastically reduce the size of file. The reason is that the program may dither the colors to look almost unchanged. The LZW compression algorithm gives the best results with relatively large areas of either the same color or with a systematic pattern. Dithering, however, usually consists in making a random pattern of colors which to the eye blends to something acceptable.
The -minimize option makes Whirlgif find the smallest difference between two successive images, and only deliver the smallest rectangle covering the differences together with the position of the rectangle. It can give some really small animations.
If you try to minimize an animated GIF consisting of dithered images, the reduction in size may not be very astounding. A random dithering will usually yield a very large area with different random patterns.
Whirlgif contains options for setting the background color, as well as a transparent color. Neither Netscape nor the Internet Explorer distinguish - Opera tries it best to be bug to bug compatible. All treat both colors as transparent. Set them to the same index to avoid unexpected results in future browsers which may distinguish.
My advice is not to use the disposal method -disp prev. The result looks differerent in Netscape and the Internet Explorer.