This is a quick beginners guide to creating advertising Flash banners, including some technical issues you should consider.

Before you create your Flash banner

Before you begin creating your file there are a few things you will need to confirm with your client, advertising network (i.e. MSN or Yahoo), or digital marketing agency (i.e. TradeDoubler) . These are, for example, banner sizes, file restrictions (such as animation length, looping, file size), and URL.

Banner sizes

A banner can be of almost any size, and can be dependent on placement, geographic location and company. Some common sizes are:

• MPU – 300 x 250 px
• Skyscraper – 120 x 600 px
• Full banner – 468 x 60 px
• Leaderboard – 728 x 90 px

File restrictions

Animation length

Some advertising networks will require a limit to your animation length, so before you start ensure you know what this is if there is one, otherwise take a look at IAB Rich Media Standards. They recommend 15 seconds for the length of the animation.

Looping

Some advertising networks also do not allow the animation to loop, so find out if this is so. It’s also worth considering whether the banner will benefit from looping the animation, or if you want to finish on a final frame with a strong call to action.

File size

There will be a file size limit to your Flash banner, so optimising your banner is essential. It’s a good idea to consider this at the design stage. Try to keep everything as simple as you can. Bitmap images and a variety of typefaces will increase your final file size, so on your publish settings select the option to generate a size report to discover where you can streamline your file. Also, take a look here for some further advice on optimising your banner.

URL

The standard method of passing a URL to the Flash banner is by using a clickTag. This code allows the banner clicks to be tracked. The page that the Flash is placed in will tell the banner what the ‘clickTag’ value should be, i.e. the URL with the tracking code, then the Flash banner will use that value as the URL when it is clicked.

The format of the clickTag is also dependant on the placement. ‘clickTag’ seems to be the most common, however, ‘ClickTag’, ‘ClickTAG’ and ‘clickTAG’ are also used.

Starting the Flash banner

Frame rate

Too fast and some processsors can’t keep up, too slow and the animation is jumpy and awkward. So what should you set your frame rate too?

Here’s some info on the ‘Magic Frame Rate’

“About magic frame rate numbers: Recommended fps values for your FLA document are either 21 or 31, otherwise known as the “magic frame rate numbers”. The reason for these values is that the default document setting of 12 fps is more often than not too slow for tween animations, resulting in “jerky” motion. So most of the time it needs to be higher. In addition, it has been found that two SWFs published to the same fps, will run slower on the Mac Flash Player than on the PC Flash Player, given equivalent processing power. Sometimes the lag time is quite noticeable. To counteract this “bug”, we must set our FLA to either 21, 31, 41, 51 or 61 fps to negate this effect. But of course most computer processors cannot keep up with a frame rate higher than 31 fps, or performance issues in the Flash Player may occur. Thus it is advised that only frame rates of either 21 or 31 be used for most FLA documents. Only if you are running an FLV video player in your browser with the video at high resolution (larger than 320×240) would it be advisable to drop the frame rate of your FLV down to 12-15 in order to conserve performance. See Tom Green’s CMX article for more details on video performance in Flash.”

Taken from: Community MX : Understanding the Movie Clip Architecture.

So, I’d recommend keeping your frame rate to 31fps, to ensure minimal performance issues while still keeping a nice, smooth animation.

Background

Always remember to add a solid background to your banner, rather than setting the background property in Flash. Quite often, when a banner is placed it will have the ‘wmode’ set to transparent, so you can lose your set background colour.

Border

It is also recommended to have a solid border differentiating your Flash banner from the content surrounding it. This is quite often a restriction requested by advertising networks to ensure that your banner does not appear to be part of the site content.

Button

Unless you want different parts of your banner to link to different places, a good habit to create a transparent button covering the full size of the banner.

Then add the button action, something like this:

on (release) {
getURL(clickTag, "_blank");
}


Providing an alternative

Also remember that you may have to create a gif alternative to the Flash banner. The file size restrictions will also be an issue here, so try to keep it as simple as possible. It may be a good idea to keep this static if possible.

And finally

If you are looking for some more information, check out Adobes Best Practices when advertising with Flash or read my other article on Flash Banners Ads.

Tags: actionscript, banners, design