GIF Construction Set Professional is a GIF animator. At its simplest level, it can assemble the source images of an animation sequence into an animated GIF file, suitable for use on a World Wide Web page. This is a bit like the observation that at its simplest level, an XJS Jaguar can be useful for picking up a few groceries. GIF Construction Set Professional represents the state of the art of GIF animation software. Among its many features are:

• Animation Wizard, a function to assemble animations from your source cells wherein the software does pretty much all the work.

• Supercompressor, which analyses your animations and looks for ways to store them in smaller files.

• Block Management, to resize, crop, colour-adjust and otherwise manipulate multiple blocks in an animation at once.

• Banners, to make sophisticated graphic text banners, with animation.

• Transitions, to create animated transitions between still graphics.

• Block Editors, to let you create and fine-tune your animations one image at a time.

There is, of course, a lot more to GIF Construction Set Professional. However, the software has been structured to let you use as much or as little of it as you need, without having the rest of it get in your way. GIF Construction Set Professional has a very short learning curve.

ItÆs worth noting that GIF animation as it appears on the web is something of a compromise. The GIF format was not really designed for this function, and it has been pressed into service for use on the web more through expediency than because of a perfect fit to the requirements of the Internet. While GIF Construction Set Professional will usually manage to shield you from the vicissitudes of the GIF format, you will need to know a few things about the nature of GIF files to make your animations behave themselves.

In reading this document, keep in mind that itÆs a tutorial, rather than an exhaustive reference. ItÆs intended to help you get up to speed with GIF Construction Set Professional as quickly as possible. To this end, it deliberately omits a fair bit about the softwareÆs more esoteric features.

You can find an encyclopedic discussion of absolutely everything there is to know about GIF Construction Set Professional in the Reference document installed with this software.

Secondly, if youÆre in breathless hurry to start generating animations, you might want to check out the Quick Start document installed with GIF Construction Set Professional. ItÆs a still more abbreviated tutorial, ideal for people who regard reading extensive documentation as a character flaw. You know who you are.

If you're really new to graphics, be sure to read the Introduction to Graphics document installed with GIF Construction Set Professional. It will familiarize you with the concepts upon which this software is based, and save your walls from considerable potential damage caused by you banging your head against them.

This document will make a few references to configuring GIF Construction Set Professional. While itÆs worth keeping in mind the software characteristics which can be configured, you neednÆt actually change anything to use this tutorial. ThereÆs a complete discussion of the configuration options for GIF Construction Set Professional in the Reference document.

Something Really Important

HereÆs the single most important thing you need to know about GIF files. If you read nothing else in the documentation for GIF Construction Set Professional, read this.

An image as itÆs seen by your eye, and by things like digital cameras, scanners and most decent imaging software, is represented as "true colour." True-colour images have a virtually unlimited number of available colours from which to draw. In a computerÆs sense, a virtually unlimited number is 16,777,216 colours, which is close enough to infinity for the purpose of this discussion.

These "true-colour" images are also referred to as "24-bit" images, because two raised to the power of 24 is 16,777,216. Somewhere in the heady days of your youth there no doubt lurks a prematurely-bald highschool mathematics teacher who would find this highly significant.

Because the GIF format harkens back to the adolescence of personal computers, wherein only rich people could afford systems with four megabytes of memory, GIF files can support a maximum of 256 colours, down somewhat from 16,777,216. In order to represent a true-colour image in a GIF file, some way must be found to do so using no more than 256 colours.

This is from whence almost all the problems with GIF files on the web arise.

There is a way to squeeze a true-colour image into a GIF file. It involves several steps. ItÆs worth noting that you wonÆt have to do any of this yourself - GIF Construction Set Professional will handle it for you - but you might be called upon to decide which of a variety of options to tell it to select.

1. First off, weÆll need to know which 256 colours to use in the GIF image being created. While a GIF file can only support 256 colours, each of the 256 colours can be drawn from the original 16,777,216 colours of a true-colour image. The 256-colour "palette" of a GIF file can be created by figuring out which 256 colours best reflect the colours in the original image, a process called "quantization."

   Alternately, we might decide to use a canned palette which contains an even dispersal of colours between pure black and pure white. This is called an "orthogonal" palette. There are good reasons for both choices, which weÆll deal with later.

2. Once we have a palette for the new GIF file, weÆll need to squeeze the true-colour source file down to use no colours save for those in the new palette. This can be done in one of two ways:

   • Each of the original colours can be replaced with the nearest colour in the new palette, a process called "remapping." Remapping is suitable for line art, but if you apply it to a photorealistic image, the result will look like an Andy Warhol poster.

   • A complex pattern of alternating dots can be used to simulate the original colours. This is referred to as "dithering." Dithering is capable of creating remarkably effective simulations of true colour, but with two notable drawbacks. The first is that having alternating dot patterns in your pictures lowers their apparent resolution and makes transparency effects a bit tricky. WeÆll get into the latter in greater detail a bit later. The second problem is that dithered images compress badly, often resulting in unworkably large files.

The left image is a true-colour graphic. The right image is the source true-colour graphic dithered to 256 colours. Note the visible graininess in the dithered image. This example has been dithered to an orthogonal palette to make its dithering artifacts more apparent. Dithering to a quantized palette typically results in fewer noticeable dots.

In creating an animation, itÆs often the case that multiple true-colour images, each having its own range of colours, need be squeezed into the claustrophobic back seat of the GIF format. GIF files for use on the web must apply the same 256-colour palette to all the images in an animation. GIF Construction Set Professional deals with this issue by deriving the best possible palette for all the images in an animation, what is called a "superpalette." Once again, you need not know how all this works, as long as you know what it means.

GIF Construction Set Professional will import images to create your animations with from most of the popular image file formats. These include GIF, PNG, PCX, BMP and JPG. The GIF format, as has been discussed, can support images having no more than 256 colours. As such, using GIF source images to build your animations is likely to confront you with the least dire colour problems of the sort discussed here. By comparison, all images stored in JPG files have 16,777,216 possible colours. Using JPG files as source images can require that you be somewhat more aware of how GIF Construction Set Professional will deal with too many colours. A great deal more will be said of this later.

PNG, BMP and PCX files can contain images having anywhere from two to 16,777,216 colours. If you plan to work with source images in a variety of file formats, we strongly recommend that you check out Alchemy MindworksÆ Graphic Workshop Professional software.

About Image Dimensions

Bitmap or "raster" images - the type of graphics which are stored in GIF files - have dimensions which can only be expressed in pixels. A pixel is one of the coloured dots that comprise a graphic.

A pixel is as big as the device which displays it wants it to be. A pixel displayed on your monitor will be ablut 1/75^th of an inch across. A pixel printed on a laser printer might be 1/300^th of an inch across. The same graphic displayed on your monitor and printed on a laser printer will be a lot smaller in the printed output for this reason.

Because itÆs impossible to say how big a pixel is in an absolute sense, itÆs also impossible to assign specific dimensions in inches to a graphic. You might note that a graphic occupies a two inch by three inch area of your monitor, but this is largely meaningless unless the party to whom you communicate this observation has the same brand of monitor, configured identically to yours.

Some applications allow you to work with bitmapped graphics like GIF files in inches or millimeters, but this is an illusion perpetrated for the convenience of people who donÆt much like the idea of objects with no fixed size. Software like this typically assumes that your graphics will be displayed at a specific resolution - that of your monitor or printer - and it calculates their image dimensions accordingly.

GIF Construction Set Professional always displays image dimensions in pixels.

Inside a GIF File

The most constructive analogy for a GIF file is a strip of movie film. Just as a movie is really a sequence of still images, so too is a GIF file a sequence of still computer graphics. There are several important distinctions, however:

• GIF files have far fewer frames than even really short, subliminal movies. At least, they do if you expect people to see them at your web page. Even relatively short animations can create uncomfortably large GIF files, which take a long time to download.

• GIF files can be made to loop, such that their contents play indefinitely. You can do this with a bit of movie film and a splicing block too, of course. Oddly, people will watch a looping GIF file for much longer than theyÆll typically sit around and watch the same twenty seconds of movie film played over and over.

• GIF files allow you to make portions of an image transparent, such that what is behind the GIF file will appear in the transparent areas. WhatÆs behind a GIF file will usually be the background of your web page.

The individual bits that make up a GIF file are called its "blocks." Each GIF file consists of several of the following blocks:

• Header Block: ThereÆs only one of these, every file has one, and itÆs always the first block in the file. It defines the dimensions of the area the pictures in the file will occupy, measured in pixels. It also stores the palette all the images in the file will use.

• Loop Block: If its present, this tells your web browser than the animation in your GIF file should loop. A Loop block can specify indefinite looping or a specific number of iterations. There can only be one Loop block in a GIF file, and it must appear immediately after the Header block if itÆs present.

• Image Block: This is what actually stores an image. It also specifies where the image is to be placed relative to the upper left corner of the area in which your animation will appear.

• Control Block: Control blocks precede Image blocks to tell your browser how to display the images they pertain to. A Control block includes information such as which areas to make transparent, how long the image should be displayed until the next image in your animation replaces it and what to do with an image once itÆs time for it to be replaced. This latter point is something of a refinement of GIF animation, and one which will be dealt with in greater detail presently.

• Comment Block: Comment blocks store hidden text. The text in a Comment block will not appear in your animation, but it can be viewed with GIF Construction Set Professional and many other applications. Comment blocks are useful for storing image information and copyright statements, among other things.

There are actually several additional types of blocks defined for the GIF format, but theyÆre not relevant to GIF files as they appear on the web, and they can be safely ignored for the moment.

GIF Construction Set Professional's Blocks

GIF Construction Set Professional manages GIF blocks in a way which will keep you from having to deal with some of the really grotty aspects of GIF files. Specifically:

• Because thereÆs only one Header block and one Loop block in a GIF file, GIF Construction Set Professional treats these as one block.

• Similarly, as Control blocks only appear in conjunction with Image blocks, GIF Construction Set Professional regards a combination of a Control and Image block as one block.

While GIF Construction Set Professional will open conventional GIF files, and it creates conventional GIF files when you save an animation, it hides any Loop and Control blocks while youÆre working on an animation. This will present you with fewer blocks to keep track of - a worthy consideration if youÆre juggling the elements of a complex animation - and it will obviate the possibility of getting the Loop and Control blocks of your animations in the wrong place.

Users of earlier versions of GIF Construction Set should note that this differs from the way the software used to work.

As will be discussed later in this document, each block in a GIF file can be edited - you can change block parameters such as the number of times a Loop block goes around or the number of pixels an Image block is offset from the upper left corner of the image area of an animation. Because an Image block includes its attendant Control block as far as GIF Construction Set Professional is concerned, editing an Image block also gives you access to all its Control block parameters. This, too, will be dealt with in greater detail shortly.

Open and View an Existing Animation

The simplest thing GIF Construction Set Professional is likely to be called upon to do is to open an existing GIF animation and allow you to watch it do its stuff. There are several GIF animations included with the GIF Construction Set Professional software. The simplest of these is BALL.GIF.

To open BALL.GIF:

1. Select Open from the File menu of GIF Construction Set Professional.

2. When the Open dialog appears, select BALL.GIF.

The BALL.GIF file will open in a document window. YouÆll see its Header block followed by a sequence of Image blocks, each displaying the graphic it contains. You might have to scroll the document window to see all the cells.

To view the BALL.GIF animation, click on the View button in the tool bar. A window will appear with the animated ball in it. When you get tired of the animated ball - something that should occur fairly quickly unless youÆre having a remarkably dull day - click in the animation window with your right mouse button to close it.

The EXAMPLE2.GIF file included with GIF Construction Set Professional is another animation. You can open and view it the same way as you did BALL.GIF. Note that when you open EXAMPLE2.GIF, the document window for BALL.GIF remains where you initially opened it. GIF Construction Set Professional allows you to have as many open animation documents as you like.

EXAMPLE2.GIF is arguably larger than would be practical for a web-page animation. ItÆs derived from the images in the Click Me advertisement installed with GIF Construction Set Professional. You might want to compare the graphics in the Click Me advertisement with the ones in EXAMPLE2.GIF. Notice the banding in the cover for the book Eye of the Dawn in EXAMPLE2.GIF. This is a result of having to squeeze all the colours in all the graphics in Click Me into the 256-colour palette of EXAMPLE2.GIF.

You can find an unlimited selection of animations on the world wide web. If you encounter an animation youÆd like to keep as youÆre surfing the web, click on it with your right mouse button. A menu will appear - select Save Image As to save it to your hard drive as a GIF file. You can then open the GIF file youÆve saved in GIF Construction Set Professional, as discussed above. This works for both Netscape and Explorer.

Let's Build an Animation

In creating an animation "from scratch," itÆs best to think of yourself as the animation artist, and of GIF Construction Set Professional as the animation camera. ItÆs your responsibility to create the source images which will form the action in your animation. GIF Construction Set Professional will put them together for you. In fact, GIF Construction Set Professional will do a lot of animating too, but weÆll deal with this later.

For the purpose of this exercise, weÆre going to create an animation from a sequence of cells provided with GIF Construction Set Professional. The source cells are stored in the files CELL0.GIF through CELL7.GIF. Note that while this exercise will use source images stored in the GIF format, you can build animations from JPG, BMP, PCX, PNG and TGA files as well.

The easiest way to build an animation is to use GIF Construction Set ProfessionalÆs "Animation Wizard." Animation Wizard will ask you a few things about how you want your animation to work and where the source images are, and it will then assemble your frames into a GIF file.

To activate Animation Wizard, click on the magic wand button in the tool bar. You can also activate Animation Wizard by selecting Animation Wizard from the File menu of GIF Construction Set Professional.

The Animation Wizard dialog works like a conventional Windows wizard - you can move back and forth through its screens by clicking on the Back and Next buttons. Each screen is set to a default value which will usually be correct - until you have a better understanding of how GIF animations work, you can safely leave them as they are.

For the curious, the fellow with excessive hair who seems to be looking for a lost contact lens at the left side of the Animation Wizard dialog is from a painting by William Blake entitled "Ancient of Days."

Click on Next in the first Animation Wizard screen to get started.

The first Animation Wizard screen will ask if you want to create a GIF file for use on a World Wide Web page. This actually gives Animation Wizard some guidance about how to choose a colour palette for your GIF file. The default value, Yes, is correct. Click on Next.

The second Animation Wizard screen will ask you if your want your GIF file to loop indefinitely or animate once and stop on the last frame. You can change this after you have built your animation if you like. Leave it at its default, Loop Indefinitely. Click on Next.

The third Animation Wizard screen will ask you how you want to handle the colour palette for your GIF file. This is easily Animation WizardÆs sneakiest trick question. HereÆs what these options mean:

• Matched to Superpalette: If you select this option, Animation Wizard will look at all the colours in all the graphics in your animation and derive a 256-colour palette which best reflects all your images. It will then remap all the colours in your source images to this palette. This option will usually give you the most attractive results.

• Matched to First Palette: If you select this option, Animation Wizard will build your animation using the palette of the first image you select. This allows you somewhat more control over the final use of colours in your animation, but it can result in some truly wild colour shifts if the colours used by the first image in your animation are radically different from those in your subsequent images.

• Photorealistic: If you select this option, Animation Wizard will dither your images to a palette with an even dispersal of colours from pure black to pure white. It selects a slightly different palette depending on whether you told it you wanted to create a graphic for use on the web or not. This option is a good choice for building an animation from source true-colour images, such as JPEG files, wherein the source images all have widely varying colours. The results can look a bit grainy, but this is often the best that can be achieved with the limited colour facilities of a GIF file.

• Drawn: This option uses the same palette as the Photorealistic option, but it remaps rather than dithers. This option is useful if youÆre building animation from line-art source images.

• Drawn in Sixteen Colours: This option behaves like the Drawn option, but it uses a palette with only the basic sixteen Windows colours. This is good for very simple animations with a restricted range of colours.

Unless you have a good reason to do otherwise, leave this screen set to Matched to Superpalette. Click on Next.

The fourth Animation Wizard screen will let you choose the delay between frames for your animation. This represents the time each image will appear before itÆs replaced by the subsequent image in the sequence. For historical reasons - which no one can quite recall the history of any longer - GIF files represent delay times hundredths of a second. A setting of 100, then, represents one second. The delay times of individual images or of your entire animation can be changed after Animation Wizard has created your animation. Set this value to ten hundredths, or one tenth of a second. Click on Next.

The fifth Animation Wizard screen will let you select the source images for your animation. Click on the Select button to open a File Open dialog. You can select multiple files at once. When you click on Open, the files you have selected will be added to the file list in Animation Wizard and the File Open dialog will appear again. Click on Cancel when youÆre done selecting files. Note that you must select at least two source images to create an animation.

In this exercise, select the CELL0.GIF through CELL7.GIF files included with GIF Construction Set Professional. Click on Next.

The final screen of Animation Wizard will appear when youÆre ready to build your animation. Click on Done. Animation Wizard will load each of your source files and construct your animation. This may take a minute or two. It will display its progress in the status bar at the bottom of the GIF Construction Set Professional application window. When itÆs done, it will open a document window like the ones that appeared when you opened a file earlier.

You can view your new animation by clicking on the View button. It can be saved to disk through the Save As item of the File menu.

Note that each animation created by Animation Wizard will be assigned a unique file name. The Save As function will let you change this to a name of your choice. ItÆs a really good idea to name your animation files with descriptive names.

ItÆs likely that the animations you create with Animation Wizard will require some post-production fine tuning. You might want to add transparent elements, move some images around, make some images display for different amounts of time and so on. Once an animation has been opened in a GIF Construction Set Professional document window - whether it got there through the Open item of the File menu, the Animation Wizard or any of the other ways to create animations yet to be discussed - itÆs ready for you to work on using the many tools available in GIF Construction Set Professional.

How Transparency Works

One of the reasons GIF files are used on web pages is their ability to manage image transparency. A transparent image is one in which some areas of the picture to be displayed are transparent and will allow the background colour or background texture of your web page to appear. Using transparency, for example, you can create an irregularly-shaped image and have it appear as such on your web page without a rectangular frame around it.

Transparency can be a bit frustrating if you donÆt understand what itÆs really up to.

GIF files manage colour through "palettes," as has been touched on earlier. This means that in a 256-colour GIF file, each pixel represents a number from zero through 255, rather than a specific colour. Each number is an index into the palette for the image. This means that if a pixel holds the number 10, and colour number ten in the palette is white, the pixel will be white. If colour number ten in the palette is bright purple, the pixel will be ugly.

While funky and not a little confusing, this arrangement allows GIF files to store pictures using less file space than would otherwise be the case.

A transparent GIF file is one in which one of the available palette colours has been defined as being transparent. For example, if colour number ten were to be defined as transparent, any pixels which were painted in colour ten would not appear when the image was displayed.

This is where transparency can get a bit peculiar. If colour number ten is white and you define colour number ten as being the transparent colour, all the white areas will become transparent. At least, this will be true if all the white areas in your graphic are actually painted in colour number ten. If colour number eleven happens to be white as well, and some of the white areas are painted in colour number eleven, only some of the white areas in your picture will ultimately display as transparent.

Pictures which have been dithered to get them into the available colour depth of a GIF file often include areas of alternating pixels of very similar colours. Attempting to apply transparency to such an image may leave you with a pattern of dots overlaying your transparent areas.

The GIF format allows only a single transparent colour per image.

This is the sort of stuff to make grown men weep, heroes quaver and little old ladies pull Uzis out of their oversize tote-bags to kill their poodles with. As a rule, transparency isnÆt usually workable in photorealistic GIF images unless you edit the images with a paint package to tidy up any stray colours that might be lurking about in your otherwise transparent areas. If you create a transparent GIF file with GIF Construction Set Professional and view it only to find that not everything you donÆt want to see is in fact transparent, some retouching is in order.

GIF Construction Set Professional has a built-in paint function which is exceedingly handy for this, as weÆll get to presently.

HereÆs the second most important thing to keep in mind about transparency. When you build an animated GIF file through Animation Wizard, your source images will be imported, as has been discussed. Any transparency information which they might have contained will not be imported. As such, even if you start with transparent source images, your animation will lack even the mere whisper of transparency when it finally opens in GIF Construction Set Professional. You must add transparency to your animations after they are created.

This, too, will be discussed in detail later in this document.

Finally, you should keep in mind that when a non-transparent animation is displayed by a web browser, each frame overwrites the previous one. In displaying a transparent GIF file, some areas of the image being painted will not overwrite the previous images, as theyÆll be transparent. This can result in animations which seem to leave bits of themselves behind.

To avoid this, each image of an animated GIF file must be overwritten by the background colour or texture of your web page before it is replaced by the next image. This is called "removing by background." WeÆll see how this is enabled shortly.

ItÆs worth keeping in mind that not all applications which display GIF files handle transparency. If you want to view a transparent animated GIF file correctly, use GIF Construction Set Professional, Graphic Workshop Professional or your web browser.

Finally, when GIF Construction Set Professional displays a transparent GIF file, it does so against a background of the background colour for the GIF file in question. The background colour is defined in the Header block for each GIF file - weÆll look at editing the Header block parameters in a moment.

This differs from the way transparency is handled by a web browser, which will ignore the background colour of a GIF file and display it against the background of your web page.

In working with transparent GIF files in GIF Construction Set Professional, itÆs a really good idea to set the background colour to something really ugly that youÆd never use in your images. At the very least, it should contrast markedly from the colour of the areas you wish to make transparent. Having done so, it will be easy to spot which areas are really transparent, and which are just painted in a colour similar to the colour youÆve defined as transparent.

WeÆll look at how to add transparency to existing GIF files later in this document.

Editing the Header Block

You can edit the parameters of most of the blocks in a GIF file using GIF Construction Set Professional. The exception is a type of block called an Application block, something which has not been touched on thus far. Application blocks are what GIF files use to hold mysterious contents which only certain applications know how to work with. GIF Construction Set Professional will refuse edit these blocks.

To edit a block, double-click on it in the document window for its animation. The appropriate editor window will appear.

If you double-click on the Header block for the BALL.GIF animation, youÆll see the Header block editor. ThereÆs not all that much youÆll want to do to the Header blocks of animations as a rule. HereÆs a quick overview of the controls and what they do.

• Screen Width and Screen Depth: Every animated GIF file knows how big an area in pixels it should occupy. These values are automatically calculated by GIF Construction Set Professional as you construct a GIF file, and never need to be entered manually.

• Background: This is the background colour used to display GIF files in GIF Construction Set Professional. ItÆs ignored by web browsers, but itÆs handy to make sure your transparency is working properly, as discussed earlier. Click on this button to select the background colour for the file in question.

  Because the background colour is selected from the palette of your GIF file, this button also provides a convenient way to see what the whole palette looks like.

  The number displayed by the Background button in the colour number of the background colour.

• Palette: For the most part, youÆll want to leave the palette functions of the Header block editor alone for a while. One possible exception to this is the Edit button, which will allow you to change specific colours in the palettes of your GIF files. ItÆs very important to keep in mind what editing colours actually means to a GIF file. If you change a colour in the palette of a GIF file, all the images in the file which use the colour in question will be affected.

• Loop: If you enable the Loop switch in the Header block, your GIF animation will be created with a Loop block. The Iterations value defines the number of times your animation will loop. If you set this value to zero, it will loop indefinitely.

Editing Image Blocks

Each frame of your GIF file is represented as an Image block. If you double click on an Image block in the document window for an animation, an Image block editor will appear. Seasoned users of GIF Construction Set will note that the Image block editor also includes a Control block editor bolted onto the side.

• Image Width and Image Depth: This is the dimensions of the image in question in pixels. You canÆt change these values per se, but if you resize the image, theyÆll be adjusted by GIF Construction Set.

• Image Left and Image Top: These are the number of pixels to move the image right and down from the upper left corner of the area the animation will occupy, as defined in the Header block. You can set these manually - they can also be adjusted interactively through the Preview function, to be discussed in a moment.

• Interlaced: By default, GIF images appear in your web page as you might expect - as each image is downloaded, it will be painted from the top down. If you enable the Interlaced option, theyÆll appear in interlaced order, in a non-linear sequence of lines. This makes it easier to see what a picture looks like before it has fully downloaded. ItÆs important to note that the Interlaced switch is ignored by most web browsers for GIF files having more than one Image block.

• Paint: The Paint button is unspeakably handy. Click on it, and the image associated with the Image block in question will open in Windows Paint. You can edit it in Paint. When you exit Paint, the modified image will be replaced in your GIF file. If you change the dimensions of the image youÆre working on in Paint, the Image Width and Image Depth values will change in the Image editor.

• Palette: The Palette functions of the Image block editor are even more arcane and potentially troublesome than those of the Header block. Ignore them.

• Control: If you enable the Control Block option, the Image block in question will be preceded by a GIF Control block, and youÆll be able to apply transparency, delay and removal characteristics to it. Animations must have Control blocks for each image, or dire things may happen when they hit the web.

• Transparent Colour: If you want to have an area of your image transparent, enable the Transparent Colour switch.

  You can select the colour to be transparent either by clicking on the colour button below the Transparent Colour switch - typically pretty tricky - or by using the eyedropped tool to the right of the colour button, the preferred method. Click on the eyedropper tool and the image associated with the Image block being edited will appear. Click somewhere in the area to be made transparent. Keep in mind the way transparency in GIF files works, as discussed earlier in this document.

  If you create an animation with transparency, make sure you set the Remove By value correctly, as discussed below.

• Delay: You can specify the time for which your image will be visible, as specified in 1/100ths of a second. While a delay value of zero is legal, itÆs a really bad idea, as some web browsers behave erratically when they encounter it.

• Remove By: The Remove By combo box will allow you to specify how your image should be dealt with once its delay time has expired and itÆs time to move on to the next image in your GIF file. There are four Remove By options, but only two of them are supported by all web browsers. If you select Nothing, your existing image will be painted over by the next image in your animation. If you select Background, your existing image will be painted over with the background colour or texture for your web page, and then the next image in your GIF file will be displayed. The latter is the correct choice for animations with transparency.

• Do not select Leave As Is or Previous Image for GIF files to be used on the web.

• Wait for User Input: This function is not supported by all web browsers. Do not select it for GIF files to be used on the web.

• Preview: If you click on the Preview button, youÆll see your image displayed against the background colour defined in the Header block for your GIF file. You can click and drag in the image area to reposition it interactively. Click with your right mouse button somewhere in the Preview window to close it. Note that the Image Left and Image Top values in the Image editor window will be changed if you move the image in the Preview window.

Editing Comment Blocks

Comment blocks are the only other block type youÆre likely to encounter in working with GIF files for the web. YouÆll find a Comment block at the end of the list of blocks for BALL.GIF. If you double click on a Comment block, a Comment block editor will appear. You can modify the text in a Comment block by editing the contents of this dialog.

The Format button changes the font used to display the text in GIF Construction Set ProfessionalÆs Comment editors. It does not affect how it will appear in other applications which might display your comment blocks.

GIF Construction Set Professional may append one or more comment blocks to the GIF files it writes. While these are discussed in greater detail elsewhere in the documentation for the software, there are two specific Comment blocks you might want to keep in mind:

• Unregistered Shareware: If you use an unregistered shareware copy of GIF Construction Set Professional to create a GIF file, a comment block to this effect will be added to the file. You can delete these within GIF Construction Set ProfessionalÆs document windows, but theyÆll be replaced as soon as you save the file.

  At such time as you register GIF Construction Set Professional, you can nuke the Unregistered Shareware comment blocks in GIF files you created by opening each one with your registered software, deleting the Unregistered Shareware Comment blocks and saving the files. Only a registered copy of GIF Construction Set Professional can successfully delete an Unregistered Shareware Comment block.

• Identify Files: By default, every file created by GIF Construction Set Professional will include a Comment block which identifies who created it. You can disable this feature entirely by switching off Identify Files in the GIF Construction Set Professional Setup dialog, or configure the software to use text of your own choosing. See the Reference document for more about the latter.

Adding Blocks to a GIF File

If you create animations through Animation Wizard, chances are all the blocks that youÆll need in your GIF files will be in place as soon as Animation Wizard stops waving its wand and casting its spells. There are instances in which you might want to add blocks to a GIF file by hand, however. Specifically, you can use GIF Construction Set ProfessionalÆs block insertion functions to add still more images to an animation, and to add Comment blocks to a GIF file.

In fact, the block insertion function also supports a third type of blocks, called "Plain Text" blocks. Plain Text blocks are not supported by all web browsers, and should not be used if youÆre creating GIF files for use on the web. When you see text in a GIF file, youÆre really looking at a graphic which looks like characters.

LetÆs insert a Comment block into BALL.GIF.

If you click on the Header block of BALL.GIF, youÆll find that a blue or red line will appear along the bottom of the block. This is the "insertion caret." Think of it as having the same function as the flashing text cursor in a word processor. Whenever you insert a new block into a GIF file with GIF Construction Set Professional, the new block will appear after the block which currently has the insertion caret. The insertion caret will appear on the block youÆve most recently clicked on.

With the insertion caret visible in the Header block, you can insert a block after the Header block either by:

• Clicking on the green plus button in the tool bar

or

• Selecting Insert Block from the Edit menu

In either case, a menu will appear. Select Comment as the type of the new block to be inserted. A Comment block will appear after the Header block in BALL.GIF.

You can edit the text in your new Comment block by double clicking on it, as discussed earlier.

The other common use of the Insert Block function is inserting Image blocks into an existing GIF file. This behaves the same way as Comment block insertion, save that you will be prompted for a file name to read your new image from, and most likely with a Palette dialog once your new image has been read. This latter dialog will allow you to tell GIF Construction Set Professional how to deal with an image having a colour palette which differs from that of the GIF file youÆre trying to insert it into. Palettes will be discussed in greater detail later in this document. Consult the Reference document for more about the options in the Palette dialog.

Deleting Blocks from a GIF File

You can delete any block except the Header from a GIF file. Click on the block in question to select it and click on the minus button in the tool bar, or hit the Del key on your keyboard.

Note that all the selected blocks in the GIF file in the uppermost document window will be deleted by the Delete function. The number of currently selected blocks is displayed in the status bar at the bottom of the GIF Construction Set Professional application window.

If you delete a block and then change your mind, you can bring it back to life through the Undo function of the Edit menu. Undo only undoes the most recent change to a GIF file.

By default, GIF Construction Set Professional will warn you if youÆre about to delete more than one block.

Adding Transparency to a Still GIF File

GIF files converted from other formats or saved from paint applications typically do not include transparency information. If you need a transparent still GIF file, you can enable transparency for an existing graphic with GIF Construction Set Professional. HereÆs how to do it:

1. Open the GIF file in question into a GIF Construction Set Professional document window through the Open item of the File menu. You should see a Header block followed by an Image block. You might see one or more Comment blocks or other secondary blocks elsewhere in the file. You can ignore these.

2. Double click on the Image block. An Image block editor will appear.

3. Enable the Comment Block item in the Image block editor if itÆs not currently enabled.

4. Enable the Transparent Colour switch in the Image Block editor.

5. Use the eyedropper tool to select a transparent area for your GIF file.

6. Make sure the Remove By item is set to Nothing.

7. You can use the Preview function to preview you graphic and make sure the transparent areas are as you expected them to be. Keep in mind, however, that if the transparent colour and the background colour as defined in the Header block of your GIF file happen to be the same colour number - for example, if theyÆre both zero, a common occurrence - it may be less than apparent whether youÆve successfully applied transparency to the Image block youÆre editing. See the discussion of transparency elsewhere in this document for more about this.

8. Click on OK in the Image block editor.

You can save your transparent GIF file through the Save or Save As items of the File menu.

Supercompressing a GIF File

In creating GIF animations for the web, itÆs important to make the final GIF files that are referenced by your HTML documents as small as possible. The unspeakable, breathtaking excellence of your animations wonÆt impress anyone if they lapse into comas while waiting for your GIF files to download.

In some cases, itÆs possible for sufficiently sneaky software to squeeze some unnecessary pixels out of your animations and in so doing create smaller GIF files. The sufficiently sneaky software is the Supercompressor function in GIF Construction Set Professional.

ItÆs important to keep in mind what Supercompressor is really up to. All GIF files are compressed. Supercompressor attempts to meddle with the blocks in your GIF files to make them more compressible. In some cases it can do quite a bit in this respect, and in others itÆs wholly ineffective. If thereÆs nothing to squeeze out of your GIF file, Supercompressor will not make it any smaller.

Supercompressor makes GIF files smaller by doing one or more of the following to them:

• Palette Compression: Just because your GIF file has a 256-colour palette doesnÆt mean that all the colours in its palette actually appear in its images. The Supercompressor surveys all the images in a GIF file and deletes those colours from the fileÆs palette which arenÆt actually referenced by any of them. If it finds enough unused colours, it will often be able to make the palette smaller, and hence recompress the file with a lower colour depth.

• Prune Overlapping Frames: If an animation consists of multiple frames in which only the area in the middle of each frame actually contains action that changes, the Supercompressor will prune away the edges of the frames and move whatÆs left down and to the right so it appears in the correct location.

• Redundancy Compression: If an animation consists of multiple frames with a lot of identical areas, the Supercompressor will replace the identical pixels with a transparent colour. Since all the replaced pixels will be one colour - the transparent colour - and areas of pixels that are all the same colour typically compress better than areas of pixels that are a variety of colours, the resulting GIF file will get smaller.

• Block Stripping: GIF files donÆt need Comment, Plain Text or Application blocks to display themselves on your web page. The Supercompressor can remove them for you.

The Supercompressor will not change the way your animation appears, but it might well change what the individual frames look like. ItÆs a profoundly good idea to save your original source images under a different file name when you use the Supercompressor. Once an animation has been Supercompressed, itÆs will often be very, very difficult to edit.

The Supercompressor will not perform pruning or redundancy compression on GIF files which have one or more Image blocks with transparency enabled.

To use the Supercompressor, open a GIF file in GIF Construction Set Professional and select Supercompressor from the File menu. Note that you can disable any compression types you donÆt want to use, and Supercompressor will disable any compression types it decides are inappropriate for your GIF file. Click on Start to begin compressing. The OK button will be enabled when the Supercompressor is done. When you click on OK, your supercompressed graphic will open in a new document window.

If the Supercompressor canÆt find anything to squeeze out of your GIF file, it will tell you so and the OK button will not be enabled.

Investigating Banners

There are a number of enormously fun toys in the Edit menu of GIF Construction Set Professional, including Banners, Transitions, Wide-Palette GIF, LED Signs and Spin. To a large extent, these are beyond the scope of this tutorial. However, you might want to have a quick look at the simplest of them, Banners, to get a feel for what you can do with them.

The Banners function creates sophisticated text banners, which can be either still or animated. If youÆre interested in creating complex banner advertisements, have at look at the Build Banner Ads that Rock article at our web page.

To create a banner, select the Banner item from the Edit menu of GIF Construction Set Professional. The Banner dialog will appear.

The tabs at the top of the Banner dialog select the type of special effects to be added to your text. These are:

• Simple: Your text will be drawn in a solid colour, with or without a drop shadow.

  

• Embossed: Your text will be drawn with highlight and shadow lines to make it appear to rise from the surface of your monitor.

  

• Teletype: Your text will be drawn one character at a time, in a solid colour, with or without a drop shadow.

  

• Glow: Your text will be drawn against a black background with a simulated glow and optional neon tubes.

  

• Soft shadow: Your text will be drawn in a solid colour with a soft shadow behind it.

  

• Texture: Your text will be cut from a tiled texture and drawn with an optional drop shadow.

  

• Scanners: Your text will be drawn in a solid colour, with or without a drop shadow, with a bright scan line animated over it.

  

• Waves: Your text will be drawn a moving wave between the Crest and Trough colours.

With the exception of Teletype and Scanners, all the Banner effects can be used either to create single lines of still text or to create text that rolls in from the right. The Teletype and Scanners effects are always animated.

There are a number of parameters to adjust for each of the banner effects. HereÆs what they do. Note that not all these parameters are applicable to all the effects - they wonÆt appear on the tabs where theyÆre not needed.

• Text colour: The colour your text will be drawn in.

• Shadow colour: The colour the drop shadow behind your text will be drawn in.

• Background colour: The colour of the area behind your text and its shadow.

• Glow colour: The backlight colour for the Glow effect.

• Tube colour: The colour for the neon tubes in the Glow effect, if theyÆre enabled.

• Scan colour: The colour of the scan line in the Scanners effect.

• Backscatter colour: The colour of the glow to the right and left of the scan line in the Scanners effect.

• Outline colour: The colour used to outline the text in Textures effect.

  Note that as with all the colour buttons in GIF Construction Set Professional, you can change any of the foregoing by clicking on the button in question and selecting a new colour.

• Font: Click on this button to select the typeface, size and effect for the text youÆd like to create. GIF Construction Set Professional will create text banners using any alphabetic font in your system. Note that it will not work with symbol fonts or with most two-byte fonts, such as Kanji, Arabic or Hebrew.

• Drop shadow: Enable this item to show a drop shadow behind your text.

• Rolling: Enable this item to create an animated text banner, and disable it to create a single image of the text youÆre entered.

• Transparent: Enable this item to make the background colour of your text banner transparent. Note that this can be changed after your banner is created by editing the Image blocks for its individual frames.

• Compress Palette: If this item is enabled, GIF Construction Set Professional will Supercompress the palette for your text banner once it has been created, possibly creating a smaller final GIF file. This will increase the time it takes to complete a banner - you might want to leave it disabled if youÆre just experimenting.

• Anti-alias: If this item is enabled, your text banners will be created with anti-aliased text, which will help reduce the jagged appearance of diagonal edges of characters. See the Reference document for a more detailed discussion of this feature.

• Cells: This is the number of individual images that will be created for your animated text banner. More cells will result in smoother animation, but also in larger files. In some cases, this value is more of a suggestion than an absolute number, and GIF Construction Set Professional might decide to create an animation with one or two more or fewer images.

• Delay: This is the number of 1/100ths of a second that each image in your animation will appear for. Increase this number to slow your animation down.

• Offset: This is the offset in pixels between your text and its drop shadow.

• Pause: This is the delay for the last frame in your animation, right before it loops. It can be used to build in a pause before the banner begins to appear again.

• Palette: This is the palette to be used to create your banner. Palettes are discussed in greater detail in the Reference document installed with GIF Construction Set Professional.

• Banner Text: This is the text to be used to create your banner. Banner text can occupy up to 260 characters.

• Neon and Glow: These items select which of the Glow effects GIF Construction Set Professional will create.

• Radiance: This tells the Glow effect how bright to make the blow behind the text it draws. Very high radiance values can produce really strange banners.

• Extra Soft: Enable this item to increase the softness of the soft shadows in the Banner function.

• Outline: Enable this item to have your texture banners drawn with an outline.

• Dither: Enable this item to have the colours in the textures used by the Texture effect dithered to the palette of the banner being created. Disable it to have them remapped.

• Texture: Click on this button to select the texture to be used by the Texture effect. You can add your own textures to the Texture effect. The Reference document includes a more compete discussion of textures.

• Wide Bar: Enable this item to increase the width of the scan line created by the Scanners effect.

YouÆll probably want to experiment with the Banner function at length to really get a feel for what itÆs capable of. When youÆve entered some text, chosen a banner type and set up its parameters, click on Test to see how your banner will look as an animated GIF file.

Click on OK when youÆre happy with the banner youÆve created. Your banner will open in a GIF Construction Set Professional document window. You can save it to disk by selecting Save As from the File menu.

Palettes and Why You Should Fear Them

The palettes in GIF files are one of the most troublesome aspects of using GIF animation. As was touched on earlier in this document, you really need to get them by the throat if youÆre to successfully use GIF Construction Set Professional.

HereÆs a quick overview of how palettes behave in web browsers and in Windows in general, such that youÆll be able to get æem by the throat without one of their many tentacles creeping up from behind you and tearing your head off like a prop in a low-budget horror flick.

This sort of thing happens in cyberspace almost daily. No foolinÆà

A GIF file can have 2, 5, 8, 16, 32, 64, 128 or 256 colours. For the purpose of this discussion, weÆll allow that GIF files have 256 colours. Keep in mind, however, that this really means that GIF files have 256 colours drawn from a possible 16,777,216 colours. As such, itÆs a fairly safe bet that two distinct GIF files having 256 colours each will probably not have the same 256 colours.

A computer running Windows has a maximum number of colours it can display once, as defined by the screen driver installed in it. ThereÆs an exhaustive and oftentimes traumatic discussion of Windows screen drivers in the Drivers document installed with GIF Construction Set Professional.

A few years ago, many Windows systems were shipped with screen drivers capable of displaying no more than sixteen colours. In our current more enlightened times, pretty well anything capable of running Windows 95, 98 or NT can display at least 256 colours, with 32,768 colours or more becoming increasingly common.

A system which can only display 256 colours can confront web browsers with a problem. If two GIF files appear on a web page, each with its own unique 256-colour palette, the computer displaying the web page will have too few colours to handle both pictures. This is the sort of thing that makes Windows sulk.

ItÆs important to prevent Windows from sulking, so a web browser which finds itself running on a machine with a 256-colour screen driver will make sure that all the graphics it displays use the same colour palette. It can do this by remapping or dithering all its graphics to a common, or "safe," palette. The safe palette actually has 216 colours - evenly dispersed between pure black and pure white - rather than 256, leaving room for Windows to add some colours that it reserves for drawing its menus, window borders and other on-screen regalia.

A web browser which finds itself running on a computer that can support 32,768 or more colours can ignore the whole palette issue and display all the graphics it encounters using the palettes they were born with.

The processes of dithering or remapping graphics to a common palette often results in pronounced colour shifts or loss of image quality. You can make sure this doesnÆt happen to your graphics by always building them with the standard safe palette - GIF Construction Set Professional offers it as one of its default palette options. The catch in doing so, however, is that this palette very often lacks all the colours youÆll need to create the animations you have in mind.

Choosing the colour palettes and the colour strategy for your graphics involves something of a compromise. You can have really attractive graphics - within the limits of what can actually be accomplished with a 256-colour palette - which will look superb on higher-end computers and a bit uglier than they have to on 256-colour machines, or you can have less impressive graphics which will look the same on all machines.

Our sense of this issue is that people with 256-colour systems are used to looking at ugly graphics, and a few more ugly graphics wonÆt mean much to them. Unless your web page is actually titled "Funky Old Computer UsersÆ Group," you should probably build your GIF files with the most advantageous use of colour possible - well-chosen, unique palettes for each one - and let the pixels fall where they may.

Don't Stop Reading Now

GIF Construction Set is a powerful and exceedingly flexible application for creating web page graphics. To make the most of it, be sure to check out the Reference document and the other documentation files included with this package.