Jammin' Banner Ads

Interactivity, Sound, and Curvy Motions in Flash

By Amy Cowen (acybercow@bigfoot.com)

So you want to add a little more pizazz to your banners, your navigational elements, your logo ... you don't want to use Java ... and you don't mind having a plug-in requirement? Macromedia's Flash is the way to go (Figure 1). Learning a few simple Flash techniques can unleash land-locked graphical web elements and give them a life of their own. While you don't want to annoy your visitors -- remember the <BLINK> tag -- adding motion and interactivity can be tastefully done and may catch and hold a viewer's interest for the split second, for example, it takes for a surfer to decide whether or not to follow a banner ad.

While the first installment in this Flash series dealt with Flash basics, this installment takes you a little deeper into the world of Flash. After walking through the construction of an updated banner ad, you'll have learned how to use symbols, buttons, and sound in your Flash movies.

Again, we'll use a banner ad for MySite.com as a project so that you can see how these more sophisticated elements can be worked into the same "space." This time, however, we want to really catch the viewer's eye, and, more importantly, we want to offer the infamous "click here" link so the user can get to the MySite.com site.

Once again, I'm going to use a 400x50 canvas (the images you see throughout this article have been reduced) for the banner ad. This time, I've set the background to a soft yellow, and I've got a yellow, red, and white scheme in mind for the ad.

Figure 2: 400 x 50 pixel canvas

I start out by adding MySite.com, in text, and placing it just off the lower left edge (Figure 2). My thought is to have the words move across the screen and then, upon reaching the right edge, move into a place where they will sit for the bulk of the ad.

Tweening

If you just said to yourself, "Okay, let's tween it," you're right. As you'll recall from the basic banner ad, when you want to move an object in Flash over a number of frames, all you have to determine is where the animation will start, where it will finish, and how many frames will occur in between. Flash can then fill in what happens between the beginning and ending points -- the process called "tweening." So, I need to set up a tweening segment which will move MySite.com first from the left corner to right center, and then another segment to move MySite.com from right center straight across to left center.

Even though the move I envision requires the text to move on a slight incline (from bottom left corner to right center), Flash can easily adapt to this path. If, however, I wanted to add more movement, movement along a curved line, for example, I would need to do two things -- first, make my text into a "symbol," and then add a "motion path," along which Flash can tween.

Contents

• Symbols
• Motion Paths
• Color Effects
• Creating a Button
• Adding Sound
• Concluding Thoughts