What is GIF animation
Tools for the job
Using GIF Construction Set
The technical stuff
Adding graphics
Loading a small graphic first
Effects
References
Top 10 (more advanced) tips

What is a GIF animation

Creating an animated GIF file allows you to emulate a Java or Shockwave application such as a scrolling banner, without having to write a line of code. However, GIFs don’t allow you to incorporate sound or interactivity which you can create with Java and Shockwave. However, if all you want is a quick and easy animation then GIFs are great.

The GIF file format allows you to store multiple images in the one file, together with information telling the viewing program how long to wait before displaying the next image. It is this timed sequential display of images that gives us an ‘animated’ effect. In addition GIFs can include a ‘loop’ allowing the animation to play over and over again.

While, in the past, we’ve suggested you make sure your graphics are as small as possible, GIF animations can be bigger because they display as they load. However if you have too many files in your animation you’ll find that it probably won’t run smoothly the first time because of the time taken to download each image. If the file contains a loop, though, it’ll run faster the second time as the file will be loaded from your browser’s cache and not downloaded again.

Tools for the job

To create an animated GIF you’ll need a series of bitmap graphics. When you are starting, use the same palette for all of them and make them the same size. Save each of the files as a separate bitmap file, eg a .bmp, .gif, .jpg, .pic, .pcx, .wpg etc. You’ll find it easier to remember which order they belong in if you save them with sequential filenames eg pic01.bmp, pic02.bmp etc.

You can use your own bitmap files or these eight example files for you to download: pcuser1.bmp, pcuser2.bmp, pcuser3.bmp, pcuser4.bmp, pcuser5.bmp, pcuser6.bmp, pcuser7.bmp, pcuser8.bmp.

Now, to create an animated GIF file, you’ll need some additional software and one of the best programs is the shareware GIF Construction Set. It's available on our January 1997 PC User Offline CD-ROM, and from Alchemy Mindworks' Web site at http://www.mindworkshop.com/alchemy/alchemy.html.

Using GIF Construction Set

GIF Construction Set has a Wizard which helps automate the process of creating an animated file. However, we’ll step through creating a file from scratch just so you can see how it is done because at some stage you’ll need to know the basics. Our instructions create an animated PCUser flag from the files pcuser1.bmp - pcuser8.bmp.

Open the GIF Construction Set and select File, New and you’ll see the Header block appear on your screen. Each line in the file is called a block and there will always be one header block in a file.

Now select Insert, Image and choose the first file in the animation, in our case pcuser1.bmp. If you get the screen shown left (click on image to see the full-sized pic), select Use this image as the global palette and click OK. Continue to select, in order, all the graphics for your animation, pcuser2.bmp through to pcuser8.bmp. If your graphics appear in the file list in order, you can insert them as a group by selecting the first and, holding down the shift key selecting the last and clicking OK.

Now select the Header block and select Insert, Control. With the Control block selected, click on Edit to reveal the dialog box pictured right. As you’ll want your graphic to have a transparent background select the Transparent color check box and, using the eyedropper tool, select the orange background color from the graphic. Set the Delay to 1 (1/100ths of a second) and select Remove by: Background and click OK.

With this Control block still selected, select the Edit menu and click on Copy. Now click on the first Image block and select Edit, Paste. Repeat this so that every Image block is preceded by a Control block. Notice that each Control block is pasted immediately after the selected block.

Test your file by selecting View and notice how it runs once and then stops. To repeat the animation, select the Header block and click Insert, Loop. The completed file is shown in picture left -- the block and comment blocks are added by the program when the file is saved and the Header block size information is altered at that time too.

Save the file as pcuser.gif and create a simple web page like that pictured right.

The technical stuff

A GIF file is made up of a number of blocks. It will always have a Header block and one Image block and it can contain other Image blocks, Control blocks and other types of blocks not covered here. When you open a GIF file in the GIF Construction Set you see it, not as a single image, but rather as a collection of blocks defining it.

A Control block affects the image immediately following it, so only include one Control block for each Image block in the file. The Control block allows you to set the Transparency information for each graphic and specify the delay after the image has been loaded. User input is not supported by Netscape and don’t use Remove by: Previous image as it isn’t compatible with Netscape.

In Netscape 2 the number of iterations in the Loop block is ignored and the animation will loop forever if the Loop block is present. Netscape 3 will not ignore the number of iterations, and setting them to 0 will provide infinite looping; 1 plays the animation twice (ie first time and one repeat); 2 plays it 3 times etc. To play it once only, omit the Loop block altogether. You’ll find that the Loop block will always appear as the second block in the file.

Adding graphics

We’ve pointed out throughout this series that, although adding graphics to your web page can make it visually more appealing, it will also slow it down. Keep in mind the tradeoff between speed and looks with any graphic, although because they display as they download, you can allow yourself a little more leeway if you use animated GIFs.

The tag for including your animated GIF in a file is <IMG SRC = "pcuser.gif">, the same as for any graphic. You can place the graphic in a table or use the ALIGN attribute to control text flow around it as we showed in last month’s column.

Loading a small one first

In our tutorial on using graphics in your Web pages, we showed you how you could use the tag <IMG SRC="parrot.gif" LOWSRC="parrot_s.gif" ALT="A crimson parrot " WIDTH=200 HEIGHT=152> to load a low resolution graphic first, which is replaced by the higher resolution graphic as it is downloaded.

We pointed out that this is a Netscape extension and not incorporated into HTML 3.2, so not all browsers will support it, however some web designers get a similar effect by using an animated GIF. In this case the GIF file would contain both the low resolution graphic and the higher resolution one and load the lower resolution one first, replacing it with the higher resolution one as it was downloaded.

The following two files show two ways of doing this. In parrot1.gif the lower resolution graphic is centred in the area that the higher resolution (and larger) graphic will eventually take up. This has been done by editing the Image block and positioning the smaller graphic in from the left and down from the top of the position the larger graphic will eventually occupy. In parrot2.gif the lower resolution graphic is the same size as the higher resolution one so there is no need to ‘center’ it in the area that the larger resolution graphic will occupy as they’ll occupy the same space.

Effects

The possible animation effects you can get are limited only by your imagination, try creating logos which explode onto the screen or which dissolve in and out. Or perhaps create a more classical moving animation or a tickertape information display. Remember, though, that as with any effect, less is more, so choose one or two animations for your page and resist the temptation to overdo it.

References

To check out the animations discussed in this article, and a couple of additional ones, click here. If you see an animation you like, save it to your local hard disc, open it in the GIF Construction Set and ‘edit’ the blocks to see how the effects have been achieved.

You should also try Royal Frazier’s great tutorial at http://www.reiworld.com/royalef/gifabout.htm.

Top 10 (more advanced) tips

1. Netscape will not display Plain Text, so don’t include Plain text blocks in your images. However, try the GIF Construction Set’s Banner option (Edit, Banner) for a quick and easy text banner!.
2. Although many browsers support animation, many don’t. Those that don’t will usually display only the first or last image from the file, so make sure they are useful images.
3. Keep the number of images in an animation as small as possible and keep your palettes small - the fewer the colors in a file, the smaller it will be and the faster it will load.
4. Although you can mix images with different numbers of colors eg a 16 color image and a 256 color image, don’t mix palettes. Load the image with the larger number of colors first and set it as the global palette. Map all subsequent images to this palette.
5. If you experience color problems (usually it will show as a color shift), make one large graphic which includes all the graphics for your animation and load it first, setting it as the global palette. You can delete it later but still leave the palette information there.
6. If you are using background transparency, choose a color as the transparent color that still looks OK in case the browser doesn’t support transparency! And use the same color in all the pictures unless you want a kaleidoscope of backgrounds!
7. When faced with the Palette dialog, use Dither this image to the global palette if you have a photo and use Remap this image to the global palette if you have a line drawing or a simple (non photographic) graphic.
8. In the Header block set the width to the width of the widest graphic and the height to that of the tallest graphic. If you have pictures smaller than the final GIF file, position them within the larger area using the Image block options for Image left and Image top.
9. If you’re setting transparent information for your images, use the Remove by: Background setting for each image unless you want the previous images to appear together with the current ones.
10. Use the same palette and graphic size for all images when you are starting out and you’ll avoid many typical ‘newbie’ problems.

By Helen Bradley & John Hilvert