clickTAG and Loop Limit Flash Tutorial

Since we all love Flash so much (please note sarcasm), it is time to write up a quick tutorial on adding a clickTAG to Flash creative. clickTAG’s like Flash in general are a source of confusion and a goodly amount of pain for many folks. A clickTAG, or simply a little piece of code must be applied to creative in order to track clicks via an ad server. An ad server can track impressions quite readily, but due to the nature of Flash, it cannot tell if a user clicks on it. So a clickTAG is applied to the creative to tell our ad server to pull a URL to send user to the appropriate place. The URL is not applied or programmed in the clickTAG or otherwise – we simply associate the URL with the creative when we load into our ad server. This is pretty universal and not unique to WTWH media, however this tutorial is solid with our ad server. One thing that is specific is we require a loop limit of 3X on Flash or other animated creative, and I also cover one way to accomplish that. I’ve always thought Flash is over complicated for doing simple things, perhaps version 5.5 is making things easier, but have not explored fully. In fact,  I’ll admit I know very little about Flash in comparison to say Photoshop or even 3D modeling programs (did I mention I really like Modo?) I use, but I’ve tested this method on Flash versions CS3 to the latest Flash 5.5

For simplicity sake, the screen shots just show one layer of creative, but no matter, you’ll want to work on the top most layers to install the Flash loop limit and clickTAG.

First off, be sure your using Action Script version 2. If you have questions about the difference, as usual wikipedia has some info here. In this example we’re going to work with a 300×250 canvas set to 24 fps.

Next step is to add a layer and select the first frame.

In the action script window put in this bit of code:
var stopNum = 0;
function looper(loopLimit) {
if (stopNum>=loopLimit) {
stop();
} else {
gotoAndPlay(2);
}
_root.stopNum++;
}

Next up is to go to the last frame, in this case where I want the animation loop back from and ultimatley stop on. Right click and Insert Keyframe.

Next is to just put a very simple count on that frame to tell the looper to stop on pass 3. Since you get one pass, add looper(2) to the action script. And your done with the loop limit part.

Now create another layer above the looper layer. On this layer, we’ll be adding the clickTAG. I always lock the other layers when not using.

Now grab the rectangle tool from the palette and draw out to cover the entire 300×250 canvas.

In this case the whole canvas will fill with the white default and cover all the creative. It does not matter what color, just apply the box.

Now right click the box you just created and select – Convert to Symbol.

On the next dialog tell the box to be a button, by toggling the radio button and then name the button – I just called it clickbtn in this case.

Next go back to the button you just created and select from the properties menu the Blend pull down selector. Go down to Alpha and select. The idea here is to just turn that button invisible so your beautiful creative shines through. You can also select the Color function and choose Alpha and then set the transparency to 0%.

Once your button is in place and its transparent, we can now add the clickTAG to the button. Select the button and open up the Action Script window.

Here is the clickTAG code to use:
on (release) {
if (clickTAG.substr(0,5) == "http:") {
getURL(clickTAG, "_blank");
}
}

So we just basically placed a large button over the entire creative and assigned the clickTAG to that button so if a user clicks anywhere on the banner, the ad server will take the user to the URL provided with the Flash creative.

Next up is to test your creative. If there are any issues, the compiler panel may appear and display unintelligible things to indicate there is some intelligible error. Thats for another tutorial that I will not write. A malformed clickTAG will not really set off any errors. But when viewing your test movie, and you mouse over the creative, your cursor should change to indicate that its click-able (pointer finger), but it will not click anywhere- this is a good sign. 

And thats it. You can now save file and export your flash movie as .swf and send along with URL and you’re ready to roll.

I’m looking forward to seeing examples of HTML5 creative — if you happen to know of any good resources or example sites, demos – fire them back on a comment here.