1. Code
  2. Flash

Prepare a Network Ready Banner Ad in Flash


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.

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.

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:


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.