Accessibility

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

Glenn Thomas

Producing Future

Brad Henderson

Producing Future

Note: This article describes legacy techniques in Flash video. To learn about the latest best practices for working with video in newer versions in Flash, please read the Flash Video Learning Guide and the most recent articles posted in the Flash Video Developer Center.

Video in interactive advertising provides a powerful opportunity for advertisers to communicate directly with their customers. Web audiences respond much more significantly to video when it is used properly in interactive advertising. Whether using video to create a brand impression or deepen awareness of product features, marketers now have the best of both worlds: the communication benefits of video and the interactive capabilities of the Internet.

The Macromedia Flash Ad Kit lets advertisers combine immersive video with rich interactivity in a seamless, efficient manner. The Flash Ad Kit allows an unprecedented analysis of ad effectiveness through the automated tracking of clickthroughs and unique events.

To view this content, you need the latest version of the Macromedia Flash Player.
Download the free Macromedia Flash Player now.

Get Macromedia Flash Player

Example of video within an ad (click the Watch tab)

This article shows you how to use the Flash Ad Kit, integrate the media components included with Flash MX Professional 2004, link to streaming video on the Flash Video Streaming Service, and deploy an ad through the DoubleClick DART Motif ad server. In order to follow along, download and save the sample files into a folder on your hard drive.

Requirements

Macromedia Flash MX Professional 2004

Macromedia Flash Ad Kit

Sample Files

Understanding the Flash Ad Kit and Streaming Video

The Macromedia Flash Ad Kit automates clickthroughs, the loading of external movies, event tracking, and timer tracking in Flash-based rich media ads. The Flash Ad Kit currently integrates with the DoubleClick DART Motif ad server to provide unparalleled information on ad effectiveness.

Flash Ad Kit templates provide a standard timeline, code to communicate with DART Motif, and code to automate the creation and tracking of rich media ads. A general Flash Ad Kit template consists of four layers: Instructions, Links and Descriptions, Script, and Content (see Figure 1):

The standard Flash Ad Kit general template layers

Figure 1. The standard Flash Ad Kit general template layers

External movies such as Flash streaming video (FLV) files are easy to load into Flash Ad Kit movies. This allows you to host a rich media ad on the DART Motif ad server and gain all of the Flash Ad Kit's tracking capabilities, while still accessing a video stream from an external server dedicated solely to video hosting. You get the best of all worlds by creating interactive ads with video in this manner.

Streaming Video Hosting Methods

In order to create a video ad for an advertising client, it's crucial to ensure that you have a robust Flash Communication Server MX hosting solution for your Flash streaming video. This streaming server technology is an ideal platform for hosting and deploying video using the Flash Ad Kit because video starts playing immediately for your audience and the quality of the video is much higher than trying to embed video directly into Flash movies.

You can purchase Flash Communication Server MX and set up your own video server. If you decide to host your own content, then some critical issues you must consider include server uptime, server maintenance, bandwidth availability, and load balancing. Because ads are often displayed in large quantities at the same time, server loads can spike dramatically. In general, you will get better results by using an outside video hosting company rather than hosting the streaming video yourself.

The Flash Video Streaming Service (FVSS) gives you access to Flash Communication Server for your ads. This useful service allows you to begin broadcasting video through your rich media ads by signing up for an account and uploading Flash Video files. The FVSS provides clients with full audio and video streaming capabilities with minimal hassle and cost. Macromedia-approved service providers offer built-in load balancing to handle large spikes in traffic. The FVSS makes creating and deploying rich media ads with video a simple and straightforward process.

Technical Note: Cross-Domain Issues

In some cases, Flash Player 7 will not load movies or data from external domains. Although it is easy to add cross-domain functionality, it requires adding a small cross-domain policy file to the hosting provider's web servers or adding code to your Flash movies. Useful information about the Flash Player security features can be found in Deneb Meketa's article, Security Changes in Macromedia Flash Player 7.

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.

    Selecting from the ready-to-use Flash Ad Kit templates

    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.)

    Adding code to automate and track clickthroughs

    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.

Adding Video

Once you set up the base ad document (goAwayAd.fla), adding streaming video requires creating another Flash movie, adding media components to display the video stream, and defining tracking events.

Creating the Video Stream

The video stream is contained in an external, non–Flash Ad Kit template Flash movie. Using a Flash Ad Kit template Flash movie to create the video stream SWF would unnecessarily add extra file size to the movie because the template always contains ActionScript to communicate with the ad server. Only the base SWF needs to contain this code, not the external Flash movie:

  1. Create a new Flash document and name it videoStreamLearn.fla.
  2. Resize its dimensions to the exact dimensions of the base ad (300 x 250 pixels).
  3. Create a new layer and label it Media.

  4. Select Window > Development Panels > Components to open the Components panel (see Figure 4).

    Taking advantage of the MediaController and MediaDisplay components

    Figure 4. Taking advantage of the MediaController and MediaDisplay components

  5. Drag the MediaDisplay component from the Media Components section and drop it onto the Stage where the video will be shown.
  6. Open the Properties inspector and name the component videoDisplay.

By default, the MediaDisplay component plays back the video stream at the dimensions it receives the video. This is fine if you have properly sized video but it's often necessary to exert more control over the dimensions of the video. For example, the video stream could be a larger size than the playback area, so make it smaller at runtime:

  1. Select the videoDisplay object and choose Window > Development Panels > Component Inspector to open the Component Inspector panel.
  2. In the Parameters tab, uncheck the Use Preferred Media Size option. This turns on Respect Aspect Ratio automatically so your video always plays back at the proper aspect ratio.
  3. Resize the Media Display component to the needed dimensions using the scale tool. If you need more precision, change the width and height in the Property inspector.

In some cases you will not want to allow your ad viewers to control the playback of the video. In this video ad, however, you want to give your audience the ability to pause, move around the streaming video timeline, and control the playback volume:

  1. Drag a MediaController component from the Components panel and place it below the MediaDisplay component.
  2. Select the Media Controller component, open the Component Inspector panel, select the Parameters tab, and change the controllerPolicy parameter to "on."
  3. In order for MediaController to interact with the videoDisplay object, select the MediaController component and choose Window > Development Panels > Behaviors to open the Behaviors panel.
  4. Click the plus button and choose Media > Associate Display from the menu.
  5. Inside the Associate Display dialog box, select the videoDisplay object (see Figure 5). After making sure the Relative option is selected, click OK.
Selecting the path to the videoDisplay instance

Figure 5. Selecting the path to the videoDisplay instance

Displaying streaming video in the MediaDisplay component requires you to add ActionScript to your Flash movie to associate the display with the proper video stream:

  1. Rename the original Layer 1 as ActionScript.

  2. Paste the code below into the ActionScript layer. The video stream you're using in this article is provided by an XML file. The FVSS changes where the file is located depending on server traffic and load, so your video is always presented rapidly and at the highest possible quality. This code retrieves XML data from the server, pulls a video stream URL out of the XML data, and provides the URL to the component for video playback:

    videoLink = "http://videoLink";
 var vs_xml:XML = new XML();
vs_xml["media"] = this;
vs_xml.onLoad = function(success:Boolean) {
   if (success) {
      var appURL:String = this.firstChild.firstChild.nextSibling.firstChild.nodeValue;
      var streamName:String = this.firstChild.firstChild.firstChild.nodeValue;
      videoDisplay.setMedia(appURL+"/"+streamName, "FLV");
   } else {
      trace("Error!");
   }
};
vs_xml.load(videoLink);

  3. Change the videoLink variable to the direct URL provided by your Flash streaming service provider. To access the sample video stream used by this article paste the following link (including the quotes):

    "http://flash.vitalstream.com/flashgen.cgi?sname=go_away_spray.flv&aname=fvss_vitalstream_com/_definst_"
  4. Test the movie. The video appears in the MediaDisplay component.
  5. Publish the file in Flash Player 6 format so that the base ad can load the movie.

Adding the Movie to the Flash Ad

The Flash Ad Kit templates automate the loading of external movies from associated ad servers. In this article the Flash ad loads the video movie into an empty movie clip and displays the video. A best practice is always to load external movies into movie clips in Flash; it is not a good practice to load movies into levels:

  1. Select Frame 18 of the Video MC layer and drag an instance of the mc-emptyMC movie clip from the library onto the Stage. The instance should only exist on the frames in the main Timeline where you want video.
  2. Using the Property inspector change the movie clip position to X:0 and Y:0
  3. Select the movie clip on the Stage and give it the instance name empty using the Property inspector.

In order for the video movie to load correctly within the Flash Ad Kit template movie, you need to modify specific variables in the Links and Descriptions layer:

  1. Select the first frame of the Links and Descriptions layer and open the Actions panel.
  2. The frame contains a list of Flash Ad Kit variables. Locate the variable grouping that begins with the wording "movie1."
  3. Change the movie1 variable to the filename of the video movie, in this case videoStreamLearn.swf.
  4. Change the movie1name variable to videoStream.
  5. Change the movie1desc variable to video.

  6. Change the movie1target variable to _root.empty (see Figure 6).

    Changing the movie variables in the Links and Descriptions layer

    Figure 6. Changing the movie variables in the Links and Descriptions layer

  7. In Frame 19 of the Script layer select the frame where the video needs to begin playing. The empty movie clip should be located on a layer underneath this frame.
  8. Open the Actions panel again and type _root.conduit.movie(1); to call a special Flash Ad kit function that loads the SWF designated in the movie1 variable into the movie clip designated in movie1target.

Tracking Events in the Flash Ad

The movie1name and movie1desc variables track the loading of the movie. The movie1name variable, which cannot contain any spaces, is used in ad reports. The movie1desc variable, which can contain spaces, is only a reference description for people involved with the ad serving.

Publishing a Rich Media Ad

Once you have completed the Flash ad and successfully added the video movie, use the Flash Ad Kit panel to preview the ad as it will appear on an HTML page and publish the ad in a format ready to use with DART Motif.

You create two separate files with the Flash Ad Kit. The first is an MTA file that is the project file for the ad. The MTA file contains all the ad assets, including FLAs, SWFs, GIFs, JPEGs, XML files, and any other files necessary for your ad to work properly. The second file is an MTF file, which is a compressed file containing all the ad assets in your MTA file. The ad server decompresses the MTF file and serves the ad to publishers.

In order to create an MTA file:

  1. Choose Window > Other Panels > Flash Ad Kit v1.0 to open the Flash Ad Kit panel.
  2. Select File > New, choose In-Page Flash, and click OK.

  3. Save the new file as goAwayAdLearn.mta (see Figure 7).

    The Flash Ad Kit panel awaiting linked assets

    Figure 7. The Flash Ad Kit panel awaiting linked assets

  4. In order to add the main Flash movie that makes up the ad, select the In-Page Flash folder and click the magnifying glass button. This opens the Edit Flash Asset screen, where you add the proper ad asset, in this case goAwayAdLearn.fla.
  5. Click the folder icon next to Input File to open a dialog box where you can select the main ad movie file.

  6. An alternate image needs to be selected for your Flash ad in case a web user does not have Flash installed. The Flash Ad Kit will not allow you to publish an MTF file without this information because publisher sites always require an alternate image for Flash ads. Click the folder icon next to Alt. Image and select the appropriate image, in this case staticAd.jpg (see Figure 8).

    Selecting an alternate image file

    Figure 8. Selecting an alternate image file

  7. In the Alt. Text field, type Go Away Ad!.
  8. Click OK to return to the main Flash Ad Kit screen.

Associating Video with a Child Asset

Because the main ad loads an external video movie upon user selection, you need to create a child asset in the Flash Ad Kit panel and associate the video movie with it:

  1. Click the plus symbol in the main Flash Ad Kit panel to create an empty child asset. Flash Ad Kit child assets can be other Flash movies, JPEGs, GIFs, MP3s, XML files, HTML files or text files. In this case, the child asset is the videoStreamLearn.fla movie.
  2. Select the new child asset and click the magnifying glass (another way to edit the child asset is to double-click its name).
  3. Click the folder icon and specify the location of videoStreamLearn.fla, the FLA containing the video player. It is also possible to select a SWF here but it's generally best practice to use the FLA because then the movie is re-exported each time you preview or publish the ad. In this way, any edits you make to the Flash movie are automatically included when the MTF file is created.
  4. In the Type pop-up menu, make sure Flash is selected. Flash is selected as the default, so it should be properly selected.

  5. Click OK to return to the main Flash Ad Kit panel screen (see Figure 9).

    Defining a child asset in the Flash Ad Kit panel

    Figure 9. Defining a child asset in the Flash Ad Kit panel

Previewing the Ad

The Flash Ad Kit creates a fully functional preview of the ad in any HTML document as long as the proper HTML tag is included. All you need to do is place <motif></motif> tags within the body of the HTML document. A simple HTML page called goAway.htm has been created with the <motif></motif> tags already placed in the body of the HTML page. You can add the tags to any HTML document to preview proper ad placement and functionality:

  1. Select File > Preview on the Flash Ad Kit main screen.

  2. A dialog box appears requesting the location of the HTML document for previewing. Click the folder icon and locate goAway.htm (see Figure 10).

    Choosing a preview HTML page for the ad

    Figure 10. Choosing a preview HTML page for the ad

  3. Click the Preview button. You may see a dialog box that says that a new preview file is available for download. Go ahead and do this. Macromedia and DoubleClick update the preview file at various times to add functionality to the Flash Ad Kit.
  4. The ad with working video opens in a separate browser window. The ad preview with full functionality works best in Internet Explorer.
  5. The preview also creates a folder called goAwayAd_preview containing the HTML document, the ad SWFs, and associated JPEG or GIF images. Put this folder up on your server to show the ad to clients and get their approval.

Note: The preview file from DoubleClick contains JavaScript and XML in an HTML page to display the ad. The preview file is placed in a Preview folder where the MTA file is located. Proper preview in Windows requires Internet Explorer 5.5 or later. Mac OS users should have Internet Explorer 5 or later. For more information, read the Flash Ad Kit Release Notes.

Once you preview the ad and make sure it functions properly, package the ad into an MTF file for use on the DART Motif ad servers. The MTF file is a compressed ZIP file with all of the associated ad assets (SWFs, child SWFs, JPEGs, GIFs, XML, and so on). Using Preview creates an MTF file. If you haven't used Preview to review your ad, you can also create an MTF file by choosing File > Package MTF in the Flash Ad Kit panel.

After upload the MTF file, the DART Motif ad server uncompresses the MTF file and makes the Motif ad fully functional. Your ad is now ready to be sent to publishers' sites to be viewed by consumers.

Where to Go from Here

Using the Flash Ad Kit and media components makes it easy and efficient to create rich interactive ads with high-impact video. Advertisers benefit from the ability to gain a wide range of useful analytic detail on the effectiveness of their ads, and viewers receive a better marketing message. Designers and developers gain ease of use from the Flash Ad Kit, gaining more time to spend on the look and feel of the ad rather than on repetitive programming tasks.

About the authors

Glenn Thomas runs Producing Future, an interactive design and development consultancy developing projects for both advertising and corporate clients. He trains interactive agencies on the Flash Ad Kit and DoubleClick DART Motif. Previously he cofounded Smashing Ideas, where he developed a range of award-winning projects.
Brad Henderson is a designer and developer at Producing Future. He graduated from Savannah College of Art and Design where he won the SXSW Best Student Interactive Award in 2003.