If you enjoy this page, please help support it.

I want it all, and I want it all covered in chocolate!
Create sophisticated web page animations that look professional, download quickly and blow people away.
It's lonely at the top, but you eat better.

You can use Alchemy Mindworks' animation tools to build web banners and other commercial animations that look leading-edge, state-of-the-art and cooler than liquid helium vacationing on Neptune. This article will walk you through the step-by-step procedures we've used to build a number of the real-world banners at our web pages, and show you how to apply them to yours.

But first, a word from our sponsor...

Some of the graphics at this page were created, managed and enhanced with Graphic Workshop Professional and GIF Construction Set Professional from Alchemy Mindworks. You'll no doubt see banners here that were assembled with Animation Workshop. To learn more about these applications, please click on the foregoing links or visit the Alchemy Mindworks home page.

The Alchemy Mindworks page also features Pagan Daybook to start your day with whichever god seems appropriate — the painting to your immediate right was drawn from its database of artworks — Presentation Wizard to assist you in creating multimedia Windows presentations, The Ultimate Screen Clock to give you unprecedented mastery over time and space... well, over time, anyway... and various other epic works of software.

Modesty would forbid my mentioning the extensive listing of my books herein if I were at all modest.

PLEASE DON'T COPY THIS PAGE

The contents of this page are copyright © 1995 — 2017 Alchemy Mindworks. Some portions are copyright © 1995 — 2017 Steven William Rimmer. The copyright holders specifically prohibit reproduction, transmission, duplication or storage of this page or any portion thereof in any electronic or physical medium, under any circumstances. Reproducing all or part of this page against our express wishes may result in severe civil and criminal penalties. The lawyers made us say that.

Please contact us for reproduction rates if you'd like to reproduce all or part of this page on paper. If you like this page and wish to share it, you are welcome to link to it, with our thanks.

Ingenuity and creative inspiration can't be programmed into software. These qualities can't be generated by a wizard or found in a library of templates, either. They are, however, the things which will make your banner advertisements stand out from the howling background noise of the web.

If you've been using the Internet for more than an hour and half, you'll no doubt have noticed that rare indeed is the web page without advertising oozing copiously from every hitherto unused square inch of your monitor. A great deal of the web is paid for by advertising — much as a great deal of television and popular print media are paid for by it as well.

Making your web banner advertisements noticeable in a sea of noise that could overwhelm a diesel locomotive which has just decided to take up bungee jumping is a challenge. It requires an understanding of the medium in which you'll be working, mastery of the software involved and no mean allotment of ingenuity and creativity.

This article will introduce you to the tools you'll require to build banner ads that rip out onto the information superhighway and blow the doors off everything else with wheels or pixels — your choice of metaphors — but you'll still be responsible for coming up with ideas for the banners you'll be assembling.

All the example banners at this page are real-world advertisements that we've created for our own products — you'll find them flashing, scrolling and making spectacles of themselves at various locations around our web pages, in addition to serving as exhibits here. These banners were created using:

  1. Alchemy Mindworks' GIF Construction Set Professional and its animation plugins.
  2. Alchemy Mindworks' Graphic Workshop Professional.
  3. Alchemy Mindworks' Animation Workshop.
  4. Alchemy Mindworks' PNG/MNG Construction Set and the same aforementioned animation plugins.
  5. Alchemy Mindworks' e-Paint.
  6. Windows Paint.
  7. Morgan the Newf.

Morgan the Newf is a 150-pound drooly black dog — he lumbers in late at night now and again and slimes the keyboards of computers with ugly graphics on them. He provides a degree of artistic criticism in this regard. You might be able to create your banner advertisements using only the software items on the foregoing list if you're bereft of wildlife.

In fact, you might not need all of the foregoing software either, depending upon what you'll be building.

It's worth pointing out that this article assumes that you'll be familiar with the software it discusses. In the event that you're new to any of the foregoing — excluding Morgan the Newf, with whom you probably wouldn't want to get up close and personal — you'll save yourself a considerable degree of head bashing if you work through their tutorials and read their reference documents before you go any further.

Graphic divas and anyone who's spent ten grand or more on some sort of post-secondary fine arts education will no doubt wonder about the advisability of the next to last item on the foregoing list, Windows Paint. Also known as "Cheeso-paint," "Windows Paintbreath," and "SneezeBrush," Windows Paint should probably come with an About dialog that says "I am become death, the killer of files." Singularly inadequate for almost everything, it's a fine example of the observation that free software is usually worth what it costs.

About the only thing that Windows Paint does well is editing palette-based images with no anti-aliasing or other high-end graphic tricks. GIF files — the file format of choice for web page animations — are palette-based images. If you attempt to work with these graphics using more capable image editing software — Photoshop or e-Paint, for example — you'll probably find that in its efforts to be clever, it will mangle your pictures.

Some of the graphics to be discussed in this document require a really dumb paint package to create and manipulate successfully.

Here's a quick overview of what the software in the foregoing list will be used for in the context of building banner ads.

GIF Construction Set Professional: In its simplest sense, GIF Construction Set can be thought of as an animation camera, assembling source still images into a movie. However, it includes a wealth of additional tools to manipulate said movies once they're in the can. It also accepts our animation plugins, which can generate a number of catchy effects with very little typing and no detectable artistic abilities on the part of its users.

Graphic Workshop Professional: Graphic Workshop does just about everything worth doing with still graphics, and an exhaustive list of its capabilities would be beyond the scope of this article. Among the things you'll probably want to use it for in these exercises are preparing source graphics to build into banners and adjusting the sizes of pictures exactly to make them fit where they're needed.

Animation Workshop: The functionality of Animation Workshop and GIF Construction Set are easily confused and you might want to check out a comparison between the two. Animation Workshop will let you assemble animations from various disparate elements, including text, still graphics, frames and other animation — and export GIF files suitable for use on the web. Unlike GIF Construction Set, it won't require that you know how GIF files work — it will figure out how to create what you want without much outside assistance.

PNG/MNG Construction Set: One of the things you'll invariably want to import into animations built with Animation Workshop are other animations. You can use GIF files in this capacity, but as will be touched on in a moment, GIF files represent a graphic compromise — they degrade images stored in them. You can achieve better results if you use animations stored in a non-degraded format. The format in question are MNG files, as created by PNG/MNG Construction Set.

Animation Plugins: The animation plugins install into GIF Construction Set Professional and PNG/MNG Construction Set to extend their capabilities. The plugins add things like special-effects text, animated technology, animated transitions and three-dimensional objects. In a practical sense, they create a lot of useful effects for you which you'd otherwise have to create — usually pretty laboriously — by hand.

e-Paint: E-Paint can be thought of as PhotoShop without the learning curve — or the impressive price tag. It's a sophisticated paint application, but you can master it in a few hours. It will turn up in this article primarily as a convenient way to perform selective image processing.

You can download evaluation copies of Graphic Workshop Professional, GIF Construction Set Professional, Animation Workshop, PNG/MNG Construction Set and e-Paint, install them on your system and get up to speed with them.

Note that each of these applications includes extensive documentation installed with it, and if you try to use the software without first having read the manuals, an especially bad-tempered badger will sneak into your house late at night and gnaw off your toes. Badgers are much-misunderstood creatures — they're cute, but they have sufficient jaw muscles to crush bones. You have been warned.

How can I be overdrawn when I still have checks?Click on the Help button in the tool bars of these programs to access their manuals.

Here's something else to keep in mind, once you're done fending off badgers. GIF Construction Set can open and meddle with existing GIF files, including animations you find on the web. If you don't fully understand an aspect of the discussion of these banners, you can peek at the banners themselves to see what was done.

You can also use this facility to investigate the contents of banner ads and other animations you see on the web. To do this:

  1. Right-click on an interesting animation you find on a web page.
  2. Select Save Picture As or Save Image As from the menu that appears.

This having been said, just because you can swipe animations from web pages to see how they work doesn't mean it's a really good idea to abstract their content. Doing so might well cause great slavering hoards of lawyers to descend upon you, making an attack of badgers seem a mere nuisance by comparison.

FLAMING GIFS

Animations in web pages are stored as GIF files for the most part. There are other options, which we'll get to in a moment, but they embody several catches.

The GIF format is ancient as technology goes — it dates back to 1987. Because computers were small and graphic hardware primitive by contemporary standards back then, the GIF format was designed to have modest graphic capabilities. It was never intended to be used as it's used on web pages.

The designers of early web browsers adopted GIF because it was the only commonly-used format available at the time that was close to being what they required. This is not to say it was an ideal choice.

Better animation formats exist, but they've seen fairly slow acceptance. If you want to build animations that you can be sure will play properly in everyone's browser, you'll want to build them as GIF files.

This having been said, the GIF format includes several important restrictions which makes it a questionable place to put your graphics.

Color depth: Pictures stored by scanners and digital cameras use what is referred to as "true color." Each pixel in such an image can be one of 16,777,216 distinct colors, which is as close to infinity as computers typically want to get. GIF files, being cranky and primitive, allow for a maximum of 256 colors, albeit any 256 colors you like. You can do a lot with 256 colors if you're sneaky — or if your software is — but this still represents a serious reduction in image quality.

Timing: Achieving precise control over the playing speed of computer-based animation requires that the timing of each frame be adjustable to within 1/1000th of a second. GIF files allow timing in increments of 1/100th of a second, or a tenth of the accuracy you'd ideally like to have.

Compression: Small animations download sooner than large ones, and file size is a major screaming point among web page designers. GIF uses a crude 20-year-old compression technology that should have been recycled into beer cans ages ago.

Keep in mind that while GIF is something of a dinosaur — and a pretty badly-evolved, embarrassingly uncoordinated dinosaur at that — it's the dinosaur we're all stuck with. Flawed though it may be, it's the animation format of choice for web pages. Complaining about it won't help.

It's worth noting that there are two other animation formats available for use on the web:

Flash™: The Flash format is a product of the Macromedia company. It's a really well-designed, robust animation format. It's not, however, supported directly by web browsers. It uses a plugin. The Flash plugin currently ships with most web browsers, so it's almost universally available. However, there are several not entirely compatible versions of Flash — and Flash plugins — extant.

Perhaps more to the point, Flash is used almost exclusively as an advertising medium, and an increasing number of users are appreciating that they can nuke a lot of the web's excessive advertising by disabling the Flash plugins in their web browsers.

Cool as it is, using Flash as an animation format runs the risk of your banner ads not being visible to everyone who encounters them.

Flash also exhibits some file size issues, depending upon how it's used. Many of the better tricks that can be applied to GIF files to squeeze them into confined spaces and make them download quickly aren't applicable to Flash files.

The animation software mentioned above can export to Flash files.

As an aside, one of the leading-edge technologies GIF Construction Set Professional and PNG/MNG Construction Set can apply to the animations they export to Flash files is the inclusion of sound in them — your animations can become talkies. At least, it's one of their leading-edge technologies if you like the idea of talking web pages.

MNG: The MNG format was designed as a successor to GIF, with a great many of GIF's shortcomings addressed. It's supported by a growing number of browsers, although the MNG support that has appeared in them has been somewhat funky as of this writing. It would arguably be unwise to use MNG as an animation format for web pages just yet. The animation software mentioned above can export to MNG files as well.

Here's one more thing you'll probably want to know about GIF files. The GIF format was until quite recently the subject a patent — or more specifically, the compression technology used therein was. The owner of the patent kept quiet about it until GIF became the de facto standard for web page animations, and then popped up and started demanding royalties from anyone who created software to deal with GIF files. A not insubstantial volume of rumor and disinformation surrounded GIF files and the potential legal issues of their use as a result.

The patent in question has expired, and to the best of our knowledge there are currently no legal issues surrounding the use of GIF files.

THE ZEN OF BANNERS

If there's a single important consideration in creating web page banner ads, it's this. You will have the undivided attention of your audience for no more than five seconds. In that time you will have to convince them that your banner or whatever it's hawking is sufficiently interesting for them to abandon what they've come looking for at the web page its on and watch your banner dance, juggle polecats or flash lewdly. If your banner really works, they'll click on it and visit the page it links to. If it doesn't, they're history. You have five seconds. Make the most of them.

As a final introductory note, while we sincerely hope this page will assist you in creating your own animated banners, we are unable to assist you further in doing so. Specifically, we're unable to answer questions about the techniques discussed herein or suggest ways to realize the banners you have in mind.

We do undertake custom banner design as our time and resources permit, but we typically want pretty impressive stacks of cash for doing so. The altitude of the stacks of cash in question is discussed at our Fee-Based Support page — we recommend that you be sitting down when you read it.

A WORD ABOUT FILE SIZE

Grab something solid — this next bit might get rocky. This is an introduction to the first real-world issue inherent in building web page animations.

GIF files are compressed using an old and funky compression algorithm called LZW — something you don't have to know anything about. The effectiveness of the compression used by GIF files is determined by the "color depth" of the image to be compressed and by the amount of detail, or "complexity," in the image itself. Color depth is the maximum number of colors the image can support. This ranges from two to 256 colors for GIF files, in increments of even powers of two. The even powers of two are 2, 4, 8, 16, 32, 64, 128 and 256. A picture with sixteen colors will compress as a sixteen-color image. A picture with seventeen colors will compress as the next even power of two, to wit, 32 colors.

The maximum number of colors in an image is also referred to as its "palette size".

Here's a bit more cyber-speak for discussing the number of colors in a graphic. The palette size is often referred to as the number of "bits" of color supported by the image. The number of colors can be defined as two raised to the number of bits in question. As such, a one-bit image has a maximum of 21 colors, or two. An eight-bit image has a maximum of 28 colors, or 256. This actually means that there's room in the palette in question for as many as 256 colors — in many cases, some of the color slots in an image palette may be unused.

GIF files, as was noted earlier, support a maximum of eight bits of color, that is, 256 distinct colors. Digital camera images — having a color depth GIF can only dream about — have 24 bits of color. 224 is 16,777,216, just in case you were wondering where that really large number came from.

Image complexity is a tricky issue. When it compresses an image, a GIF file writer looks for unbroken horizontal lines of identical colors. When it finds such a line, it compresses all the information in the line into a "token", a symbol which can later be expanded to the original line. An image with lots of long, unbroken lines can be compressed to a relatively small number of these tokens, and as such, into a small file.

If you create a large image in which the entire image area is a single color, it will compress down to almost nothing when it's stored in a GIF file. Sadly, people surfing the web are rarely impressed by solid-color rectangles having no other content.

As you add detail to an image — text, drawing elements, pictures and so on — the lines of unbroken pixels get shorter, and a GIF writer must use more tokens to represent them. This means that it must create larger compressed GIF files. If you attempt to compress sufficiently complex images, a GIF writer can actually generate negative compression — it will be forced to use so many tokens that the compressed file it writes will be larger than the uncompressed source image it started out as. This is regarded as a pathological case, and it rarely happens in practice.

Photorealistic images and computer-generated three-dimensional art present GIF files with their nastiest compression problems — these are the obese Twinkie-munching couch-potatoes of on-line graphics. In order to correctly reproduce photorealistic images, 24 bits of color are required. This being vastly more color depth than a GIF file can support, some cheating is required to create an eight-bit GIF image that looks convincingly like the 24-bit image it started out as.

This cheating is properly called "quantization" and "dithering," something else you won't need to know anything about. Using mind-numbingly complex algorithms, quantization and dithering creates photorealistic eight-bit images by using patterns of alternating colored dots to simulate the colors which were in the 24-bit source image but don't really exist in the final eight-bit image. This can be surprisingly effective, but it has a catch. Patterns of alternating dots are the most difficult thing for a GIF writer to compress. Photorealistic images typically produce the largest file sizes.

An animated GIF file can be thought of as the digital equivalent of movie film — things move on your monitor by painting multiple still images on your screen quickly enough to create the illusion of movement. GIF files handle multiple images in a singularly inflexible way. Specifically:

  • Each image to be displayed must be stored separately. This means that if you want to display the same image six times in different places on your banner, for example, you must store six copies of the same image in your final GIF file.
  • GIF files can only loop through the entire file. You can't loop through just those frames that you want to animate. You must design complex banners that allow for this. Think of a strip of movie film with its ends Scotch-taped together.
  • While the GIF format allows a small image painted over a large one to remember what the area it painted over looked like and replace its divots later on, this feature is not supported by web browsers. As such, you must also store graphics of any background areas that might require replacing.

All these issues can help swell the size of your final files.

We consider 100 kilobytes to be the largest realistic size for banner advertisements — allowing that many users of the Internet are still connected to it by modems, this seems to be the largest file size one can expect people to sit around and wait to be downloaded. This number is open to considerable argument — users of the net are getting increasingly snappy connections to cyberspace, with DSL and cable modems becoming common. However, they also seem to be experiencing shorter attention spans with the increasing content density of most web pages. Exceed this upper limit at your own peril — a brilliant, cutting edge nouveau-something banner ad isn't of much relevance if no one waits long enough to see it.

Having said this, we break this rule periodically for our own banners.

It's also worth mentioning the Supercompressor feature of GIF Construction Set in this context — a worthwhile function, this, but it's periodically misunderstood. The supercompressor can make your GIF files considerably smaller under certain circumstances, but it does not summon forth compression miracles. If it's confronted with a GIF file having no air left to squeeze out of it, it won't do much of anything.

The Supercompressor performs several specific types of analysis on the GIF files it's given to squeeze. First of all, it does palette compression. It looks through all the images in a source GIF file and keeps track of which palette colors in the file are actually being used. If it finds that there are enough unused palette entries to drop the file down by one or more powers of two, it will create a new palette using only the required colors and fiddle all the images in the file accordingly.

Secondly, it does image pruning. It looks at the successive images of a multiple-image GIF file and eliminates areas in later images which are identical to areas in earlier ones. Here's a simple example of how this works. Assume that the second image is to be painted over the first one in an animated GIF.

So many cats, so few recipes...

In this case, the second image can be pruned such that only that part of it which wasn't already painted by the first image needs to be updated.

Finally, it does redundancy compression. It looks for areas in subsequent images which are identical to the areas in a previously drawn image. When it finds them, it will replace them with transparent pixels. Since all transparent pixels in an image are the same color, an area of transparent pixels will typically compress more readily than the image pixels it replaces.

If you attempt to supercompress a GIF file with few or no unused palette entries and no overlapping redundant image data, the Supercompressor function won't be able to make it any smaller.

TEXT: WORDS TO LIVE BY

Banner advertisements usually embody at least some text — in many cases you'll use quite a lot of it. Text can serve both as information and eye-catching graphic elements if you use it well — a worthwhile consideration in a medium with severely restricted bandwidth.

Well-chosen text typically creates relatively simple graphic images which compress readily. You can create banners with quite a bit of text that will still squeeze into relatively modest files.

In choosing the fonts to be used in your banners, keep in mind that ornate typefaces which look sophisticated on paper often appear as road-kill in the vastly lower resolution of a web page banner. Simple typefaces, while not as visually distinctive, can be a lot more effective because they're easier to read.

Most of the TrueType fonts you're likely to encounter have been designed to look good at high resolutions, on paper. Two exceptions to this are the Arial and Times New Roman fonts which come with Windows. These look fairly reasonable at small point sizes in banners. You'll also probably find that the Small Fonts font installed with Windows is useful for very tiny text. It's not a TrueType font — it's only available in a few point sizes — but it's clear and readable in circumstances wherein Arial looks like alien graffiti.

A few of the banners to be discussed in this document use additional fonts, ones which were not supplied with Windows. Please note that we are unable to e-mail you these fonts. There are innumerable font archives on the web — Google will find enough of them to fill your hard drive.

Because web pages are in fact two-dimensional entities, one fairly obvious way to make your banner advertisements stand out is to create the illusion of depth. Text effects which use light and shadow are a powerful tool in this respect, and considerably easier to implement than they probably appear.

The most realistic three-dimension text is that created by a 3D rendering package — the 3D Effects plugin for GIF Construction Set works well in this regard. Here's an example of 3D rendered text.

When I'm not in my right mind, my left mind gets really crowded.

While 3D objects have their place, they don't lend themselves to much content before they overflow the bounds of good taste and banner sizes.

Most of the banner ads illustrated here use much simpler techniques to make their text look as if it has depth. Highlight and shadow lines can make text look like it's raised from or etched into a surface. Here are some examples:

It's easier to pass a camel through the eye of a needle if it's been through a blender first.

If you look at these closely, you'll notice that the illusion of the text being three-dimensional has been created by lines around it or behind it which simulate the effect of light reflecting from a raised edge, or being cast into shadow. The light is assumed to be in the upper left corner of the graphic in these examples.

These text effects were created with the Text Effects #2 plugin for GIF Construction Set. You can create similar effects with the Text objects of Animation Workshop, with our e-Paint software and by hand by overlapping several copies of the same text in different colors in a paint application.

These text effects typically look better with simple fonts.

The Text Effects #2 plugin can create a lot of other text effects — and some of them are pretty intense. Used sparingly, they can both attract people to your banner ads and convey some content in a single element.

In the beginning there was nothing. Which exploded.

Finally, you can build animated text into your banners — these text animations were also created with the Text Effects #2 plugin.

Whenever I feel blue, I start breathing again.
Time is what keeps everything from happening at once.
I have a liberal arts degree - do you want fries with that?
Earth is full. Go home.

Banner ads which include text elements usually draw them using "anti-aliasing." This is another term graphic designers like to bandy about without explaining it. Anti-aliasing is a way for graphic software to make the edges of things look smoother than they really are.

Everything drawn on the surface of your monitor is rendered in pixels, small squares of colored light about 1/75th of an inch across. While pretty hard to see as individual objects, if you draw a line of pixels which is something other than horizontal or vertical, the corners of the pixels will become apparent, and the edge of the line will look jagged.

It's possible to create the illusion of smooth lines rendered in pixels by filling in the jagged bits with pixels that are part way between the color of the line and the color of the background it's drawn on. This process is called anti-aliased drawing. When it's applied to drawing text, it makes the text so rendered appear much more attractive.

Big brother is watching reruns.

You'll probably want to use anti-aliased text for all but the smallest type in your banner ads. Because the edges of anti-aliased objects are more complex than simple lines, they don't compress as well, and you'll experience a slight size penalty in your final GIF files, all other things being equal. It's arguably worth the extra few bytes.

Animation Workshop and the Text Effects #2 plugin will create anti-aliased text, as will our e-Paint software. Windows Paint will not.

In selecting fonts to use in a complex animated banner, you might want to keep in mind an axiom of commercial page design. No page should use more than one serif font and one sanserif font unless there's an obvious visual reason to do otherwise. Serif fonts are those with picks at the ends of the character stalks. Sanserif fonts are those without picks, as shown here.

Always remember you're unique, just like everyone else.

If you're unaccountably enamored of ornate typefaces, keep in mind that they're usually more readable at larger point sizes. Small text is easier to read if it's set in a simple sanserif face.

PALETTES AND COLOR SELECTION

An animated GIF file should have a single global palette, with all the images in the file composed of colors drawn from this palette. This means that there can be no more than 256 distinct colors used by all the images in the file in question.

In theory you can cheat around this by using local palettes for some of the images in your file — that is, by defining special palettes for each image. Some GIF creators do so to improve the appearance of large or complex animations, and GIF Construction Set can be configured to allow you to do so as well. Local palette GIF files embody several catches. They don't get along with all web browsers, although this applies largely to earlier versions of the current browser software. Perhaps more to the point, most of the tricks the GIF Construction Set Supercompressor can use to reduce the sizes of GIF animations aren't applicable to GIF files having local palettes, with the result that such animations tend to be a bit large.

As a rule, GIF animations which are small enough to be reasonably used on a web page can be managed with global palettes.

When GIF Construction Set sets about to build a GIF animation, it creates a "superpalette." The 256 colors available to a GIF file should be the ones which best reflect the colors used by its images. Creating a superpalette requires that GIF Construction Set survey all the pixels in all the images in your source animation and devise a palette that will allow it to display them with the least amount of visible color shift. You really don't want to know what it has to go through to arrive at this, but it's pretty good at it.

When you build an animation through GIF Construction Set's Animation Wizard feature — its primary function for constructing animations from source graphics — you'll have two superpalette options available, Match to Superpalette and Dither to Superpalette. These probably require a bit of explanation as well.

Having created a superpalette, GIF Construction Set can work through each image to be built into the animation under construction and replace every pixel therein with the closest match in its palette. The resulting image will display with the sharpest possible resolution, but because 256 colors really aren't enough to create the illusion of a photorealistic image, the results will often look posterized and unattractive for photographic subjects.

Matching, or "remapping," pixels like this — what the the Match to Superpalette option in GIF Construction Set does — will result in the most attractive text and line drawings.

GIF Construction Set can get around this limitation by dithering, rather than remapping. Dithering is another of those mysterious processes you really don't want to try to understand — it was touched on earlier. It simulates colors it doesn't have available by displaying alternating patterns of dots drawn in colors it does have. Here's an example of very simple dithering. The green rectangle doesn't actually have a single green pixel in it. It uses alternating blue and yellow pixels to create the illusion of green.

Friends help you move. Real friends help you move bodies.

The dithering implemented by GIF Construction Set is a great deal more complex, but it performs the same trick — creating the illusion of colors that don't exist. Dithered images have several catches — they don't look as sharp as the images they've been dithered from, and, as noted earlier, they compress very badly.

You should select the Match to Superpalette or Dither to Superpalette options in GIF Construction Set's Animation Wizard based on the nature of your source graphics.

Animation Workshop's GIF export filter also knows how to create superpalettes, and it allows you to choose between remapping and dithering your graphics. However, it allows you to override this selection for specific frames in your animation, too. As such, you can have it dither most of your frames, but remap the ones that have text to achieve both faithful color reproduction and crisp text.

SOURCE GRAPHICS

Creating complex banner ads usually involves building several intermediate graphic elements and then combining them into a single animation. All the Alchemy Mindworks software discussed herein works with a variety of graphic file formats, and it might not be obvious which one is best suited to this process.

It would seem obvious to work with GIF source images, as the resulting animation will be a GIF file — this is, perhaps not surprisingly, the worst possible choice.

When GIF Construction Set or Animation Workshop get to work manipulating images to build a final animation, they work with true-color graphics. If you import something else — such as a 256-color GIF file — it will be promoted to true color. When all the pixel juggling is done and the dust settles, the true-color images will be remapped or dithered to 256 colors again to squeeze them into GIF's color space.

Because graphics typically start out as true-color images — having begin life in a digital camera, scanner, rendering application or paint program — squeezing them into GIF source files means dithering or remapping them, a substantial reduction of their image quality. If you run them through GIF Construction Set or Animation Workshop, they'll get dithered or remapped a second time, and their image quality will take a second hit.

You'll arrive at much better results if you eliminate the first hit and keep all your source graphics in the true-color domain.

You should store intermediate still images as true-color BMP or PNG files, common formats that most contemporary imaging software can work with, including all the Alchemy Mindworks software to be discussed here.

Avoid storing your intermediate graphics as JPEG files. JPEG files do store true-color graphics, but they do so in a funny way. They degrade the images stored in them to make them more readily compressible. This is a useful quality in creating graphics that will appear in web pages, where file size is often more of a consideration than image quality. However, if you use them as intermediate graphics to build animations with, your pictures will be degraded for no good reason.

Storing your intermediate files as JPEGs rather than PNGs won't make your final animations any smaller.

It's extremely important to keep in mind that the sizes of the files that store source images — and especially those which store JPEGs — bear no relationship to the file sizes of the animations that will ultimately be created from them. There are two reasons to keep this in mind:

  1. You'll waste a lot of time trying to make your animations small by storing your source graphics in small files.
  2. If you contact us for help with this matter — to wit, "I used 25 kilobytes of JPEG source graphics and wound up with a 100K animation so GIF Construction Set Professional clearly has bugs or some sort of influence by extraterrestrials" — we will send a leather-winged demon of the night to your house to rip out your heart and eat it while you stare into its blood-streaked eyes and scream hopelessly with your final breath. It's messy — don't go there.

THE MEDIEVAL RADIO BANNER

Among the simplest banner advertisements to appear at our web pages, the Medieval Radio ad plugs one of the ancientmusick.com CDs. It has very few elements, and can be assembled in seconds. While the one that appears at our web page was actually built with Animation Workshop, you can assemble this banner with nothing more than GIF Construction Set and several animation plugins if you really want to.

The first part of this section will deal with the procedure for creating this banner with GIF Construction Set. You might want to work through it even if you have Animation Workshop, as it will familiarize you with a substantial number of tools and techniques for applying GIF Construction Set to the problems of building complex animations.

Keep in mind that Animation Workshop can do this sort of thing in a fraction of the time, with a lot less typing and rodent action.

All those who believe in psychokinesis, raise my hand.

This banner consists of a background graphic, which includes a frame and some text, and an animated element, the rotating CD.

Here's how to create this banner in GIF Construction Set Professional. This example assumes that you have installed the 3D Effects #1 and Text Effects #2 plugins in GIF Construction Set Professional.

Let's begin with the frame. The Alchemy Mindworks web pages use banner ads that are 486 by 60 pixels — your requirements may vary, but you'll almost certainly have a specific set of dimensions to work with.

This banner has a static frame — it's just a picture with some text on it. If you have a high-end paint application, such as PhotoShop or e-Paint, you can create it like this:

  1. Create a new document having the dimensions 486 by 60 pixel and a red background color. The actual red color used here is 156,0,0.
  2. Draw a black line around the outside of the frame one pixel thick.
  3. Draw in the text, leaving room for the animation at the right side of the frame. Be sure to enable anti-aliased text, and a black soft shadow for the words MEDIEVAL RADIO.

If you don't have a high-end paint application available, you can put the frame together with Windows Paint, and text generated by the Text Effects #2 plugin and GIF Construction Set. Create a new true-color graphic of the dimensions 486 by 60 pixels and fill it with red. The exact color should be 156,0,0. Draw a black line around the graphic that's one pixel wide.

Run GIF Construction Set Professional and open the Text Effects #2 plugin in its Edit menu. Select the Simple effect. Disable the Animated option. Disable the Dithered option — there are few enough colors involved in these graphics to get away with having them remapped. You'll need to create each piece of text individually.

The words MEDIEVAL RADIO are 23-point Arial Bold. The background color should be set to 156,0,0 — the same red used in the background of the frame. The text color should be white. The shadow color should be black. Disable the Outline option. You might want to experiment with the Soft, Shadow Offset and Shadow Opacity controls to get a feel for how they affect the appearance of your drop shadow. Disable the Animated option and enable Anti-alias. When you've got your text element looking reasonable, click on OK or Build.

GIF Construction Set will create a GIF file with one Image block. Select the Image block and copy it to the Windows Clipboard.

Switch application to Windows Paint with your frame graphic open. Paste the text graphic from the clipboard into your frame and position it appropriately.

You can repeat this procedure for each of the text elements in the frame. It's slightly more cumbersome than using a paint application, but it will provide you with somewhat more control over the placement of the elements of your banner.

Banner ads being relatively small graphics, exact placement is everything.

You can now save your frame graphic to disk. If you used GIF Construction Set and the Text Effects plugin to build text elements, you can discard the GIF files open in it.

The rotating CD in the medieval radio banner uses one of the 3D Effects plugins, in this case, the disk. It's a disk rotating about the Y axis with a graphic pasted onto each face. Because the graphics are round and the disk is round, the resulting animation suggests a rotating compact disc.

To create this animation:

  1. Open the 3D Disk item in the Edit menu of GIF Construction Set Professional.
  2. Prepare two suitable graphics for the faces of the CD. Here are the ones we used — you can right-click on this graphic, save it to disk and excise the images if you'd like to use it for this example.

    How do you tell when you run out of invisible ink?
  3. Set the background color to red — 156,0,0.
  4. Set the default material color to gray — this will be used to draw the edge of the CD.
  5. Double-click on the upper material tile in the center of the 3D Disk plugin window. The material tiles are large rectangular buttons, initially colored blue. A Material Override dialog will appear.
  6. Select the Selected Material Texture item and click on the Select button. A File Open dialog will appear. Select the first of your CD graphics.
  7. Enable the Resize option.
  8. Click on Done to close the Material Override dialog.
  9. Double-click on the lower material tile and repeat the foregoing procedure for the graphic that will form the other face of your CD.
  10. Set the Size to 120.
  11. Set the Thickness to 2 — your CD will be two pixels thick.
  12. Enable Mask Background to match the background of your CD to the frame color of your banner exactly.
  13. Enable Anti-alias to improve the appearance of lines in your animation.
  14. Enable Dither if you are using photorealistic source images, or disable it if you're using line art. It was disabled for the example graphics shown here.
  15. Enable Y Axis so the CD appears to spin on its edge and set all the Start values to zero.
  16. Enable Custom Palette to have the plugin create a superpalette.
  17. Set Increments to 10 degrees — this will result in an animation having 36 frames and a fairly smooth appearance.
  18. Set delay to 10 — that's 10 100ths of a second per frame.
  19. Click on OK or Build to build your animation.
  20. When your animation is complete, save it to a new GIF file in GIF Construction Set.

That took longer to explain than it will probably take you to complete.

You'll notice that the CD animation in the Medieval Radio banner doesn't quite fit in its frame. This is a useful device in creating web banners — people seem to equate size with value, and the visual message of this graphic is that the CD is so large — and hence valuable — that it won't fit in the frame.

It's probably worth mentioning that Medieval Radio is actually a mini-CD, and is two inches smaller than a conventional compact disc.

You'll need to crop the animation to fit into your frame. The frame is 60 pixels deep, with a one-pixel border, for a vertical image area of 58 pixels. To crop your animation in GIF Construction Set Professional:

  1. Click on the Select All button in the GIF Construction Set tool bar to select all the blocks in your animation.
  2. Select Crop from the Block menu.
  3. Click and drag a rectangle in the Crop window to encompass the area you want — 58 pixels deep and just enough width to contain the CD. The pixel dimensions will be visible in a status window.
  4. Select Done from the File menu in the Crop window when you've selected the area you want.

You can view your cropped animation with the sunglasses button in the tool bar of GIF Construction Set. If you don't like the results of cropping it, select Undo from the Edit menu to revert to its uncropped state and try again.

Save your cropped CD animation to disk.

To complete the source graphics for your animation, you'll need to merge your frame and animation together into a single GIF file. There are a number of ways to do this — several alternatives will appear later in this article. Here's the simplest.

In merging the two elements of your banner, you'll want GIF Construction Set to create a superpalette for the final banner that best reflects the colors used by all its graphics. The best way to do this with the elements in question is to run them all through Animation Wizard. Animation Wizard, however, only knows ho to import still images. As such, you'll need to create a sequence of still images from the frames of your rotating CD animation, like this:

  1. Click on the Select All button in the GIF Construction Set Professional tool bar to select all the blocks in your animation.
  2. Select Extract from the Block menu of GIF Construction Set. An Extract dialog will open.
  3. Enable the Numbered option. This will instruct the Extract function to create a sequence of numbered single-image GIF files.
  4. Click on Save. A Save As dialog will appear. Point the Save As dialog to the folder where you stored your frame graphic, and enter a temporary file name — something CDTEMP.GIF would be a good choice.
  5. Click on Save.

Extract will create 36 files named CDTEMP00.GIF through CDTEMP35.GIF.

You can now assemble your banner. Select Animation Wizard from the File menu of GIF Construction Set Professional or click on the magic wand button in its tool bar. Point Animation Wizard to the folder where you've stored your source graphics. Click and drag your frame graphic to the right window, and then click and drag the 36 animation frames to the right window.

Note that you can drag multiple images in Animation Wizard in a single operation. Click on the first image, hold down your Shift key and click on the last image. This will select all the intermediate images as well. Click and drag on any selected image.

Enable the Loop item in Animation Wizard. Select Match to Superpalette and set the Delay value to 8.

Click on Build to create your animation. A new animation will open in a GIF Construction Set document window.

The images of your rotating CD animation will be positioned in the upper left corner of your banner frame, which is arguably not where you'll want them. You can use the Manage function of GIF Construction Set to position them correctly.

A bit of elementary arithmetic will be called for first. Note the pixel dimensions of one of the animation images — they're 102 by 58 in the example graphic show in this article. The animation frame is 468 pixels wide. There's a one-pixel border around it, and the left edge of the rotating CD animation should be 102 pixels to the left of this. The Left position value, then, will be 486-102-1, or 383.

The Top value will be 1, allowing for the single-pixel border.

To position your rotating CD graphics:

  1. Click on the first of the rotating CD images in your GIF Construction Set document window — this should be block 3.
  2. Scroll down until the last of the rotating CD image is visible — this should be block 38.
  3. Hold down the Shift key and click on the last of rotating CD images. All the intervening images will be selected as well.
  4. Click on the Swiss army knife button in the GIF Construction Set Professional tool bar or select Manage from the Block menu. A Manage dialog will open.
  5. You'll need to work with controls in the Images group of the Manage dialog. Enable the Absolute item — this will tell the Manage function that you want to set the Left and Top position values of all the selected blocks to the same values.
  6. Enter 383 in the Set Each Image Left Value To field and 1 in the Set Each Image Top Value To field.
  7. Click on the Apply button in the Images group. This is very important, as it tells Manage to apply the new values to your selected Image blocks. Failing to click on Apply has been the cause of a lot of head-shaped dents in a lot of walls.
  8. Click on OK to close the Manage dialog.

Click on the sunglasses button in the tool bar of GIF Construction Set Professional to view your animation.

Right... there's one tiny catch to this banner as it stands. The area around the animation CD flashes every time it loops. Oooops...

At the moment, the frame graphic has a solid red area where the rotating CD animation should be, so once in each cycle, the CD vanishes for 8 100ths of a second. A bit of cheating is called for to resolve this. Specifically, you'll need to copy the image from the first of the rotating CD Image blocks, paste it into the frame graphic and then delete the Image block it was copied from. Here's how to do this:

  1. Click on the Unselect All button in the GIF Construction Set Professional tool bar to unselect all the blocks.
  2. Click once on the first of the rotating CD image blocks — this should be block 3.
  3. Select Copy from the Edit menu.
  4. Double-click on the frame graphic Image block — this should be block 2. An Edit Image dialog will open.
  5. Click on Paint. Your Frame graphic will open in a Paint window.
  6. Select Paste from the Edit menu of the Paint window. Your CD image will be pasted into the frame. Position it at the right end of the frame, making sure it's as far right as it can go without obscuring the black line around the frame.
  7. Select Save from the File menu of the Paint window.
  8. Select Exit from the File menu of the Paint window. The Paint window will close, returning you to GIF Construction Set Professional. Clock on OK to close the Edit Image dialog.
  9. Click on the Unselect All button in the GIF Construction Set Professional tool bar to unselect all the blocks.
  10. Click once on the first of the rotating CD graphic Image blocks in your animation — probably block 3 — and click on the minus sign in the GIF Construction Set tool bar to delete it. Its image has been copied to the frame graphic, so it's no longer needed.

You can view your animation with the sunglasses button in the GIF Construction Set tool bar. If all is well, save it to disk — you're done.

Animation Workshop — Enable the Hyperdrive

Animation Workshop can create banners like this one with a lot less work, and with very much less understanding of how GIF files are structured. You'll find a detailed description of creating a banner like this one in the Animation Workshop tutorial. Here's a quick look at how it's done.

  1. Run Animation Workshop and select New from the File menu. A new Animation Workshop document window will open with a Header object.
  2. Double-click on the Header object to open its editor.
  3. Set the Width and Depth fields of the Edit Header dialog to 486 and 60 respectively.
  4. Enable Loop Forever.
  5. Set the End Loop Delay to 80 — that's 80 milliseconds, or the time delay for one frame in the animation as created by GIF Construction Set, above.
  6. Set the Background Type to Frame.
  7. Click on the Frame button to open the Frame editor dialog.
  8. Select a Simple Frame.
  9. Set the Background color to red — 156,0,0.
  10. Set the Simple Frame color to black and the frame Thickness to 1 pixel.
  11. Click on OK to close the Frame editor.
  12. Click on OK to close the Edit Header dialog.

You've now created a blank frame for your animation, the equivalent of the frame graphic created for GIF Construction Set earlier in this section, with its text.

Each of the pieces of text for this banner will be handled as a separate object under Animation Workshop. Aside form sounding somewhat leading edge and cool, this means that you'll be able to change the position and content of these objects later if you wish.

The Medieval Radio text has a soft drop shadow. This soft shadow isn't something the Text object generator of Animation Workshop knows how to create. You'll need to create it as a graphic, using the Text Effects #2 plugin and GIF Construction Set Professional, as described earlier. Save it as a GIF file and import it into Animation Workshop as an Image object.

Make sure the Time Index for this object is 0, and place it appropriately in the frame.

The remaining text can be added as Text objects — click on the plus button in the Animation Workshop tool bar and select Text. Having added a new Text object, double-click on it to open its editor and configure it:

  1. Enter the text, for example, "The new CD by ancientmusick.com"
  2. Select an appropriate font, font size and effects. This example uses Arial, Bold enabled and ten-point type.
  3. Make the Text Fill white and the Background color red — 156,0,0.

You might want to adjust some of the other typographic parameters later.

Click on OK to close the Edit Text dialog.

Having set up the typographic parameters for your first text object, you can save time by duplicating the object and changing the position and text of the new object appropriately, rather than creating a new object and having to set up all its parameters again. To do this:

  1. Right-click on the object in your Animation Workshop document to be duplicated.
  2. Select Copy To from the menu that appears.

When you create a duplicate object, make sure you set its Time Index to zero when you edit it.

Once you've installed all your Text objects in your Animation Workshop document, you can add the animated compact disc. Once again, you'll need GIF Construction Set Professional and the 3D Disk plugin, as discussed in the previous section, although you won't have to crop your animation this time.

Import your animation by clicking on the plus sign in the Animation Workshop tool bar and selecting Animation from the menu that appears. Select the GIF file you created with the rotating compact disc animation.

When your animation has been imported, it will appear in the object list of your Animation Workshop document. Double click on it to open its editor. You'll want to set the following items:

  1. Make sure the Time Index is set to 0.
  2. Enable Respect Frame — this will prevent your animation from obscuring the black frame around your banner.
  3. Click on Preview. A preview window will open. Click and drag your animation to the right side of your banner. Position it so it looks like the animation in the example at the top of this section. Click on the X in the title bar of the Preview window to close it.

Click on OK to close the Edit Animation dialog.

You can preview your banner by clicking on the sunglasses button the Animation Workshop tool bar.

Once you're happy with your banner, select Export from the File menu of Animation Workshop and choose Export to GIF from the submenu that appears. The Save As dialog for Export to GIF includes a number of options specific to GIF files. Their meanings should be somewhat familiar if you've worked through this article. Here's what they do:

  • Supercompress: Enable this option. The supercompressor will attempt to manipulate the frames of your animation to make them more readily compressible.
  • Prune Overlapping Frames: Enable this option. This will tell the supercompressor to trim away unnecessary parts of successive animation frames.
  • Redundancy Compression: Enable this option. This will tell the supercompressor to replace identical pixels in successive animation frames with transparent pixels.
  • Color Crushing: Disable this option. This would allow the supercompressor to reduce GIF's already limited palette size — don't go there unless you really have to.
  • Palette Size: This doesn't matter if Color Crushing is disabled.
  • Color Reduction: Use Remap for this example.
  • Include Comments: This doesn't matter, as there aren't any in this example.
  • Improve Palette: Enable this option. This will make sure there will be pure black and pure white entries in the palette for your GIF file, not a bad thing to have.

Enter a file name for your GIF file and save it. You're done.

Not only is Animation Workshop quicker at banners like this one — because its Text objects are stored as real text, rather than pictures of text, you can open its documents at a later date, edit their contexts and re-export them. This is a great deal more flexible than graphics stored in a GIF file, which need to be recreated from scratch to change what they say.

In addition, Animation Workshop will let you do things with GIF files that would be profoundly complex and brain-damaging to achieve with GIF Construction Set, such as creating a banner with two or more objects that move at the same time.

GIF Construction Set, on the other hand, can avail you of tools to manipulate GIF files in ways that Animation Workshop cannot; it will let you open existing GIF files and modify them and it will give you access to the Alchemy Mindworks animation plugins.

THE GIF CONSTRUCTION SET BANNER

In this example, GIF Construction Set Professional was used to create an advertisement for itself. It illustrates a selection of special effects that are easily accomplished with GIF Construction Set and its animation plugins.

The dinosaurs never saw it coming either.

This banner was created by building several discrete animations, forcing them to a common size and then combining them into a single GIF file. The latter two procedures will get into some functionality of the GIF Construction Set software that hasn't turned up as yet.

As with the previous example, this banner could arguably have been assembled earlier and easier in Animation Workshop — using GIF Construction Set to build the source animations — save that the nature of the advertisement precluded it.

Let's begin by building the individual animations that will comprise the banner. The banner will be 486 by 60 pixels, with a one-pixel black frame. This means that its content — all the stuff that happens inside its frame — must be 484 by 58 pixels.

The first animation has the words "THIS PROFESSIONAL" rolling into its frame. This one's pretty easy — it was built with GIF Construction Set and the Text Effects #2 plugin. This is an example of the Etched effect, which creates the illusion of text etched or pressed out of a surface. In this case, the surface is solid blue, 51,102,153, as is the text. The Highlight is white. The Pressure value is 2, the Intensity value is 8 and the Soft value is 8. This example uses a stencil font to make it look a bit rough and industrial — the rule of no more than one serif and one sanserif font might not have been completely adhered to in this banner.

Make sure Supercompress is off and Anti-alias and Custom Palette are on.

The final animation will need to be 484 by 58 pixels, with the text occupying as much of this area as possible. Depending on the font you choose, you should set the point size to something close to 58. Use the Padding element to expand the area around the text so it's slightly larger than 484 by 58 — it will be cropped later.

Some experimentation might be required to get this right.

Once you've set up the plugin and clicked on OK, your animation will appear in a new GIF Construction Set document window.

As with most of the animations to be created in this example, you'll only want to keep half the frames created by GIF Constriction Set. The Text Effects plugin will build an animation in which the text rolls into the frame, pauses and then rolls out. Only the first half is required, and you should delete the second half. Locate the Image block where the text has fully appeared and click on the next Image block in the sequence. Scroll down to the end of the block list, hold down your Shift key and click on the last Image block. All the intervening Image blocks will be selected. Click on the minus sign in the GIF Construction Set tool bar to remove the unwanted blocks.

Click on the Select All button in the GIF Construction Set tool bar to select all the blocks in your animation and select Crop from the Block menu. Use the Crop function to crop your animation to 484 by 58 pixels. You might want to drag the scroll bar at the right side of the crop window to bring the final frame of your animation into view before you crop it.

Save this animation to disk.

The text "EYE CATCHING" was created with the LED Signs function of GIF Construction Set, as found in its Edit menu. This is an older feature, dating back to the earliest days of the software, but it still turns up at a lot of web pages. Enter the text as "@YEYE-CATCHING" — the "@Y" tells the LED Signs function to create yellow characters. In this example, the Columns Wide value is 90, Columns Per Frame is 6, Delay is 8 and the Smooth Scroll and Compact Sign options are enabled.

Build this animation and delete the second half of the list of blocks for it as was done earlier.

The LED sign won't be of the correct dimensions for this banner — it should be 484 by 58 pixels, as the previous animation was. We're going to get into some serious cheating to make it work.

A GIF animation's screen dimensions — the dimensions of the rectangle that define how much screen space it occupies — are calculated automatically by GIF Construction Set as the rectangle that encloses all the Image blocks in the animation. This means that if just one Image block is 484 by 58 pixels, the screen dimensions will be correct.

Here's how to make this happen:

  1. Double-click on the first Image block in your animation to open its editor and click on Paint to open its graphic in a Paint window.
  2. Select the eyedropper tool and right-click somewhere in the background of the image to make the background color of the Paint window the same as the background of your image. In this case, it's black.
  3. Select Attributes from the Image menu of Paint and set the image dimensions to 484 by 58. Click on OK. Your image dimensions will be adjusted, and the extra pixels set to the current Paint background color you set in the previous step.
  4. Select the rectangular selection tool from the Paint window's tool box and use it to measure the distance between the left edge of your graphic and the left edge of the LED sign. The size of the selection tool's rectangle will be displayed in the Paint window's status bar. This is the original left offset value — write this number down. Do the same for the distance between the top of the graphic and the top of the LED sign, the original top offset value.
  5. Select the Select All item from the Edit menu of the Paint window. This will select your entire graphic using the rectangular selection tool. Click and drag to center the LED sign in the graphic. Once you've dragged it to where you think it should be, you can use the rectangular selection tool to measure the space to the left and right of the graphic to see if they're the same, and repeat this step if they need to be adjusted further.
  6. Use the rectangular selection tool to measure the new distances between the edges of your graphic and the edges of the LED sign, as you did a moment ago, and make a note of these new values. These are the new left and top offset values.
  7. Save your graphic in the Paint window and exit Paint. This will return you to the Edit Image dialog in GIF Construction Set. Click on OK to close it.

You have successfully massaged the first frame of your animation to center the LED sign. You could do the same for all the subsequent frames, but doing so would make your brain explode and your mouse melt — all in all, experiences you'll probably wish to avoid. There's a quicker way.

This next procedure will move the remaining Images over and down so they line up with the first one.

  1. Click once on the second Image block in your animation. Scroll down to the last Image block in your animation. Hold down the Shift key and click on the last Image block. This will select all the intervening blocks.
  2. Select Manage from the GIF Construction Set Block menu, or click on the Swiss army knife button in its tool bar.
  3. Enable the Absolute option in the Images control group of the Manage dialog.
  4. Calculate the amount you need to move your Image blocks to the right by subtracting the original left offset value from the new left offset value and the original top offset value from the new top offset values, as worked out when you massages the first Image block graphic. Enter the resulting numbers in the Set Each Left Value To and Set Each Top Value To fields.
  5. Click on Apply in the Images control group. Don't forget this — it's what tells the Manage function to apply the new values you entered to the selected blocks.
  6. Click on OK.

You've just set all the Left and Top values in the selected Image blocks to values that will move the images in question so they line up with the first image, which you centered by hand. Click on View in the GIF Construction Set tool bar to verify that this worked.

There's one thing left to do. The final assembly of this banner would be easier if all the Image blocks of all the source animations were the same size, rather than having some smaller ones with Left and Top offsets to place them correctly. GIF Construction Set can arrange this for you.

Select Reconstruct from the Block menu and click on OK in the Reconstruct dialog. A new document window will open with a copy of your animation in it. It probably won't look much different from the one you built, but if you double-click on a few of its Image blocks to examine their settings, you'll find that the Image blocks now have the dimensions 484 by 58 and Left and Top values of zero.

The Reconstruct function is intended to undo the changes wrought by the GIF Construction Set Supercompressor function, should you wish to modify a previously-supercompressed animation. It rebuilds Image blocks without transparent pixels, and without Left and Top offset values.

Save this animation to disk.

The text "Animated" uses two plugins — Text Effects #2 to create the text objects and Transitions #2 to make the background change. You're not seeing what you think you're seeing.

To build this effects, use the Simple option of the Text Effects #2 plugin to create two still images of the same text against different colored backgrounds — blue and tan in this case. The blue is the same one used in the first animation and the tan is 209,210,190. Disable the Animated option to have the plugin create a single-image GIF file. Save your two GIF files to disk.

Open the Transitions #2 plugin and add the two GIF files you've just created. Select Iris Diamond as the transition. Make sure Custom Palette is enabled and Supercompress is off. Click on OK to build your animation. When it opens in a GIF Construction Set document window, you'll need to delete the second half of the animation, as before.

You should now massage the dimensions of your animation to 484 by 58 pixels, as was done for the previous animation.

Save your animation to disk.

The illusion of the background changing behind the text in this animation is created by having the same text in both graphics — in fact, both the text and background transition between the two images, but as the text is the same before and after, only the background appears to be affected.

The word "Banner" uses the Emerge effect of the Transitions #2 plugin. The background color is the same blue that was used in the first animation. The text is a lighter version of the same color, 180,205,231. The Steps value for Emerge should be set to 9, Persistence is set to 5 and Threshold is set to 64.

Build this animation, delete the latter half of its blocks, massage its dimensions and save it to disk.

The animation of the words "was created by" uses the Teletype effect of the Text Effects #2 plugin, and the light and dark blue colors that have appeared earlier in this section. The Shadow is a still lighter blue, 230,238,247. The Soft value is 14 and the Shadow Offset is 2.

Build this animation, massage its dimensions and save it to disk.

The text "GIF CONSTRUCTION SET" uses the Horizon effect of the Text Effects #2 plugin. The industrial-accident yellow color is 255,204,0. The background uses a Tile fill rather than a solid color. To enable this option, click on the arrow in the Background fill button for the Horizon effect and select Tile. Click in the swatch of the Background button to select the tile to be used. The tile used here is one of the standard ones that installs with the plugin.

In this example, the text is 26 point type and the Pad value is set to 40 pixels.

Build this animation and delete the latter half of its block list. Use the Crop function to crop it to the dimensions 484 by 58 pixels, as was done earlier.

The text "AND SEVERAL OF ITS ANIMATION PLUGINS" in this animation is something of a cheat. It's just typed over the final frame. To do this, double-click on what will now be the final Image block in the animation to open its editor. Click on Paint. Your Image block graphic will open in a Paint window. Add the text with the Paint window Text tool. You'll want to disable the Draw Opaque item in the Image menu to avoid having a background color appear behind the text.

This is an example of small text that won't appear anti-aliased, and really shouldn't. The text here was down using the Small Fonts typeface installed with Windows. It's readable, even at seven points. Had it been anti-aliased, it would have looked like the aftermath of a tropical storm seen from space.

Save this animation to disk.

The final graphic in this banner is a still frame that appears for about as long as the previous animations. It displays the text "Click Here to Create a Few of Your Own." This is just a single-Image GIF file — here's how to create it.

  1. Open the Text Effects #2 plugin in GIF Construction Set.
  2. Disable the Dither option.
  3. Build two non-animated graphics, one for each line of the text. Use the Simple effect, with the dark blue background used elsewhere in this banner. Select 20-point bold type using the Arial font, or something similar to it.
  4. Set the Fill to a gradient between black and white — click on the arrow in the fill button and select Gradient. You can click on the color swatch in the Fill button to edit the gradient used to fill your text, although in this example the default gradient was used.
  5. Copy the Image block from your second line of text to the Windows clipboard — click on it in its GIF Construction Set document window and select Copy from the Edit menu.
  6. Double-click on the Image block in the document window for the first line of text to open its editor, and click on Paint. The graphic will open in a Paint window.
  7. Right click with the eyedropper tool in the dark blue background area of your graphic to make the dark blue color the current background color in Paint.
  8. Open the Attributes item of the Image menu in Paint and set the Width to 484 and the Height to 58. The size of your graphic will increase.
  9. Select Select All from the Edit menu. Your entire graphic will be selected with the rectangular selection tool. Click and drag until the first line of text is correctly positioned.
  10. Disable Draw Opaque in the Image menu. This will make the background color transparent for pasted objects, one of which is about to appear.
  11. Select Paste from the Edit menu to paste the second line of text from the Windows clipboard into your graphic.
  12. Click and drag in your selected text to position it.
  13. Save your file and exit Paint.

Save the GIF file with the two lines of text you just arranged. Discard the second GIF file, with the second line of text.

You've now built all your source graphics, and you're ready to assemble them into a banner. GIF Construction Set can string multiple animations together and massage the palette of the final banner to best reflect the colors used in all the images of all the source animations — something like what its Animation Wizard function does with still images.

Select Combine from the File menu of GIF Construction Set. The Combine dialog will open, followed by a File Open dialog. Select each of the source animations you just created. Note that this is a multiple-item File Open dialog — you can select all your source images at once by holding down the Shift key on your keyboard. Alternately, you can select one and then click on Add in the Combine dialog to select the second.

If your source animations prove to be in the wrong order in the Combine dialog, click and drag them into position in the animation list.

Enable the Loop option so your banner will loop. Select the Remap option to prevent your banner from being dithered. Click on OK to build your banner.

Your banner is almost complete — all its needs is its frame. You can add a frame much as you added space around your source animations — just not quite as much.

  1. Double-click on the first Image block in your banner to open its editor, and click on Paint. Your graphic will open in a Paint window.
  2. Set the background color of the Paint window to black, the color of the frame.
  3. Use the Attributes function in the Image menu of Paint to increase the dimensions of your graphic to 486 by 60, the correct dimensions for this banner.
  4. Select the Select All item from the Edit menu of the Paint window. Click and drag your graphic exactly one pixel to the right and one pixel down. This will leave you with a one-pixel wide black frame around your graphic.
  5. Save your graphic and exit the Paint window. Click on OK in the Edit Image window.
  6. Select all the Image blocks from the second to the last Image blocks in your GIF Construction Set document window.
  7. Click on the Swiss army knife button in the GIF Construction Set tool bar to open the Manage dialog.
  8. Enable the Absolute option in the Images control group and set the Set Each Left Value To and Set Each Top Value To fields to 1.
  9. Click on Apply.
  10. Click on OK.

You can use the Reconstruct function to eliminate the Left and Top offsets of your final banner, and save it to disk. In building your own banners, you'll probably want to run them through the GIF Construction Set Supercompressor to reduce their file sizes before you upload them to your web server.

THE TECHNOLOGY #1 PLUGIN BANNER

The Technology #1 animation plugin for GIF Construction Set Professional and PNG/MNG Construction Set can create lots of animated bits of technology. In designing a banner to promote it, the intent was to have the banner suggest its impressive range of gadgets, albeit without having to illustrate all of them, a task that would have stretched the limits of 486 by 60 pixels well past their breaking point.

In choosing between the lesser of two evils, it's important to keep in mind that the result will be evil even if you choose correctly.

The banner shown here clearly has a lot of activity happening within it, which visually suggests that the plugin can do all sorts of interesting things. The objects shown within it extend beyond its borders for the most part, which implies that they're just too large, cool, powerful, technological and generally exciting for the banner to contain.

While there's arguably too much going on here for most users to immediately identify what's actually happening, the level of activity makes people stop scrolling for a few seconds and study it in a little more detail.

This banner appears exclusively at Alchemy Mindworks' various web pages, and as such it's reasonable to assume that people coming across it will probably know what GIF Construction Set and plugins are, and why they might want to own more of the latter. The text message that accompanies all this can be relatively simple.

This banner was created using PNG/MNG Construction Set to generate its source art, and Animation Workshop to assemble the discrete animations that comprise it into a single banner. Experienced Animation Workshop users will appreciate that it's impossible to build, and yet, here it is.

The reason why experienced Animation Workshop users will appreciate that the Technology #1 Plugin banner is impossible to build is because it clearly violates one of the fundamental rules of working with Animation Workshop, to wit, never allow two animated objects to occupy the same space at the same time. There are numerous examples of them doing so here — the radar screen overlays the animated bubbles in the background, the countdown timer overlays the stopwatch... Animation Workshop purists will no doubt be shivering in their sneakers.

The reason no two animated objects should be allowed to occupy the same space at the same time in Animation Workshop is because Animation Workshop renders a frame in its final animations for every frame of every animation it encounters in a source document. Having two overlapping animations will cause it to interleave their frames, resulting in them flashing bits of themselves in and out of the final animation.

This is really only a problem if the two overlapping animations play at different speeds. In the event that two overlapping animations were to play at exactly the same speeds, with the same starting time index values and encompassing the same number of frames, Animation Workshop would render each frame of the final animation from one frame of each overlapping animation, and the results would look quite acceptable.

This is how the Technology #1 Plugin banner was created. Each of the source animations had 64 frames, each frame had a duration of 80 milliseconds and all the animations started at time index 0. This is what the Animation Workshop document in which it was created looks like:

The best way to survive a bear attack is to run faster than the person beside you.

The bubbling background — the Bubble Chamber animation from the Technology #1 plugin with its beveled edges turned off — is the first animation in the list, so all the other animated objects appear in front of it. The remaining animations were added and positioned to partially extend beyond the edges of the banner, suggesting their prodigious sizes. In fact, the plugin will build them to any size you like.

The green countdown timer was rotated 45 degrees in PNG/MNG Construction Set before it was imported into Animation Workshop. This is a useful technique for getting more of a rectangular object to appear in a banner than would otherwise be possible, without occupying a great deal of real estate. A 45-degree rotation will usually result in the most attractive rectangular objects, as there will be no jagged edges on their diagonal lines.

The background area created by rotating the countdown timer was set to be transparent.

In creating non-rectangular objects which will have transparent backgrounds, you should select a background color that's as close as possible to the color of whatever they'll be appearing in front of. In this banner, the backgrounds of all the foreground objects were set to the dark blue color behind the bubbles. Transparency as it's used here is always hard — that is, pixels are either transparent or opaque, with nothing in between. In setting transparency around irregular objects, you'll usually encounter pixels at the edges of the objects which are close to the defined transparent color, but not an exact match. These pixels will be drawn as opaque. If they're close to the color of whatever they appear next to — the background upon which the object in question is placed — they're likely not to be noticed, and you'll avoid the effect of visible lines around your transparent objects.

Several of these source animations, such as the VU meter and the radar screen, have transparent backgrounds so they don't appear within obvious rectangular frames. You can add transparency to a MNG animation either within PNG/MNG Construction Set, using its Manage function, or after it's been imported into Animation Workshop, using the Manage function of the animation editor.

This actually points up another limitation of having overlapping animation objects in Animation Workshop. They must have their Remove By options set to Nothing, or Animation Workshop will attempt to remove them with the current background color, rather than with the images of the other animation frames they overlap. For this reason, the frames of the animated objects must all occupy the same area, so one frame precisely paints over the previous one. This wasn't an issue for the objects used here — some of the other animations the Technology #1 plugin knows how to create couldn't have been used in this banner, for this reason.

All the Animation objects have Respect Frame enabled, so they can extend outside the banner without overwriting its black frame.

Keep in mind that when it finds itself rendering multiple objects with the same time index, Animation Workshop renders them in the order in which they appear in its object list. In this example, it renders the bubbles, followed by the bar graph — that's the second object in the foregoing illustration, and a bit hard to make out as a preview image — followed by the VU meter, followed by the stopwatch, and so on. The text appears last in the object list, and so it's placed above all the other objects.

The text for this banner actually presents Animation Workshop with something of a problem. Having found itself cheated at every turn by the animated objects in this banner, it's ill-disposed to handling a conventional text object correctly. Specifically, if you install a text object for the text message at time index zero, it will be visible for the next 80 milliseconds and then be overwritten by the frames of all the animation objects.

There are several ways around this — the Technology #1 plugin banner uses the simple expedient of handling the text as an animation. The Text Effects #2 plugin in PNG/MNG Construction Set was used to create the two lines of text as two PNG files, which were then imported back into PNG/MNG Construction Set through its Animation Wizard feature. The individual images were adjusted with the Paint function to make them the same sizes, and draw black rectangles around them.

Each Image chunk was duplicated multiple times, until there were 32 of each, for a total of 64 frames. This is easy to accomplish if you use the Copy To function of PNG/MNG Construction Set's right-click menu. Select the Image chunk to be duplicated, right-click and select Copy To. Select the resulting two Image clicks, use Copy To to duplicate them, then duplicate the resulting four Image chunks, and so on.

Once this banner was completely assembled in Animation Workshop, it was exported to a GIF file. The internal Supercompression function in Animation Workshop's GIF export filter reduced it to a manageable file size — at least, it was one we were prepared to live with. It's worth noting in this respect that the original bubble animation MNG file tipped the scales at almost two megabytes. The final GIF file for this banner occupies a fraction of this disk space because a substantial amount of the background is obscured by simpler — and hence more compressible — objects, and as such doesn't appear in the final banner.

All the source elements for this banner were created in PNG/MNG Construction Set, rather than GIF Construction Set. Either application could have been used, but PNG/MNG Construction Set, with its 24-bit MNG animations, resulted in a better-looking final banner that required slightly less disk space to store. GIF Construction Set would have created eight-bit GIF animations, which would have been dithered, unpacked, expanded to true color, rendered and then re-dithered. Graphics don't suffer all that much degradation when they're dithered once — at least, they don't when they're confined to the sorts of resolutions that turn up at web pages — but they can resemble sand paintings in a wind tunnel if you dither them a second time.

THE FICTION BANNER

The Fiction banner was actually created as an example animation for the Animation Workshop software, to show off some of its features. It embodies two interesting elements — the changing images and changing text don't change simultaneously, and it ends with an animated signature.

Should you notice a bomb disposal technician running away, try to keep up.

This banner will require both GIF Construction Set Professional — or PNG/MNG Construction Set — and Animation Workshop to assemble.

Let's begin with creating the animated signature. We get asked how to do this quite frequently, and now it can be revealed... not that it's much of a secret.

The animated signature appears to draw itself. Actually creating it this way — drawing a bit of the signature, scanning it, drawing a bit more, scanning that and so on — would be time consuming and extremely difficult to get right. It's a lot easier to begin with the completed signature and erase a bit of it at a time, so it un-draws itself. Having created such an animation, reverse the order of its Image blocks.

Begin by having the owner of the signature to be animated sign a sheet of otherwise blank paper with a reasonably fat pen. Scan the signature into a gray-scale image file, that is, one having eight bits of color, stored as 256 levels of gray. Scale it down to reasonable dimensions. Save it as a GIF file. Graphic Workshop Professional can handle all of the forgoing.

Depending on the nature of your scan, you might want to use the Contrast and Brightness filter in the Graphic Workshop Professional View mode Filters function to fine-tune the appearance of your signature graphic. The background should be pure white, and the lines as dark as possible.

You'll probably also want to crop it so it fills the entire image area of your scan.

You should use the Paint function of Graphic Workshop to open the image file of your scanned signature and make sure that the entire background area is pure white. Check for stray light gray pixels.

Open your GIF file in GIF Construction Set — you should see one Header block and one Image block.

Double-click on the Image block and set its Delay to 2 — that's two 100ths of a second.

Click on OK.

You're now ready to animate your signature.

  1. Right-click on the Image block and select Copy To from the menu that appears. A second copy of your Image block will be added to the end of the block list.
  2. Double-click on your new Image block to open its editor and click on the Paint button. The signature will open in a Paint window.
  3. Use the Eraser tool to remove a small portion of the end of the signature — something on the order of a few pixels.
  4. Save your changes and exit Paint. Click on OK in the Edit Image dialog to accept your changes.
  5. Return to Step 1, above, duplicating the Image block you just edited. Keep repeating this procedure, erasing a bit more of the signature each time, until it's all gone.
  6. When your final Image block is a completely blank graphic — and the whole signature has been erased — select Reverse from the Block menu of GIF Construction Set to reverse the order of your Image blocks.

If you click on the View button in the GIF Construction Set tool bar, your signature should appear to draw itself.

The Fiction banner uses a pale yellow background. It would be tricky to tweak the palette of the signature animation to match this. Because the signature background is white and the banner background is very nearly white, it will be sufficient to make the background of the signature transparent. GIF Construction Set Professional can do this for you with its Manage function:

  1. Click on the Select All button in the GIF Construction Set tool bar to select all the blocks in your animation.
  2. Click on the Swiss army knife button in the GIF Construction Set tool bar to open the Manage dialog.
  3. Select Set Controls for the Selected Blocks in the Controls group of the Manage dialog if it's not currently selected.
  4. Click on Apply in the Controls group of the Manage dialog. An Edit Control dialog will appear.
  5. Enable Control Block and Transparent Color.
  6. Click on the eyedropper tool in the Edit Control dialog. A window with the first image block of your signature animation will open. Click somewhere in the white background to select the background color as transparent. The image window will close.
  7. Click on OK in the Edit Control dialog, and then on OK in the Manage dialog.

As an aside, the foregoing omits a very important step in adding transparency to a GIF animation — you should always set the Remove By combo box in the Edit Controls dialog to Background when you do this. At least, you almost always should. Setting Remove By to Background prevents the non-transparent areas of earlier frames from showing through the transparent areas of later ones.

It wasn't necessary to set Remove By to Background in this case as there are no later frames with transparent areas that overlay earlier frames with non-transparent areas — the signature grows with each successive frame. This is an unusual situation — you'll want to be sure to set Remove By to Background for pretty well all your transparent animated GIF files, with this one exception.

The book-cover graphics were created with e-Paint. Each original book-cover image was scanned and reduced to 90 by 145 pixels. E-Paint was used to create a new image 200 by 225 pixels — large enough for the book cover and its drop shadow — having a paper color of 243,246,232, the pale yellow that appears as the background of this banner.

A black rectangle was drawn, 90 by 145 pixels, in the upper left corner of the image in e-Paint, with Soft Shadows enabled. You'll probably have to experiment with the Soft Shadow controls to get the shadow to just occupy the entire frame. The book cover was added to the shadow with the Paste From item of the Edit menu of e-Paint. The book cover overlaps the black rectangle, leaving only its shadow.

With the signature animation and the book cover graphics complete, the banner was assembled in Animation Workshop. The review citations were added as text objects. The animated signature appears last.

Because the book cover graphics are all the same size, they each obscure the previous image, obviating the need for Background objects to remove them. The Text objects work the same way — in creating them, the first one was sized and positioned appropriately, and all the subsequent ones were copied from the first.

THE WYCCAD BANNER

The Wyccad banner, for Steven William Rimmer's novel, was created in Animation Workshop. This is the sort of banner Animation Workshop can put together in seconds.

Whose cruel idea was it for the word Lisp to have a S in it?

The banner's frame and background were created as part of the Header object of an Animation Workshop document. Set the Background type in the Header to Frame and click on the Frame button to set its characteristics. Click on the arrow in the Background material button and select Texture. Click on the color swatch to open the texture editor for the background button.

The red and black texture used here is actually the Indigo Sky preset texture with its two colors changed to black and dark red. You can do a lot with clouds.

The scrolling lines of text in this banner were created as multiple text objects. As with the Fiction banner's signature, above, it's easier to delete text than to add it. As such, the first line of text was created as a text object having the text "HELP WANTED: Witch to manage intrigue-ridden" using one the many "old manual typewriter that needs cleaning" fonts available on the web. The Text object was set with a transparent background, and a Top value of 30 to place it near the bottom of the banner frame.

Having created this text object, note that there are seven words in it. Make six duplicates of it — for a total of seven text objects — and set them up with time index values separated by 300 milliseconds. The Manage function of Animation Workshop can set the relative time index values in a single operation.

Delete all but the first word from the first Text object. Delete all but the first two words from the second Text object. Delete all but the first three words from the third Text object and so on.

When all seven Text objects are correctly massaged, add a Background object with a time index value 300 milliseconds greater than that of the last Text object, to remove the completed line of text.

Duplicate the final Text object and place it after the Background object, with the same time index value as the Background object. Set its Top value to 5, to make it appear to have scrolled up to the top of the banner frame.

Create a Text object for the second line of text, and repeat the foregoing procedure to make it appear one word at a time.

When all the scrolling text has been dealt with, add a Background object to the end of the object list with a time index value of 2000 milliseconds — two seconds — after the final Text object to remove the text from the banner.

The three text elements in the next to last section of the banner are created as three Text objects, all with the same time index values, to make it easy to position them correctly. The word "Wyccad" is set using the Emboss font.

A small graphic of the book cover appears to the right of the text.

The final section of this banner consists of a Background object with a time index value 2000 milliseconds greater than that of the previous Background object, a copy of the book graphic and another Text object. The duration of this section will be the End Loop Delay value set in the Header object, as it's the last group of objects in the list. It's set to 8000 for this banner.

The scrolling text effect of this banner is a useful technique to make an essentially static message visually interesting. Appearing as it does one word at a time, it creates interest in people who see it, who might be persuaded to stick around long enough to see how the story turns out.

THE LEGACY BANNER

The banner advertisement for Steven William Rimmer's novel Legacy was intended to convey the book's dark, menacing nature. Book ads are something of a challenge for web page banners — books have, by their nature, a lot of content. Web page banners allow for almost none at all.

Whereas the Wyccad banner, above, sought to intrigue potential readers with a humorous perspective on the book's plot, the Legacy banner is almost entirely visual. The treatment of the animation tells the story — or as much as you can squeeze into a few thousand pixels.

Madness takes its toll. Please have exact change.

The characters that form the book's title graphic are seen only in shadow, and their details are partially obscured. Each one fades into view, pulses briefly with menace or barely contained energies and then fades into semi-darkness. When the title is fully visible, the text messages fade in, pause and fade out. The title text then fades into the blackness of the background.

In that it's largely impossible to synopsize the book's plot in a banner ad, the intent of this one was to get potential readers of the book interested enough in it to click on the advertisement and visit a web page with more details.

The Legacy banner was assembled in Animation Workshop. You could probably put something like this together in GIF Construction Set, but it would entail a lot more work and it probably wouldn't look anywhere near as slick. The animation of the title text was built using PNG/MNG Construction Set and the Transitions #2 animation plugin.

The original graphic of the title text was taken from the cover of Legacy — while this section will discuss how the Legacy banner was built, you'll no doubt wish to apply these techniques to text of your own devising if you create your own banner based on this design.

This is the title text:

The beatings will continue until morale improves.

There are six characters in the word "Legacy," and as the text fades in from a black screen, a total of seven initial graphics will be required, as follows:

Psychiatrists tell us that one out of every four people is mentally ill. If you have three normal friends, it's you.

These initial images were created with Graphic Workshop's Paint function, although you could use any paint application to do so. The initial title text was stored in a file called 1.PNG.

  1. Point a Graphic Workshop browser window to the folder where your source graphics live.
  2. Right-click on the 1.PNG file and select Paint and Save As. The title text will appear in a Paint window.
  3. Use the eyedropper tool and right-click in the dark background to select the background color — it's nearly black, but not quite.
  4. Erase the last character in the text.
  5. Exit Paint and save the modified graphic as 2.PNG.
  6. Return to step 2, above, and edit 2.PNG to remove the next character and save the result as 3.PNG. Keep doing this until you're at 7.PNG, a completely blank graphic.

Having created the seven primary images, you'll need to create an additional six images with one character in the title brighter than the others. When the animated title is put together, these images will make the characters pulse before they fade back to their normal intensity. You'll need e-Paint for this procedure.

  1. Open the file 1.PNG in e-Paint. You'll probably find it easier to work with if you zoom in to 400 percent zoom.
  2. Use the rectangular selection tool and select the first character, in this example, the L in Legacy.
  3. Open the Image menu and select Filters. Select Contrast and Brightness from the submenu that appears.
  4. Set the Contrast slider to 190 and the Brightness slider to 128. Click on OK.
  5. Click somewhere outside the selected area to remove the selection marquee.
  6. Save the modified file as 1a.PNG.

The foregoing increases the contrast of the first character in the text. Increasing the contrast brightens the light colors and darkens the dark colors. As the dark background is essentially black, and can't get any darker, only the bright colors are affected. The result is to make the first character in the title graphic appear brighter.

Repeat the foregoing for each of the remaining five images that have visible text — you can skip 7.PNG, which is blank.

Your source graphics should now look like this — this graphic has been resized to keep it from looking really, really big.

Gun exchange programs might actually work if they gave you a gun when you handed in a criminal.

To create the complete title animation, open PNG/MNG Construction Set and select the Transitions #2 plugin from its Edit menu. Enable True Color and set the Transition combo to Dissolve. Set the Delay value to 10 and the Pause value to 1. As it installs, this will result in a set of transitions that's a bit slow for this banner. However, because the result of all this dancing and shouting will be a GIF file, and as GIF files have a minimum delay time of one 100th of a second — or ten milliseconds — the Delay time can't be set any lower than 10.

You can work around this by using fewer steps in the transitions, a solution which will result in fewer final image frames and as such a smaller final file size as well. Click on the Advanced button in the Transitions #2 plugin window and set the Dissolve Step Size field to 64. This will result in 256 ÷ 64 transition steps, or 4 steps. Click on OK.

Click on the Add button in the main Transitions #2 plugin window and add all your source images. They should appear in the file selection list in the following order:

7.PNG
6a.PNG
6.PNG
5a.PNG
5.PNG
4a.PNG
4.PNG
3a.PNG
3.PNG
2a.PNG
2.PNG
1a.PNG
1.PNG

If you're using an earlier version of the Transitions #2 plugin and you're uncertain which files are represented by the visual thumbnails in the image list, you can double-click on a thumbnail to open its Override dialog — the original file title will be displayed in the title bar of this dialog.

You can click and drag images around the file list if you find you've added them in the wrong order.

When your files are as they should be, click on OK to build the animation. This will probably take a lot less time to set up and complete than it did to explain here.

Your completed animation will open in a PNG/MNG Construction Set document window. Save it to disk.

The final banner actually includes two animations — one to fade the text in, and a second one to fade it out. These are actually the animation you just made divided into two sections.

Scroll down the Image chunk list of the title animation until you locate the point just before where the text begins to fade out for the last time. This was at block 50 in the animation as it is described above. Delete all the Image chunks after this point and save the resulting animation to a new file, called 1.MNG.

Open your original animation and delete all the Image chunks up to this point. Save this file to 2.MNG.

You're now ready to open Animation Workshop and assemble your final banner.

Create a new document in Animation Workshop having the dimensions 486 by 60 pixels. Set the Background Type combo to Center Image and import the original background title text graphic. Set the Background Fill color to the same color as the background of the title graphic — it's 18,18,18 in this case. Set the End Loop Delay to 100 milliseconds, and enable Loop Forever so the banner will keep playing on the page in which it's installed.

Add the 1.MNG animation to the object list for your animation at time index zero, and center it in the banner area.

You might well ask why you used the title graphic as a background and then placed the title animation over it, effectively obscuring it. We'll deal with this in a moment.

The two lines of text in this banner are handled as Text objects, albeit with more mouse activity than is usually called for to add text to a banner. Each line is actually multiple sequential text objects having varying opacity values. The opacity of an object determines how visible the object in question is. An opacity value of zero will make it completely invisible. An opacity value of 255 will make it completely visible. Intermediate opacity values will blend your objects with whatever they appear over.

The text in this banner was made to fade in and then out again by placing multiple overlapping copies of the Text objects which define it, and varying their opacity values.

The first line of text, "THE BREATHTAKING NEW NOVEL BY STEVEN WILLIAM RIMMER," was created as the following Text object:

Crime wouldn't pay if the government ran it.

Note that the opacity value is 32, which is almost completely invisible. The time index is 1500, a reasonable delay after the animated title has completed.

Having created this Text object, right-click on it and select Copy To to duplicate it. Double click on your new Text object to edit it. Increase its Time Index by 50 milliseconds and its Opacity by 32.

Repeat the foregoing until you reach an Opacity of 255. Duplicate the final Text object in the fade in sequence, but for the next object only, increase its Time Index by 2500 milliseconds to provide a pause when the text is fully visible. Reduce its Opacity value by 32.

Repeat the foregoing — increasing the Time Index values of your duplicated objects by 50 milliseconds and decreasing their Opacity values by 32 — until you have a Text object with an Opacity value of 31. The text will have effectively faded to black.

You can add the second line of text the same way.

The behavior of these Text objects necessitated the odd use of a centered title graphic in the Header block of this animation. Simply overlaying Text objects of increasing opacity would have caused the text to fade in, but subsequently overlaying it with Text objects of decreasing opacity would not have affected it any further, as overlaying something bright and opaque with something dark and transparent won't do anything useful. It's actually necessary to remove the previous Text object in the fade sequence with a copy of the background — the title graphic — and then paint the new text, with its new Opacity value, over the clean background.

Animation Workshop will do this for you if you enable the On Background item in an object editor dialog, as has been done in the Text object editor show above. This will only work properly, however, if the background of your animation, as defined by its Header object, looks like whatever the Text objects appear above. This is why the Header object's background has been made to look like the end of the title graphic animation.

Once the two lines of text have been completed, you can add the closing animation to complete the banner. Add a Background object to the end of the object list for your banner, with a time index 50 milliseconds greater than that of the last Text object, to remove it from the animation. It's almost invisible, but it would become noticeable if bits of it were still hanging around when an animation was placed over it.

Finally, add the 2.MNG animation you created earlier to the end of the Animation Workshop object list. It should have the same Time Index as the Background object, and be centered in the banner's space. It will make the title text appear to fade out.

When the banner is complete, you can export it to a GIF animation. Make sure the Supercompressor in the GIF export filter is enabled to squeeze the banner into the smallest possible file size, and select the Remap option.

THE TEXT EFFECTS #2 PLUGIN BANNER

One of the questions we get asked frequently about animation concerns having things move across a frame. The yellow earth mover in the Text Effects #2 banner, below, is an example of such an animation.

Entropy isn't what it used to be.

The Text Effects #2 plugin banner is another example of one of our animation products being used to create an advertisement for itself, at least in part. While you're unlikely to encounter a comparable situation, you can apply the techniques used in this banner to your own animations.

This banner was assembled in Animation Workshop using components created in GIF Construction Set Professional and PNG/MNG Construction Set. It consists of four primary elements — the animation of the text samples and the earth mover driving right, the animation of the earth mover driving left and the two Text objects fading in.

The first thing to build in creating this animation is the set of sixteen sample text graphics. These are pretty simple to create — the Text Effects #2 plugin installed in PNG/MNG Construction Set was used with a variety of fonts, effects and fill options to produce sixteen PNG files with the words "TEXT EFFECTS 2." Each graphic was stored in a separate PNG file.

The sixteen PNG graphics were assembled into a GIF animation using the Animation Wizard function of GIF Construction Set Professional. If you try something like this, set the Palette option to Dither to Superpalette and set the Delay value to 10.

In addition to the sixteen text graphics, this animation also included the earth mover graphic. It was deleted as soon as the animation was completed, but having it in the initial list of source graphics ensured that the animation superpalette would include colors to display it correctly. We'll get back to the earth mover in a moment.

The text sample graphics are of varying dimensions, and as such not all of them will completely over-write their previous images. You could resolve this by manually editing each image with the Paint function of GIF Construction Set's Image block editor — this would be a bit tedious. Alternately, you can make GIF Construction Set do all the work for you. Rather than arranging to have all the images the same size, GIF Construction Set can set them all to have the Remove By Background setting, such that each one is erased just before the next one appears.

To do this:

  1. Click on the Select All button in the GIF Construction Set Professional tool bar to select all the blocks in your animation.
  2. Click on the Swiss army knife button in the GIF Construction Set Professional tool bar to open the Manage dialog.
  3. Enable Set Controls for the Selected Blocks in the Controls group if it's not currently selected.
  4. Click on the Apply button in the Controls group. An Edit Controls dialog will open.
  5. Set the Remove By combo box to Background.
  6. Click on OK to close the Edit Controls dialog.
  7. Click on OK to close the Manage dialog.

You might want to preview your animation to make sure it's behaving itself.

Here's the text sample animation:

I shoot every third salesman. The second one just left.

Getting the earth mover to push the text sample involves moving the text to the right to allow sufficient real estate for the earth mover. The earth mover in this example is 107 pixels across. You could move each image to the right using the Edit Image function of GIF Construction Set, but this would be tedious and time-consuming and generally crude. Once again, the GIF Construction Set Professional Manage function can be made to do all the work for you:

  1. Click on the Select All button in the GIF Construction Set Professional tool bar to select all the blocks in your animation.
  2. Click on the Swiss army knife button in the GIF Construction Set Professional tool bar to open the Manage dialog.
  3. Enable the Absolute option in the Images control group.
  4. Set the Set Each Image Left Value To field to 107.
  5. Click on Apply in the Images control group.
  6. Click on OK to close the Manage dialog.

Chances are you'll find that your newly-repositioned images are displayed against a color other than white, solid black being the odds-on favorite. You can fix this by changing the background color for your GIF file:

  1. Double-click on the Header block in your GIF Construction Set document window. The Edit Header dialog will open.
  2. Click on the Background color button in the Screen controls group. A color selection dialog will open.
  3. Select white — color 255,255,255 — from the color list. This will probably be the last item in the list.
  4. Click on OK to close the color selection dialog.
  5. Click on OK to close the Edit Header dialog.

You should now be looking at enough space to install the earth mover.

The earth mover graphic will need to have a transparent background — it was edited with e-Paint to make sure all its background pixels were pure white. It's important that no non-white pixels be added to the background as dithering artifacts, which is why the original earth mover was deleted from the block list of this animation.

You can re-install the earth mover like this:

  1. Click once on the Header block to select it.
  2. Click on the plus button in the GIF Construction Set Professional tool bar and select Image from the menu that opens. A File Open dialog will appear.
  3. Select the earth mover graphic file. A color matching dialog will appear.
  4. Select the Remap option.

The earth mover will be added to the block list of your animation as the first Image block, but it will be remapped rather than dithered.

You should now make the background of the earth mover transparent. In fact, the transparency won't do anything, but it does have to be there for the next step in this process.

  1. Double-click on the Image block for the earth mover. An Edit Image dialog will open.
  2. Enable the Control Block option if it's not currently enabled.
  3. Enable the Transparent Color option.
  4. Click on the eyedropper tool button. A window with your graphic will open.
  5. Click somewhere in the white background of the graphic.
  6. Click on OK to close the Edit Image dialog.

The animation needs to have the earth mover appear to the left of each of the text samples. There are several ways to do this — the Overlay function of GIF Construction Set can handle it with a minimum of clicking. Here's how to do this:

  1. Click on the Select All button in the GIF Construction Set Professional toolbar to select all the blocks in your animation.
  2. Click once on the first Image block, the earth mover graphic, to place the insertion caret on it.
  3. Select Overlay from the Block menu of GIF Construction Set Professional and click on OK in the Overlay dialog.

The Overlay function wants the graphic being used as an overlay to have transparency enabled, which is why the background of the earth mover was made transparent.

A new animation will be created with the earth mover positioned to the left of the text samples in every frame. Save this animation to disk.

There are sixteen text samples in the Text Effects #2 banner, but the banner actually requires 32 Image blocks for the animation if the earth mover is to move at a believable speed. Those things aren't exactly sports cars. You can double the number of frames by merging this animation back into itself, like this.

  1. Click once on the last Image block in the animation, to place the insertion caret on it.
  2. Select Merge from the block menu. A File Open dialog will appear.
  3. Select the file to which you just saved the animation.

Save the newly lengthened animation back to disk as 1.GIF. The first of the two source animations for this banner is now complete. You'll no doubt have noticed that the earth mover doesn't actually move anything — it doesn't go anywhere just yet. While it could be made to roll in GIF Construction Set, it will be easier to take care of this after it has been imported into Animation Workshop.

The second animation involves the earth mover driving off the screen, having pushed the text samples into the banner. This one will be animated in GIF Construction Set, as it needs to do a bit of cheating.

When the first animation ends, the earth mover will be facing the right edge of the banner. The second animation has the earth mover facing the left edge of the banner, and drives left until it's completely out of the frame. In order to make this work without either allowing the earth mover to disappear for a moment or leaving its former self in place, the second animation must obscure the first one.

Once again, there are several ways to handle this, but the simplest is to create an animation with a lot of white space to obscure the entire path of the earth mover in the first animation. Here's how to do this.

  1. Create a copy of the earth mover graphic flipped horizontally, so it's facing left.
  2. Open the Animation Wizard function in GIF Construction Set Professional and add ten copies of the earth mover graphic to the right panel. Set the Palette option to Match to Superpalette and the Delay value to 10. Build the animation. Your animation will open in a GIF Construction Set document window.
  3. Click on the Select All button in the GIF Construction Set Professional to select all the blocks in your animation.
  4. Click on the Swiss army knife button in the GIF Construction Set Professional tool bar to open the Manage dialog.
  5. Enter 16 in the Move Each Image Horizontally By field.
  6. Click on the Apply button in the Images control group.
  7. Click on OK to close the Manage dialog.

The earth mover will now appear to be backing up to the right — arguably not the effect we were looking for. Select Reverse from the Block menu of GIF Construction Set Professional to reverse the order of the Image blocks of your animation.

Save the completed animation to disk as 2.GIF.

You're now ready to assemble the animation in Animation Workshop. Create a new document in Animation Workshop and edit its Header object to give it the dimensions 486 by 60 pixels. Set the Background Type combo box to Frame. Set the frame up to have a white background and a one-pixel black border. Enable Loop Forever and set the End Loop Delay to 5000 milliseconds — this will create a five second delay at the end of the animation for people viewing it to see what it's turned into.

Begin assembling the banner by importing the first of the two animations you created in GIF Construction Set Professional and making the objects move correctly, as follows:

  1. Import the 1.GIF animation. Double-click on it to open its Edit Animation dialog.
  2. Set the Left field to position the animation most of the way beyond the left edge of the banner — the banner shown earlier in this section used a Left value of -455.
  3. Set the Top value to 1 so the animation clears the banner's frame.
  4. Enable Respect Frame.
  5. Click on the Manage button in the Edit Animation dialog to open the Manage Animation Frames dialog. Enter the value 16 in the Left field of the Relative Position control group and click on its Apply button. Click on OK to close the Manage Animation Frames dialog.
  6. Scroll down to the list image in the list of animation frames and double-click on it. Set its Remove By option to Nothing. This will cause the final image to remain visible, rather than being replaced by the background color like all its predicessors.
  7. Click on OK to close the Edit Animation dialog.

If you view your animation, you should see the animated text samples and the earth mover driving into your banner from the left.

You can now make the earth mover turn around and leave:

  1. Import the 2.GIF animation you created earlier and double-click on it to open its Edit Animation dialog.
  2. Enter a Left value sufficiently far beyond the left edge of your banner to allow the earth mover to drive completely over the edge of the world. The Left value was -120 in the example shown earlier in this section.
  3. Set the Top value to 1 and enable Respect Frame. Click on OK to close the Edit Animation dialog.

Your animation should now show the earth mover pushing a stack of writhing text samples into your banner, and then turning abruptly and driving off.

The final two objects in this banner are handled as multiple duplicates of the same two Text objects. They fade in using variable Opacity settings, as was discussed in the previous section.

ART FOR NON-ARTISTS

It's probably worth noting than none of the example banners discussed here required any real artistic ability, complicated mathematics, unpleasant bending, really expensive software or a design staff. You can do a lot with Alchemy Mindworks' affordable animation tools and some inspiration.

You don't even really need Morgan the Newf, although Morgan would be heartbroken if he knew.

As an aside, if you followed the construction of the Text Effects #2 banner, you might want to watch this slight variation on it:

Always avoid alliteration.

Notice the dog running across the frame after the text appears. This was really easy to implement in GIF Construction Set and Animation Workshop — see if you can figure out how it was done.

Aside from being unavailable in convenient pop-top cans, ingenuity isn't particularly portable, either. Our banners wouldn't be of much help to you if you were to copy them. Ingenuity is only ingenious once, and then it's just recycled pixels. The techniques used to create these banners, however, can be applied to your own animations. Your banners will probably look nothing like ours, but if you use some of the software and techniques discussed in this article, you can almost certainly make them rock.



All the information at this page is as accurate as we can make it. Neither Alchemy Mindworks nor the author of this page accepts any responsibility for any loss, damage or expense caused by your use of these pages, however it happens. If you can figure out a way for any of this to cause you loss, damage or expense you have a sneakier mind than any of us. This page and all dependent pages are copyright (c) 1994 — 2017 Alchemy Mindworks. No portion of this page may be reproduced in any form without the explicit written permission of the author and copyright holder.



PLEASE DON'T COPY THIS PAGE

The contents of this page are copyright © 1995 — 2017 Alchemy Mindworks. Some portions are copyright © 1995 — 2017 Steven William Rimmer. The copyright holders specifically prohibit reproduction, transmission, duplication or storage of this page or any portion thereof in any electronic or physical medium, under any circumstances. Reproducing all or part of this page against our express wishes may result in severe civil and criminal penalties. The lawyers made us say that.

Please contact us for reproduction rates if you'd like to reproduce all or part of this page on paper. If you like this page and wish to share it, you are welcome to link to it, with our thanks.