Prepare a Network Ready Banner Ad in Flash

Aug 12th in Tools & Tips by Victor Jackson

When designing Flash ads for deployment over an ad network it's required for the ad to have tracking capabilities embedded within it. This is accomplished through proper use of the ClickTAG ActionScript statement. ClickTAG will determine the behavior of the ad when the user interacts with it. It will also allow the ad network to track the ad, the number of impressions delivered and the click-through rate.

In this tutorial we'll learn how to create a Flash ad for deployment.

Author: Victor Jackson

Victor Duwon Jackson is the founder and part owner of Rachal Consulting (http://rachalconsulting.com), a web design company in South Texas. Victor is professional programmer, and has been doing freelance web design for the past 13 years.

Final Preview

Let's take a quick look at what we'll be working towards..

Step 1: Dimensions

For the purpose of this tutorial let's first determine the size of our banner. The size of a typical banner ad is 728px x 90px. An ad of this size may be called by serveral names depending on the ad network, but for now we'll call it a banner. The first thing we'll do is create a document in Flash for our banner. Begin a new file in Flash. Choose an ActionScript 2.0 document. The reason we are going to use AS2.0 over AS3.0 is that you can't apply ActionScript directly to a object in AS3.0, since movieclip and button instances aren't supported. Also the location of the variable that Flash will be importing is different.

Once you have created your document go into Modify > Document Properties and set the document size to the height and width of the banner.

Now let's make a movie!

Step 2: Create Your Banner Ad

Since this tutorial is not about how to make a movie but about how to apply ClickTag statement to the movie, we won't go into any detail on that. So by this step we should have our Flash banner created. I've created a simple banner for the Tuts Plus network that we'll use to demonstrate the ClickTag.

Step 3: ClickTag Layer

We need to expand our timeline and create a new layer. Be sure to give it a definitive name to make it easier to find. This is an especially useful tip if you have a movie with many layers. Let's name this new layer ClickTag. To do this go to Insert > Timeline > Layer.

Step 4: Rectangle

With the new layer selected, type 'R' to activate the Rectangle tool. Drag the rectangle over the entire stage. Be sure to cover everything.

Step 5: Button

Next we're going to apply some properties to the button we've just created. Right-click on rectangle we made and choose Edit in Place. The next timeline we see will display the 'Up', 'Over', 'Down', and 'Hit' frames. Click and hold the 'Up' frame and drag it to the 'Hit' frame.

Step 6: Actions Window

Return to the main stage. We'll see that the shape we created a moment ago has now taken on a greenish tint. This means that our layer/button is clickable. Save the file, then click on the colored layer you created and open the actions menu by going to Windows > Actions, or just hit F9.

Step 7: Select ClickTag Layer

With the actions menu open check that the ClickTag layer is selected. This is very important. Since having any other layer selected will misapply the ActionScript.

Step 8: ActionScript

Ok, this is where the magic happens. With our actions panel open copy and past the code below directly into the pane. Remember we mustn't edit this code, or the ad will not be trackable. Paste it in AS IS.

			
			on (release) {
			if(_level0.clickTag.substr(0,5) == "http:"){
			getURL(_level0.clickTag, "_blank");
			}
			}

Now, let's peek behind the curtain and see what is going on with our script.

First, we are setting up our action with on(release). "on(release)" is an old school event handler that invokes an action when our button is clicked on, or when the user clicks then releases. Next, we verify that the url that we will be dynamically assigning to our ad is an actual "http:" url.

NOTE: There are many variations of this script floating about, but it is very important that it is always used with the conditional "if()". This a precaution. Since we are assigning variables this way, it would be relatively easy for a malicious page to take our SWF ad and make a cross-site scripting attack against a user. The details of that go beyond the purview of this tutorial, but just remember that this is an important security precaution.

Our script is written to allow the ad network to track where the banner was displayed and when it was clicked on. Our getURL action will navigate the browser to "clickTag" in the EMBED code. The getURL(clickTag, "_blank") statement will take url that the ad network will place in the embed statement and dynamically assign it to our ad.

For Example:

<EMBED src="our_flash_banner.swf?clickTag=http://ouradnetwork.com/can-track-us?http://and_assign_destination_url.com">

Step 9: Publish Settings

Check the publish settings too; make sure that they are set to publish as ActionScript 2.0. Hit Commandn + Return (on the mac) to test the banner.

Step 10: Check

In the preview generated, we'll hover our mouse over the ad to ensure that it is indeed clickable. Finally, we should return to Flash and check that our script generated no errors.

Congratulations! You now have a banner ad ready for deployment.

Some Notes about ClickTag

It's important to understand somethings about ClickTag. This isn't a feature of Flash itself. The ActionScript above allows your SWF object to accept information from outside. This technique tells Flash that the movie you just created will open a url without you having to know the exact url when you are making the movie. The hyperlink is passed to the SWF from the html embed code that your ad network will use to serve the ad.

ClickTag doesn't have a value when you create it. Nor will it have any real meaning when you view the preview of the movie. Its value, the url link is provided by the html embed code.

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

MSFX August 12th

its nice but I have no idea why you left the framerate so low, set it to 24 or 30 and it will look SO much nicer…
( Reply )
MSFX August 12th

why did you leave the framerate at 12???
( Reply )
Percival August 12th

Publisher specs usually cap it around 18fps however 12 is pretty low. For this example its frame-rate is insignificant. Good tut but there are MANY more metrics that get tracked than just clickTags.
( Reply )
André August 12th

Wow, very useful, i liked the way you send the value to flash, addressess can be updated without open flash program.

But… _level0?? on(release) ??? come on, dont need to use AS3, but use AS1?? hehehe

Thanks anyway

With this tutorial i had an idea for AS3 programmers.
- Create a new actionscript file.
- Extends the MovieClip class
- Set the mouseChildren to false
- Set the buttonMode to true
- In constructor create an event that will check when the external variable is loaded and store it
- Save this class in the classpath…

When creating an anymation for banner, all you need to do is to set the document class as the baseclass you´ve already created, and dont need to create any button or use any code in flash
( Reply )
1. Gustavo Guichard August 12th
  
  This Comment is much better than the Tutorial!
  ( Reply )
2morrowMan August 12th

If clickTag url starts with “https” your banner will not work.
( Reply )
Dario Gutierrez August 12th

I’m agree with André and MSFX, a 30 fps of frame it will give ease the animation. Develop with AS3 it will good with classes, maybe can be good idea build a backend. But good guide dude!
( Reply )
1. Tobias August 25th
  
  It MIGHT look great watching that in your development area. It MIGHT be great when using a simple banner animation @30fps however when timing and complex animation occurs 30fps is just way too much for most computer to play it smoothly.(not even mentioned viewing it at Safari OSX) I can hear you say: WHAT?! Is this dude living in stoneage? No i’m not. Most of your clients are viewing your creatives at semi-outdated systems. Definatly NOT at flashplayer 9 or 10 (in most cases). Things just don’t run that smooth. If your client is seeing a jerky banner @30fps, go for 18fps and you’ll be fine.
  
  For the AS3 issue: Why not develop in AS3.0? Sometime you just can’t because deployment sites don’t support modern flash versions.
  ( Reply )
Jason August 12th

I think most people know how to do this in AS2. Time to quit thinking in AS2 and bring relevant AS3 tutorials. Its not that one can not do this in AS3; Its just a different process.
( Reply )
1. Neilio August 13th
  
  Trouble with AS3 is some ad servers only accept AS2 (eg Double Click’s TangoZebra). So you may waste a while crafting in AS3 only to find out from the client that some of the banners are to be deployed on an AS2-only server. Sticking to AS2 for banner development actually can save a trip down pain lane.
  ( Reply )
  1. Ahmed Nuaman August 14th
    
    Actually now DoubleClick (previously TangoZebra) supports AS3
Victor Duwon Jackson August 12th

Thanks for the feed back. Looking at it here, I would have been a good idea to develop the ad a bit more. I overlooked the framerate. My focus was on the properties and usage of the clickTag. I feel this is something of value to the community.

This is my first tutorial, and I hope to post more in the future. Your feed back will help me to make them better.

Thanks again.
( Reply )
1. André August 13th
  
  i liked the idea for this, even it´s in AS2, it´s usefull for me, so thanks a lot.
  
  Maybe next tutorials come with AS3!!
  
  Thanks
  ( Reply )
Yelpy August 12th

Hey lads, I never really post but thought I’d just add to this. Firstly props to Victor for the tutorial. But yea I see no reason not to use 30fps and have never had any problems with affiliates.

I do aloooooooot of these bloody add banners and I use the same code for all of them. I wrote this code when as3 was born so it’s prob a bit dated now but it’s handy if anyone wants to just copy & paste it. Also the instance name of the button movieclip I use in this code is simply “clickArea”.

Thanks, Yelpy.

/**** declare variables ****/
var url:URLRequest;
var link:String; var lnk:String; var link0:String;
var link1:String; var link2:String; var link3:String;
var defaultLink:String; var newWindow:Boolean;
var windowType:String; var win:String;
var linkMethodPost:Boolean; var req:String;

/**** manually add link ****/
link = “”;
defaultLink = “http://www.yourdefaulturl.com/”;
// open in new window (_blank) true or false
newWindow = false;
// set request method to POST true or false, if false: GET
linkMethodPost = false;

/**** declare links ****/
link0 = link;
link1 = this.loaderInfo.parameters.lnk;
link2 = this.loaderInfo.parameters.creativeURL;
link3 = this.loaderInfo.parameters.clickTag;
win = this.loaderInfo.parameters.win;
req = this.loaderInfo.parameters.req;
setWindowType(); setReqMethod();

/**** sort links ****/
sortLinks();
function sortLinks(){
if ( link1 != null ){
if ( link1.length > 12 ){
lnk = link1;
}else{
lnk = defaultLink;
}
}else if ( link2 != null ){
if ( link2.length > 12 ){
lnk = link2;
}else{
lnk = defaultLink;
}
}else if ( link3 != null ){
if ( link3.length > 12 ){
lnk = link3;
}else{
lnk = defaultLink;
}
}else{
if ( link0.length > 12 ){
lnk = link0;
}else{
lnk = defaultLink;
}
}
}

/**** set window options ****/
function setWindowType()
{
if ( win != null ){
if ( win == “new” ){
windowType = “_blank”;
}else{
blankOrSelf();
}

}else{
blankOrSelf();
}
}
function blankOrSelf()
{
if ( newWindow ){
windowType = “_blank”;
}else{
windowType = “_self”;
}
}

/**** set request method ****/
function setReqMethod()
{
if ( req != null ){
if ( req == “get” ){
linkMethodPost = false;
}else if ( req == “post” ){
linkMethodPost = true;
}
}
}

/**** button code ****/
clickArea.addEventListener(MouseEvent.CLICK, doClick);
function doClick(Event:MouseEvent):void{
url = new URLRequest(lnk);
if ( linkMethodPost ){
url.method = URLRequestMethod.POST;
}else{
url.method = URLRequestMethod.GET;
}
navigateToURL(url, windowType);
}
( Reply )
Diego SA August 12th

OK. This one could be useful but at least you could have done something more beautiful, even it being only an example, and at a higher frame rate, like 30.
Anyway, thanks for this tut!
( Reply )
Ahmed Nuaman August 12th

It may’ve been worth talking about integrating eyeblaster or TangoZebra/DoubleClick components…
( Reply )
David Moreen August 13th

This looks really awesome. Something small, that I can work on to help me add that actionsctipt to my list of coding languages.
( Reply )
Benjamin Reid August 14th

I would never presume clickTag code as it’s almost different with every company. It’s best to download the specifications before coding anything.
( Reply )
Ev August 14th

Yeah I do a lot of banner work and all the sites usually have their specific click tag code in their Spec sheets
( Reply )
Boka August 17th

When I create banner ads I always go 15fps. It cuts down on file size. In some brands I need to be under 40k. That doesn’t leave much room so every bit I can bring it down without changing the graphics quality the better.

.

Just remember kids. This isn’t a movie it’s a banner. I think thats where everyone is getting caught up. But hey – you live, you learn.
( Reply )
Tony August 17th

Nice tut but I wanted to echo Benjamin Reid. While changing the parameter in the query string should be trivial, some companies expect clickTAG, ClickTag or cLiCkTag instead of clickTag for example and may have templates set up for creatives that can’t be changed easily if your naming differs from theirs.
( Reply )
bryan August 20th

Thanks Victor for the tut and Yelpy for the AS3 version! You guys saved me some work.
( Reply )
SEO August 22nd

I design banners for DART and the frame rate has to be 20 fps and AS2 along with that pesky 40K file limit. Makes it pretty hard to do really nice things.
( Reply )
1. Tobias August 25th
  
  There are solutions for that. With a little more cost you can host your banners elsewhere and link it to DART, via that way you can shortcut the 40kb limit and go up to 300K or more. I just costs a little more.
  ( Reply )
2. Karl September 25th
  
  An important note for keeping the file size down and keeping quality if you’ve got any pixel images in there:
  • When saving jpgs–keep quality at about 70 when saving from photoshop.
  • Right-click on the image in the flash library, go to the properties.
  • make sure that compression is set to photo(jpg) and uncheck “use document default quality”.
  • set a custom quality for each image, eg. 70 (experiment a little)
  
  This is way better than saving jpegs in crappy quality from photoshop and try to lower the quality in the publishing settings.
  ( Reply )
Michael August 25th

Thanks Victor. For a Flash newbie, this was great. I’m having a very hard time finding tutorials for creating a banner ad Web link, especially using CS4. As I am just learning this, it is all pretty “greek” to me. Yelpy’s code is WAY out of my league. I am STILL having trouble with Victor’s code as I am getting a syntax error.

Scene 1, Layer ‘Click Tag’, Frame 1, Line 1 1087: Syntax error: extra characters found after end of program.
( Reply )
Kjup September 10th

This is great, thank you! Is there a simple way to integrate a clickTag through an xml based banner? In other words, my clicks are set through the xml file and not within the fla file itself. How do I integrate a clickTag for tracking purposes against an ad server via xml?
( Reply )
Waspy October 12th

I keep getting the debug error

The Flash Player is paused so that breakpoints may be adjusted. Click Continue to start the movie.

Why?
( Reply )
fxkill December 22nd

I’ve been wondering for sometime now, and my search on google hasn’t really gotten me anywhere.

Why is it that most flash advertisement servers out there only support as2, and refuse to upgrade to as3? Is it because of their server software that they refuse to update? or is it because they believe that most people still run flash player v8? or is it something completely different?
( Reply )
Maplegrovebob December 27th

One company posted that they still require AS2 because some browsers give a security error using clickTAG in AS3 in Flash 8 and 9 players.

I am a newbie and I assumed I would just learn AS3. Now I found out that I really need to learn AS2 to create banner ads for clients. After trying to learn AS3, I would like to use it, but I guess I won’t be able to for now.
( Reply )