Animating Banner Ads

Fireworks 3 Bible — Part 6 — Animation

In This Chapter:

Banner ads are nearly ubiquitous on today’s Web, and have been a valuable contributor to the rapid growth of the World Wide Web. Once you have a sponsored banner ad on a page, the page begins to pay for itself, and you crave 
hits — requests for files made to your server — rather than worrying about the bandwidth costs of a page that grows 
too popular.

Banner Ad Basics

Banner ads are where animated GIF images really shine. You want a Web advertisement to be eye-catching and universally viewable, and animated GIF images are really the only choice. When does an animated GIF stop being an animated GIF and start being a banner ad? Four elements are involved:

We take a closer look at each of these points in the following sections.

Size — IAB/CASIE standards

When banner ads started to proliferate on the Web, it became apparent that some sort of standard sizing scheme would benefit both the advertisers and the sites displaying the advertising. If you have a website on which you leave a 450×50 pixel space in your design for a banner ad, and I then send you one that’s 460×60, we have a problem. If ten other people send you ten other ads, all slightly different in size, then the problem becomes a big problem.

To solve this, the Standards and Practices committee of the Internet Advertising Bureau (IAB) and the Coalition for Advertising Supported Information and Entertainment (CASIE) got together, looked at the sizes everybody was using, and came up with a list of standard sizes. They offered this list as a recommendation to the ad buyers and sellers, who overwhelmingly accepted the list. Almost all ads on the Web now follow the IAB/CASIE standards.

Table 24-1 details the standard banner ad sizes and their names. Full Banner is by far the most common type of ad, with Micro Button probably in second place, but other sizes are gaining popularity as websites display advertising into newer and smaller spaces, such as margins and even inline with content. If you don’t know which size to choose, choose Full Banner, 468×60.

Table 24-1 IAB/CASIE Advertising Banner Sizes
Pixel Dimensions Name
468×60 Full Banner
392×72 Full Banner with Vertical Navigation Bar
234×60 Half Banner
125×125 Square Button
88×31 Micro Button
120×90 
Button 1

120×60 
Button 2

120×240 
Vertical Banner

Weight

In addition to making sure your banner ads are the correct dimensions, you need 
to consider their weight (file size). No “one true standard” exists for banner ad file sizes. Many Webmasters set an upper limit on weight, beyond which they won’t accept your ad. If you’re designing an ad for a specific site, check with its Webmaster first to see what the limit is, or at least check the weight of some of the ads that are already on that site. If you’re not designing for a specific site, a general rule is to aim for less than 10K, and certainly keep it under 12K. If you can produce an exciting ad in 8K, so much the better. Your ad downloads quickly and more viewers see your entire message.

Putting it in the page

Obviously, a banner ad is as much an image as any other GIF, and the most basic way to place a banner ad in a page is with an ordinary <img> tag. When you export HTML from Fireworks, this is exactly the way you find your banner ad displayed.

Typically, though, most websites that depend on advertising have some sort of dynamic scheme for rotating through a series of banner ads, so that ads are added to pages on-the-fly by the server, and visitors who return to a page get an entirely new ad instead of seeing the same one again. The server also keeps track of how many times it displays each ad, because the sponsor pays for the ad to be displayed a certain number of times.

Implementing a banner ad rotation system is not nearly as hard as it might sound. The Web has many low-cost and even free CGI (Common Gateway Interface) scripts. A few hours of work and even the smallest site can start serving ads like the big guys.

Advertise it

While a complete course in Madison Avenue methods is well beyond the scope of this book, it doesn’t hurt to at least know the lingo:

Fireworks Technique: Creating a Banner Ad

Although banner ads are often created by a chain gang of ad people, copywriters, producers, Web artists, and others, a good way to work on the techniques involved is to just dive in and start creating ad campaigns for fictional companies of your own creation. This is exactly what we do as we go step-by-step through the process of creating a banner ad in Fireworks.

Step one: Set the stage

The very first step in creating a banner ad is to make sure you know what size it should be. Although you may sometimes come up with a creative idea that would dictate using a certain size, most of the time when you sit down to make a banner ad, the space has already been alotted. I follow the IAB/CASIE standards with my banner ad, and make a 468×60 Full Banner which can be displayed on almost any website that accepts advertising.

Step two: Write the script

Now that you have a suitable “blank page” of the right size and shape, you are ready to sit and stare at it while you come up with an idea. All the same things that apply to regular animations apply to banner ads with regard to making a concise statement, planning ahead, and watching file size.

Let’s face it: a 10K or 12K banner ad is not going to get into serious character development or include a lot of scene changes or scenery. If you can’t express your idea in a few lines, it probably won’t fit into the banner. Think “bumper sticker,” and you’ll probably be more successful.

My ad is for a fictional magazine called Mundane Magazine. It’s a hip, youth-oriented magazine about the Web. I want to make something that attracts the attention of the target audience of young, hip Web surfers. Here’s the pitch for my ad: “A UFO crash lands on a barren alien landscape. The pilot thinks, ‘&*/$.’” Not much of a plot line, but again, what do you want from 12K?

Step three: Create the cast of characters

Our little movie has a stage and a script. Now it needs a cast.

Banner ads are deliberately sized as small as can be, and I find the dimensions a bit of a constraint when I’m drawing. Objects in banner ads are often cropped, scaled down, or halfway off the canvas anyway, so I like to draw and build objects in a second, larger document window (see Figure 24-1); sort of a scratchpad — or, to keep the showbiz analogy going, a backstage area where objects wait to be placed in their scenes. Because Fireworks objects always remain editable and can be easily dragged and dropped between documents, this backstage area is a convenient way to work.

Figure 24-1
Figure 24-1: Use a second document as a scratchpad or backstage area when building objects for use in a banner ad, to avoid working entirely within the puny confines of the ad itself.

Complex effects such as drop shadows and glows increase the weight of the final animated GIF quite a bit because flat colors compress better in the GIF format. Concentrate on drawing good-looking objects, and leave the effects for later. If your final animation is underweight — yeah, right — then you can easily go back and add some effects to objects.

These elements make up the “cast” in my ad:

Each of these elements can be thought of as a cast member, an independent entity that we need to tell what to do as we make our ad.

Step four: Direct the action

Now you’re ready to start putting the objects where they go. Create a layer for each of your cast members. I have four cast members, and I have a pretty good idea of the order in which they should be stacked: the background should be on the bottom and the text should be on the top, so I made four layers:

Figure 24-2 shows these layers and shows that the mountains are placed into the layer called background, which is then shared so that it appears in every frame. I can lock the background layer now and forget about it.

Figure 24-2
Figure 24-2: The background is going to stay the same throughout the animation, so the background layer is shared. This layer is now the same in every frame.

Splitting up objects onto their own layers enables you to share a layer at any time, if you decide that a cast member should be static. I’m not sure yet whether the text with the name of the magazine and the catch phrase is going to be static. It probably will be, but I might get to change that after I see my animated GIF’s weight. For now, I place the text in the banner and share its layer too.

At this point, the first frame is basically done. The mountains and logo are in place, and the UFO hasn’t appeared yet. I like to build the last frame next, which is where the animation rests before looping. I want to make sure that the UFO and the thought bubble are the right size, so that they hang together nicely in that frame, before I animate them through a bunch of middle frames (see Figure 24-3). Creating the first and last frames before the others often makes filling in the middle frames a lot easier.

Figure 24-3
Figure 24-3: After you finish the first frame, create a new frame in which to build the last frame. Your two-frame animation now has a start and finish, which makes building the middle much easier.

Finally, we’re ready to start some serious animating. In the first frame, the UFO hasn’t appeared yet; in the last frame, it has landed. I’m going to copy the UFO from the last frame, paste it into the first frame, and then move it to the top of the canvas, so that it’s just peeking in.

So, in Frame 1, the saucer is just appearing. I want the next frame to be almost identical, except that the saucer should move a little bit closer to its landing site. The saucer doesn’t have far to travel, and I’d like it to do so in seven or eight frames,
 so that the whole animation is nine or ten frames long. Keeping the animation in a small area and on a small number of frames limits its file size.

You can distribute objects to their own frames at any time with the Distribute to Frames button on the Frames panel, so it’s often easiest to build an animation entirely within Frame 1. In my case, I just keep duplicating and arranging copies
 of the saucer in the correct positions on the canvas. Eventually, Frame 1 contains
 a bunch of saucers in the correct positions on the canvas, but in the wrong frames, as shown in Figure 24-4.

Figure 24-4
Figure 24-4: Duplicating the saucer and moving the copies into
 the correct positions on the canvas gets them ready to be distributed to their own frames.

Because the last frame is already done, I want to manually create frames before clicking the Distribute to Frames button so that Fireworks doesn’t have to create any frames and overlap my final frame. I have seven saucers in Frame 1, so I need six new frames after Frame 1.

After distributing the saucers to frames, I can preview my animation by using the VCR controls, and tweak the saucer’s descent by moving it a bit to the left or right in certain frames if necessary until I get the effect that I want, which is a bit of a rough landing.

Once you get to the point where your animation is actually playing, the inevitable rewrites begin. In my case, I decided that I didn’t want the thought bubble to be the last frame. Instead, the last three frames should go: saucer lands, thought bubble appears, and then thought bubble disappears. I also realized that the “landed” saucer needs a little chewing up to emphasize that it has “crashed.”

Chewing up the saucer is pretty easy, but it appears in Frame 7 and Frame 8. After modifying it in Frame 7, I selected it on the canvas and Alt-dragged (Option-dragged) its selection icon in the Frames panel (Figure 24-5) from Frame 7 to Frame 8. This copies the selection from Frame 7 to Frame 8.

Figure 24-5
Figure 24-5: Dragging the selection icon in
the Frames panel from frame to frame moves a selection. Alt-dragging (Option-dragging) copies the selection.

The quickest way to get that extra frame I want on the end is simply to duplicate the last frame and then delete the thought bubble out of it. I lose very little in bandwidth this way, because the last two frames are almost identical, and the only addition to the final frame is more flat color where the thought bubble was. Duplicating the last frame is as simple as dragging it in the Frame panel to the New Frame button.

The only thing that’s left now is to set the frame timing so that the last three frames are a little slower. The frame timing, looping, and such are set either in the Frames panel or on the Animation tab of the Export Preview dialog box. Working in the Export Preview dialog box, shown in Figure 24-6, provides smoother animation playback than the document window, and a centralized access point for animation controls. You can see that the last three frames are set to one second, two seconds, and one second, specified in hundredths of a second. I tested a few combinations of speeds by using the VCR controls in the Export Preview dialog box. Looping is set to 10 times, which is long enough that it loops for about a minute, because my banner takes a little over five seconds to play. At that point, it becomes a static banner that still invites the viewer to visit Mundane Magazine, without annoying them by continuing to flash away.

Figure 24-6
Figure 24-6: Set the timing of individual frames and set the looping for the whole animation. Note that the animation is playing in the Export Preview.

Step five: Leave the excess on the cutting-room floor

Don’t be afraid to be brutal when exporting your animation and creating the animated GIF image itself. Remember that your focus is to get a message across quickly — not to win awards for the most colors or the most profound use of animation. My banner came in just under 12K, but if it were any bigger, I would definitely have to consider one of the following options:

Sometimes, swallowing your creative pride can lead to a better overall presentation and a fast-loading, attention-attracting banner ad that’s ready to take a message to the Web. 
The final Mundane Magazine banner is exploded in Figure 24-7.

Figure 24-7

Figure 24-7: The finished banner ad keeps the animation in a small area and in a small number of frames. The flat color background compresses well. The banner weighs under 12K.

Fireworks Technique: Using Blur to Save Frames

Generally, you want your ads to be dynamic and fast-moving, but as with everything on the Web, bandwidth is always an issue. Every frame that you add to your banner increases the file size.

A common technique for creating a feeling of action and speed in a banner ad without increasing the frame count and file size drastically is to use a motion blur filter — such as the Eye Candy Motion Trail filter included with Fireworks 3 — to get an object from point A to point B, as shown in Figure 24-8. Instead of moving across the banner in five or six frames, the saucer takes three steps from when it first appears to when it stops moving, but still seems to fill the intervening space. Without the Motion Trail filter, spacing the saucer so far apart would give it the appearance of disappearing and reappearing instead of moving.

Figure 24-8
Figure 24-8: The saucer seems to quickly fly across the banner, at the meager expense of just three frames.

You can also make objects seem to be moving more quickly by altering their opacity settings. The motion-blurred saucers in Figure 24-7 have an opacity setting of 70 percent. Experimenting with the opacity setting and the controls in the Eye Candy Motion Trail filter can lead to impressive results.

Summary

Banner ads are a practical and popular application of the animated GIF. When creating banner ads in Fireworks, keep these things in mind:

From “Animating Banner Ads” — chapter 24 from the book “Fireworks 3 Bible” by Joseph Lowery with Simon White, published by Wiley.