Flash Article

Building and Deploying Rich Media Video Ads with the Macromedia Flash Ad Kit

Creating a Rich Media Ad

In this article you will create a tabbed ad that contains an introductory graphic, a viewer-selected video in an external movie, and a fill-in form. You can review the finished ad in the goAwayAd.fla movie. The first step in creating a rich media ad using the Flash Ad Kit is to select a Flash Ad Kit template and design your ad.

Choosing the Flash Ad Kit Template

Deciding on a template is relatively straightforward:

1. Install the Flash Ad Kit.
2. Launch Flash MX Professional 2004, select File > New, and choose Flash Ad Kit from the Templates tab in the New from Template dialog box.

3. The Flash Ad Kit provides several different types of ad templates for expandable ads and a general template for all other kinds of Flash ads (see Figure 2). Select the general template and click OK.

   

   Figure 2. Selecting from the ready-to-use Flash Ad Kit templates

4. Name the new movie goAwayAdLearn.fla.
5. Web ads come in a range of standard sizes (details available at the Internet Advertising Bureau). The video ad in this article is a Medium Rectangle. Choose Modify > Document. In the Document Properties dialog box change the dimensions to a width of 300 pixels and a height of 250 pixels.
6. Select File > Publish Settings.
7. In the Publish Settings dialog box, change the Version setting to Flash 6, and change the ActionScript Version setting to ActionScript 2.0. Click OK.

Publisher site requirements generally do not allow a Medium Rectangle to be more than 30K; on some sites the maximum is 20K. Usually time constraints force you to create ads for the lowest common denominator publisher, so make goAwayAd.swf a 20K ad.

In order to minimize the file size of the base Flash ad to meet the publisher's site requirements, an external SWF file containing the video elements is loaded when the viewer clicks a button to view the video. If the video were contained in the main ad, there would be no way to fit it into the 20–30K maximum size that most publishers require for Medium Rectangle rich media ads.

Setting the Stage

Before continuing with the rest of the tutorial, load goAwayAd.fla and open the Library panel. Now you can use the assets in its library to recreate this ad. Be sure to click on the goAwayAdLearn.fla tab before continuing.

1. In the Script layer, click Frame 32, drag the cursor to the Content layer, and press the F5 key to insert frames out to Frame 32.

2. Select the Content layer and insert 10 new layers. From top to bottom, name the layers beneath the Script layer as follows:

   • Labels
   • Video MC
   • Form
   • Button Text
   • Buttons
   • Outlines
   • Details
   • Text
   • People
   • Can
3. Rename the Contents layer as Background.
4. On the Script layer, add keyframes in Frames 10, 19, and 26. Remove the keyframe in Frame 2.
5. On the Labels layer, add keyframes in Frames 9, 18, and 25. Label the frames tab1, tab2, and tab3, respectively.
6. On the Video MC layer, add keyframes to Frames 18 and 25.
7. On the Form layer, add a keyframe in Frame 25.
8. On the Button Text, Buttons, Outlines, Can, and Background layers, add keyframes in Frames 2, 18, and 25.
9. On the Text layer, add a keyframe in Frame 2 and a blank keyframe in Frame 17.
10. On the Details and People layers, add keyframes in Frame 2 and 18.

Adding a Clickthrough

A useful beginning of the design phase is to think about the kinds of interactions you want to track within the ad. In this ad, useful events to track could be the selection of each tab, the time spent in each tab, user selection of the video, length of time the user watches the video, and user drop-off from the fill-in form.

Each ad made with the Flash Ad Kit requires a clickthrough URL. In this ad, it goes to the home page of the Flash Ad Kit:

1. Select the Background layer and drag an instance of the clickThrough movie clip to the Stage.
2. Name the movie clip instance clickThrough.

3. On Frame 10 of the Script layer, add the following code to automate and track the clickthroughs:

   clickThrough.onPress = function(){
      _root.conduit.exit(1);
      }
   

   You can either enter the above exit code by hand or enter it automatically from the Flash Ad Kit functions folder on the left side of the Actions panel. In the set of Event Functions under the Flash Ad Kit folder, double-click the "exit" function to add it to your code (see Figure 3). Add 1 between the parentheses to complete the code. (You have to add the clickThrough.onPress = function() part by hand, however.)

   

   Figure 3. Adding code to automate and track clickthroughs

4. Switch to the first frame of the Links and Descriptions layer. Go to the set of variables beginning with exit1 and add the following code:

   exit1 = "http://www.macromedia.com/software/flash/flash_ad_kit/";
   exit1window = "_blank";
   exit1windowFeatures = "";
   exit1name = "ClickThrough1";
   exit1desc = "exit click from the background button";
   

5. Test the movie and click the background button. A browser will open up with the Flash Ad Kit home page in it.

Adding an Event

Adding unique events to track what happens in the ad is easy. One example is to add an event to the tab buttons to find out if viewers click to see the video or sign up for a free sample of the product:

1. Select Frame 18 of the Buttons layer and drag an instance of the mc_genericTabButton to the Stage. Provide the instance name tab2.

2. Place the following code on the Script layer in Frame 11:

   tab2.onRelease = function() {
      _root.conduit.event(1);
      gotoAndPlay("tab2");
   };
   

3. Switch to the first frame of the Links and Descriptions layer. Go to the set of variables beginning with "event1" and add the following code:

   event1name = "mainToVideo";
   event1desc = "click from the main tab to the video screen";
   

4. The tab movie clip will now send tracking information to the ad server whenever users click this button.

5. In Line 10 of the Links and Descriptions layer, remove the forward slashes from the line of code so it looks like this:

   conduit_debug = true;

   This turns on a debugger so you can test that your events are working.

6. Test the movie. When you click the button to go to the video screen, the Output window shows "event id 1 with name mainToVideo".

Adding a Timer

Adding timers to the tab buttons so you know how long a viewer watches each screen is also a straightforward procedure. This can provide useful information to determine how well an ad performs in the real world:

1. Place the following code in Frame 19 on the Script layer:

   _root.conduit.startTimer(1);

2. In order to stop the timer and get a proper value for time spent on the video screen, add stopTimer functions to the tab buttons that switch to the other screens. In Frame 19 of the Script layer, add the following code:

   tab1.onRelease = function() {
      _root.conduit.stopTimer(1);
      gotoAndPlay("tab1");
   }
   
   tab3.onRelease = function() {
      _root.conduit.stopTimer(1);
      gotoAndPlay("tab3");
   }
   

3. Switch to the first frame of the Links and Descriptions layer. Go to the set of variables beginning with "timer1" and add the following code:

   timer1name = "videoTime";
   timer1desc = "time spent in the video screen";
   

   The ad will now send tracking information to the ad server about the time spent on the video screen.

4. Test the movie. Click the button to go to the video screen; the Output window shows "starttimer id 1 at 2.027 seconds with name videoTime". The seconds value is a variable number depending on when you click the button.
5. Click the tab button to go back to the main screen; the Output window shows "stoptimer id 1 at 3.203 seconds with name videoTime". The ad server receives the elapsed time between the start and stop events. In this case, it would receive a time of 1.176 seconds (the difference between 3.203 and 2.027 seconds).

You can add further events and timers to each part of the ad. For example, each input text box could contain an event so that you could track where users stop filling out the form. This information could help you improve the ad's effectiveness.

Page 3 of 5

Previous Page

Next Page