GIF Construction for your create Gif File

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, color-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 color." True-color images have a virtually unlimited number of available colors from which to draw. In a computer’s sense, a virtually unlimited number is 16,777,216 colors, which is close enough to infinity for the purpose of this discussion.
These "true-color" 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 colors, down somewhat from 16,777,216. In order to represent a true-color image in a GIF file, some way must be found to do so using no more than 256 colors.
This is from whence almost all the problems with GIF files on the web arise.
There is a way to squeeze a true-color 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 colors to use in the GIF image being created. While a GIF file can only support 256 colors, each of the 256 colors can be drawn from the original 16,777,216 colors of a true-color image. The 256-color "palette" of a GIF file can be created by figuring out which 256 colors best reflect the colors in the original image, a process called "quantization."
Alternately, we might decide to use a canned palette which contains an even dispersal of colors 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-color source file down to use no colors save for those in the new palette. This can be done in one of two ways:
o Each of the original colors can be replaced with the nearest color 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.
o A complex pattern of alternating dots can be used to simulate the original colors. This is referred to as "dithering." Dithering is capable of creating remarkably effective simulations of true color, 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-color graphic. The right image is the source true-color graphic dithered to 256 colors. 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-color images, each having its own range of colors, need be squeezed into the claustrophobic back seat of the GIF format. GIF files for use on the web must apply the same 256-color 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 colors. As such, using GIF source images to build your animations is likely to confront you with the least dire color problems of the sort discussed here. By comparison, all images stored in JPG files have 16,777,216 possible colors. 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 colors. 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 colors. 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 colored 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/75th of an inch across. A pixel printed on a laser printer might be 1/300th 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 it's 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.

NOTE: GIF Construction Set Professional’s file dialogs remember the last directory in which you open or save a file. When GIF Construction set Professional is first installed, they’ll all be looking at the directory you installed it in, by default \GIFConstructionSetProfessional on your C drive. If you have experimented with GIF Construction Set Professional prior to reading this tutorial, you’ll probably have to navigate back to the directory where you installed GIF Construction Set Professional to find the files to be discussed in this document.


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 colors in all the graphics in Click Me into the 256-color 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.
As an aside, it's probably worth noting that GIF Construction Set Professional actually includes two distinct animation wizards – the one you're about to use, and the "classic" Animation Wizard, which behaves like a conventional multiple-panel Windows wizard. You might want to use the latter if you're following a tutorial in an older web page design book which discusses the original wizard. See the discussion of the GIF Construction Set Professional Setup dialog if you need to use the classic Animation Wizard.
The Animation Wizard dialog behaves a bit like Windows Explorer. It includes three panels. The leftmost panel is a navigation tree to select the folder on your hard drive where your source images reside. The center panel will display a list of all the available image files in the folder you select with the left panel. The right panel will display the list of images you've selected to build your animation with – it will be empty when the wizard first appears.
Here's another aside – you can return all the configurable items of the Animation Wizard to their default state by holding down the Shift key when you click on the magic wand button in the GIF Construction Set Professional tool bar. If you experimented with the wizard before you got to this tutorial, you might want to do this now to make sure it's set up properly.
The Animation Wizard includes a fair number of configurable settings, but they default to values which will create attractive animations without any immediate need to adjust them. The discussion of the Animation Wizard in the Reference document accompanying this application will describe all its features in detail, once you've mastered its basic operation.
The first time you open the Animation Wizard, it will point itself at the parent directory into which you installed GIF Construction Set Professional. Notice that the GIF Construction Set Professional folder in the left navigation tree panel is open. You should see five files listed in the center panel, the first of which will be BALL.GIF.
The source images for this example reside in the html folder below the GIF Construction Set Professional parent directory. Locate the html entry immediately below the GIF Construction Set Professional item in the left panel and click on it. The contents of the center panel will change, showing you the BALL.GIF graphic at various degrees of rotation.










CELL0.GIF CELL1.GIF CELL2.GIF CELL3.GIF CELL4.GIF CELL5.GIF CELL6.GIF CELL7.GIF

You need to select the files CELL0.GIF through CELL7.GIF in the center panel. To do this:
1. Click once on CELL0.GIF.
2. Scroll the center panel down if needs be to reveal CELL7.GIF.
3. Hold down the Shift key on your keyboard and click on CELL7.GIF. All the files between CELL0.GIF and CELL7.GIF will be selected as well.
If you make a mistake in selecting your source files, right-click in the middle panel and select Select None from the menu that appears to unselect all the files and try again.
Once you've successfully selected all eight source files in the center panel, click on the Add button in the Animation Wizard tool bar. Your selected graphics will be copied to the right panel.
You're now ready to build your animation. Click on Build. You'll see the status bar move at the bottom of the GIF Construction Set Professional application window – fairly quickly, as this is not a particularly involved animation – and the Animation Wizard window will close after a moment or two. Your completed animation will appear in a new GIF Construction Set Professional document window. Click on the View button – the sunglasses button – to see it animate.
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 color 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 color through "palettes," as has been touched on earlier. This means that in a 256-color GIF file, each pixel represents a number from zero through 255, rather than a specific color. Each number is an index into the palette for the image. This means that if a pixel holds the number 10, and color number ten in the palette is white, the pixel will be white. If color 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 colors has been defined as being transparent. For example, if color number ten were to be defined as transparent, any pixels which were painted in color ten would not appear when the image was displayed.
This is where transparency can get a bit peculiar. If color number ten is white and you define color number ten as being the transparent color, 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 color number ten. If color number eleven happens to be white as well, and some of the white areas are painted in color 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 color depth of a GIF file often include areas of alternating pixels of very similar colors. 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 color 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 colors 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 color 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 color for the GIF file in question. The background color 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 color 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 color to something really ugly that you’d never use in your images. At the very least, it should contrast markedly from the color 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 color similar to the color 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.

NOTE: If you edit a block and decide not to keep the changes you have made, you can abandon them by clicking on Cancel in the editor window. If you click on OK in an editor window and then realize you’ve changed something you shouldn’t have, you can undo the most recent change made to your GIF file by selecting Undo from the Edit menu of GIF Construction Set Professional.


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 color 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 color for the file in question.
Because the background color 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 is the color number of the background color.
• 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 colors in the palettes of your GIF files. It’s very important to keep in mind what editing colors actually means to a GIF file. If you change a color in the palette of a GIF file, all the images in the file which use the color 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 Color: If you want to have an area of your image transparent, enable the Transparent Color switch.
You can select the color to be transparent either by clicking on the color button below the Transparent Color switch - typically pretty tricky - or by using the eyedropped tool to the right of the color 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 color 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 color 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 color 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.

NOTE: If you copy a bitmap to the Windows clipboard, either from within GIF Construction Set Professional or from another application, such as Graphic Workshop or Windows Paint, you can insert it into a GIF file as an Image block in much the same way as you would insert an image from a graphic file. Select Paste from the Edit menu.



________________________________________


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 Control Block item in the Image block editor if it’s not currently enabled.
4. Enable the Transparent Color 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 your graphic and make sure the transparent areas are as you expected them to be. Keep in mind, however, that if the transparent color and the background color as defined in the Header block of your GIF file happen to be the same color 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-color palette doesn’t mean that all the colors in its palette actually appear in its images. The Supercompressor surveys all the images in a GIF file and deletes those colors from the file’s palette which aren’t actually referenced by any of them. If it finds enough unused colors, it will often be able to make the palette smaller, and hence recompress the file with a lower color 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 color. Since all the replaced pixels will be one color - the transparent color - and areas of pixels that are all the same color typically compress better than areas of pixels that are a variety of colors, 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.
• Color crushing: GIF files with small palettes typically compress better than GIF files with large palettes, all other things being equal. The down side to this observation is that GIF files with small palettes – and hence fewer colors to work with – usually don't look as good as they would with a full palette of 256 colors. Palette size is a tradeoff between file size and visual quality.
Color crushing allows you to force your animations to get by with smaller palettes than they started with. The color crushing function will devise a small palette based on the distribution of colors in the images of your animation. The number of colors in your final palette will be no larger than the value in the Palette Size field of the Supercompression dialog.
Note that unlike the other options in Supercompression, color crushing will degrade your animations, and cannot be undone with the Reconstruct function of GIF Construction Set Professional. In some cases, it's worth the hit to arrive at smaller files. None the less, use it carefully.
Plan to experiment with this option to get a sense of the Palette Size settings that result in an acceptable level of image degradation and the sorts of file sizes you're after.
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.

NOTE: The Supercompressor is good, but it’s not God. It can’t take a half-megabyte bloated pig of a GIF file and Jenny Craig it down to ten kilobytes just ‘coz you really need a small file. Really huge complex animations typically require a rethink to get them down to manageable dimensions.



________________________________________


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 color, 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 color, 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 color 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 color, 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 colors.
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 color: The color your text will be drawn in.
• Shadow color: The color the drop shadow behind your text will be drawn in.
• Background color: The color of the area behind your text and its shadow.
• Glow color: The backlight color for the Glow effect.
• Tube color: The color for the neon tubes in the Glow effect, if they’re enabled.
• Scan color: The color of the scan line in the Scanners effect.
• Backscatter color: The color of the glow to the right and left of the scan line in the Scanners effect.
• Outline color: The color used to outline the text in Textures effect.
Note that as with all the color buttons in GIF Construction Set Professional, you can change any of the foregoing by clicking on the button in question and selecting a new color.
• 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 color 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 colors 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.

NOTE: The Banner dialog will remember all the parameters you set in it. If you create a banner and then decide to change something in it later, you’ll be able to recreate it if you haven’t changed any of the parameters since you initially set it up. Once they’ve been created, banners are just graphics – you can’t open them and edit them as you would a text document.



________________________________________


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, 4, 8, 16, 32, 64, 128 or 256 colors. For the purpose of this discussion, we’ll allow that GIF files have 256 colors. Keep in mind, however, that this really means that GIF files have 256 colors drawn from a possible 16,777,216 colors. As such, it’s a fairly safe bet that two distinct GIF files having 256 colors each will probably not have the same 256 colors.
A computer running Windows has a maximum number of colors it can display at 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 colors. In our current more enlightened times, pretty well anything capable of running Windows 95, 98 or NT can display at least 256 colors, with 32,768 colors or more becoming increasingly common.
A system which can only display 256 colors can confront web browsers with a problem. If two GIF files appear on a web page, each with its own unique 256-color palette, the computer displaying the web page will have too few colors 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-color screen driver will make sure that all the graphics it displays use the same color palette. It can do this by remapping or dithering all its graphics to a common, or "safe," palette. The safe palette actually has 216 colors - evenly dispersed between pure black and pure white - rather than 256, leaving room for Windows to add some colors 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 colors 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 color 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 colors you’ll need to create the animations you have in mind.
Choosing the color palettes and the color 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-color palette - which will look superb on higher-end computers and a bit uglier than they have to on 256-color 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-color 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 color possible - well-chosen, unique palettes for each one - and let the pixels fall where they may.