Animated GIFs

Before describing "How it's done":

Please use a little self-restraint ;-)

Before going mad with animations all over your site, please remember that animated GIF files are much larger than a simple static image, and your visitor may not be pleased at having to download hundreds of kilobytes of gimmick!

The main reason why this little fellow is scattered about my site (apart from my childish glee at my first-ever attempt at an animation) is because it is only 1086 bytes in filesize.

The reasons it is so small are

It is a small image (only 36 x 36 pixels);
There are only ten frames (in the cine sense) of animation;
It has only 16 colours in its palette (not 256);
It has areas of flat colour (no 3D-effect shading) which compresses efficiently.

Basic requirements and method

To create animated GIFs (from a spritefile) you will need Peter Hartley's !InterGif6:
this is available by FTP from Argo
<ftp://ftp.argonet.co.uk/pub/Acorn/PD/WWW/InterGIF602.spk>
or from its author's website <http://utter.chaos.org.uk/~pdh/software/intergif.htm>.

The spritefile should contain one sprite for each frame of the animation.
Note that

The individual sprites must all be the same size;
They must all have identical palettes;
A browser without animation support will show the first sprite only.

I found it easier to create the originals in !Draw (though Artworks aficionados might prefer that) at a larger size, then scale them down and use !Paint=>Snapshot... to grab the sprites.

You can of course skip the !Draw stage, and start with !Paint (or an even fancier bitmap-editor if you prefer); it's probably easiest for me to describe how I created "smile.gif", and you can adapt that process to suit yourself.

How I did the example above

The finished size was to be 36 x 36 pixels; at 90 pixels per inch, that works out at 0.4 inches. So the first thing I did (in !Draw) was to draw a 2 inch diameter circle (ie five times final size) and fill it in cream. (I used a one-inch and tenth-inch grid, with "snap to grid" on).
I then drew the mouth as a single-section curve with a thick red line but no fill colour; the nose was a thin black curve (no fill colour), and the eyes were a thin black curve with a white fill. The eyes' iris was a small blue disc (and I reduced the grid subdivision to 1/20 inch for them).
That gave me the basic frame (mouth closed, eyes open).

I then made two copies of that for the mouth half-open and fully-open; added a second "upper lip" curve to the mouth, and moved the irises a bit.
That completed the drawfile "master" which I saved.

The next thing was to reduce to the final size: I could have set a 1:5 scale in !Draw; but chose to import the drawfile into !Publisher, with a scale of 20%, and "Quality" upped to setting 11 for full anti-aliasing.

The next and most important thing to do was to ensure the screen mode was a 16-colour one!

I then used !Paint's "Snapshot" facility to grab three separate sprites, one each of those three basic frames.

Each of those three sprites was loaded into !Paint in turn (and I restored the screen mode to a 256-colour one), and each was tweaked up as follows:
The outline of the eyes and nose had been anti-aliased into various shades of grey, so I restored them to a one-pixel-wide black line; I ensured that the anti-aliasing pixels around the red mouth were orange; and filled in the open mouth with white.
The colour light green did not appear anywhere, so I used local flood fill to change the background white (but not the eyeball white) to green; then changed the sprite to "with mask", and used global flood fill to change the green to transparent.
Then I edited the palette, using colours from the Windoze 216-colour set (where each of red, green and blue only take the values 0, 20%, 40%, 60%, 80% or 100%): the cream to a pale pink, the orange to a darker pink, and the red and dark blue to "pure" red and blue respectively;
it was vital that all three sprites finished up with identical palettes.

I then changed the names of the three sprites (not the sprite file name) to "01", "02" and "03" respectively. Next I saved sprites "02" and "03" into the spritefile containing sprite "01".
"02" was then copied (within the same spritefile) as "04", and "01" as "05"; that completed the mouth open-and-close sequence.

For the eye-blink, I copied "01" as "06" and "07", and used !Paint to put half-closed eyelids on "06" and fully-closed on "07"; then copied "06" as "08". And lastly made two final copies of "01" as "09" and "10".

That completed the creation of the multi-frame spritefile, which was saved.

!InterGif6 was then fired up, and the spritefile dragged to it.
"Looping animation" was confirmed as ticked, but "Interlaced" and "Join input files" should be "off". The offered default value of 8 csec for "frame delay" was accepted (but/and I don't think changing that makes much difference anyway); and "Transparency" was left at "Auto".
"Output" was confirmed as "GIF", but "Split output" left unticked.

Then the animated GIF file was saved out.

Reprise on minimising file-size

Don't make the sprite any larger than it needs to be:
if you double its dimensions (in each direction), that's four times the number of pixels;
Don't use any more colours than you need:
not only does the data for a 256-colour sprite uses twice as many bytes as a 16-colour sprite (before compression), but it needs 768 bytes for the palette alone instead of just 48;
and if you can get away with just four colours, better still;
Don't get carried away with making a feature-length movie:
keep it down to the least number of frames that will suffice;
Cartoon-style images and line drawings compress much better than subtly graded and shaded "3D" effects.

Remember that browsers that don't support animated GIFs will only show one static image: make sure that the first frame in the sequence will look all right in that situation.

John Alldred
26 Jan 1999
john@protovale.co.uk
http://www.protovale.co.uk/john/

Back to Home Page . . . . . . Back to "Tutors" page