How to make a flash banner clickable

How to make a flash banner clickable

Index:
(1) What is a Flash banner?
(2) How do I make my Flash banner into a button?
(2.1) How-To Clickable with ActionScript3.0
(3) How do I tell if my banner is clickable?
(4) Flash Banners in Ad Butler
(5) Additional Reading


NOTE: All example file paths and URLs are for demonstration purposes and I don't recommend you stick them into address bars expecting something to happen.


(1) What is a Flash banner?

Flash banners are different than ordinary .gif, .jpeg, or .png banners. Flash is a programming language, and every flash banner is a small application that is run by a flash-plugin installed in your browser. Typically a Flash banner is an entirely "clickable" area, that when clicked on will redirect the user viewing the banner to the advertisers desired destination.


(2) How do I make my Flash banner into a button?

One way of doing this is to create an invisible button over top of your entire Flash animation.

I will start this example from scratch.
(example done using Adobe Flash CS3 Pro, using Actionscript 1.0/2.0)

a) open up your flash file
b) add a new layer to the file, "on top" of the other layer(s)
c) select the Rectangle Tool from the vertical toolbar on the left side of your window
d) in the properties of the tool, change the stroke and fill alpha to 0%
e) draw the invisible rectangle over your entire scene
f) right click inside the rectangle and select the option "Convert to Symbol..."
g) select the "Button" option and name the button "clickTAG"
h) right click inside the rectangle (now a button), select "Actions"
i) make sure that your current selection is the button clickTAG, then copy-paste the following script:

on(release) {
 if (clickTAG.substr(0,4) == 'http') {
 getURL(clickTAG, "_blank");
 }
}

j) close the action box, and export the animation as a movie by going... File > Export > Export Movie...

So you want to find out if what you just did worked? See the section (3) below.

(2.1) How-To Clickable with ActionScript3.0

The steps for creating the banner itself are fairly similar to section (2).

Once you have created a button, add the following script to the actions for that button:

import flash.net.navigateToURL;
import flash.net.URLRequest;

// adding a mouse click event listener to "yourButton"
// which calls the function "handleMouseClick" when triggered
yourButton.addEventListener(MouseEvent.CLICK, handleMouseClick);

// the function which redirects you to a new page
function handleMouseClick(event:MouseEvent):void
{
	var url:String = '';
	for (var paramName in root.loaderInfo.parameters)
	{
		// detect any "clickTAG" case just in case something nonstandard is used
		// ex. clickTag, clicktag, ClickTag, etc
		if (paramName.toLowerCase() == "clicktag")
		{
			url = root.loaderInfo.parameters[paramName];
			break;
		}
	}
	// ensure that it's actually a URL we're navigating to
	if (url.substr(0,4)=="http")
	{
		navigateToURL(new URLRequest(url), "_blank");
	}
}

To test this, see section (3) below.


(3) How do I tell if my banner is clickable?

The easiest and most effective way of testing your Flash banner in a stand-alone fashion is to manually pass it a URL and see if it redirects correctly when clicked upon.

There are two ways of doing this. You can either access the banner directly from your computer using a local directory path, or put the banner on a website.

A local path test might look like:
C:\testdirectory\test.swf?clickTAG=http://www.google.com

A website url would look like this:
http://www.mydomain.com/banner/test.swf?clickTAG=http://www.google.com

For the rest of this example I will use the test website.


To test this, stick the following URL into your browser address bar and hit enter:

http://www.mydomain.com/banner/test.swf?clickTAG=http://www.google.com

Now, if you click on the resulting Flash animation which is displayed in your browser, you will be redirected to Google. If you are NOT redirected, something is wrong with your banner button or your clickTAG script. Take careful note of the result of clicking on your banner.

-No redirect at all usually means the button has no clickTAG script at all.
-Different website than http://www.google.com usually means the banner is redirecting statically and NOT using the clickTAG parameter.
-A HTTP error, usually 404, usually means that the clickTAG script is incorrect and it is probably trying to redirect to a relative link.
For example, a relative link error in this case might look like: http://www.mydomain.com/banner/http://www.google.com -- which is clearly an invalid URL.


(4) Flash Banners in Ad Butler

The following are the general steps to adding a flash banner to a set or campaign in Ad Butler. I will use the example location from above.

Begin by navigating to the set or campaign you want to add a flash banner to.

1) click on "Add New..."
2) specify a name for the banner, "my flash banner test"
3) select "Flash (.swf)" from the Banner Type list
4) specify a destination (Destination URL): http://www.google.com
5) specify the flash location (Flash URL): http://www.mydomain.com/banner/test.swf (or if you are using the Media Library, choose from there)
6) click on Generate Script

This will create the flash object code necessary to create your flash banner on a website with the correct dimensions and clickTAG.

<object width="728" height="90" id="movie">
<param name="movie" value="http://www.mydomain.com/banner/test.swf?clickTAG=<*tracking_link*>">
<embed src="http://www.mydomain.com/banner/test.swf?clickTAG=<*tracking_link*>" quality="high" width="728" height="90" type="application/x-shockwave-flash">
</object>

You may note the "<*tracking_link*>" that shows up twice in the generated Raw HTML/Script box. This is used by Ad Butler when serving your ads, and is replaced by the specified destination URL.
If you want clicks to be tracked, it is important that you do not change the Raw HTML/Script unless you know what you are doing.

7) save the banner

Note: If your banner passed the tests in section (3), you should be done and the banner ready to rotate and track clicks.


(5) Additional Reading

Adobe's Official Resource for flash ads:
http://www.adobe.com/resources/richmedia/tracking/designers_guide/

Best practices for flash advertising:
1) http://www.adobe.com/devnet/flash/articles/flash8_bestpractices_10.html
2) http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7b25.html