Getting started with the Adobe Test&Target Extension for Flash Professional CS5

In this tutorial, you'll learn how to implement Adobe Test&Target in a simple banner ad by using the features included in the Adobe Test&Target Extension for Adobe Flash Professional CS5.

Adobe Test&Target is an online marketing tool that enables you to continually improve your online content and offer more relevant promotions to potential customers. Test&Target provides an intuitive interface for designing and executing A/B or multivariate tests, creating audience segments and targeting content. For example, Test&Target can help you test a number of versions of an interactive Flash (SWF) ad, to determine which version is the most effective at increasing visitor conversion.

As you design, develop, and deploy projects in Flash, you may find it challenging to create multiple versions of the same ad and implement Test&Target code for each iteration.

The Adobe Test&Target Extension for Flash Professional CS5 enables you to create different versions of an ad within a single SWF file. It also facilitates collaboration and communication between the marketing team and the design team, as described below.

In this section, you'll begin by setting up the development environment. Follow these steps:

1. After downloading the Adobe Test&Target extension, double-click the extension file (ZXP file) to open it with Adobe Extension Manager CS5.

Note: If you are using Windows Vista or Windows 7, you need to open Extension Manager as Administrator before opening the ZXP file. To do this, right-click the Extension Manager icon and select the option to Run as Administrator.

2. In the Extension Manager window that appears, click Accept to agree to the terms of the End User License Agreement.
3. After successfully installing the extension, close the Extension Manager window.

After installing the extension, follow these steps to access the panel and sign in to your Test&Target account:

1. Open Flash Professional CS5.
2. Access the Adobe Test&Target panel by choosing Window > Extensions. After opening the panel, a message indicates that no document is open at this time (see Figure 1).

3. Open an ActionScript 2 or ActionScript 3 document. The Test&Target panel updates to display a login screen. Before you can begin using the Test&Target features on your ad, you must use your Test&Target account to log in (see Figure 2).

To get a better understanding of the Test&Target extension and the included features, be sure to download the sample files provided at the beginning of this tutorial. Uncompress the ZIP file, double-click the FLA file named jjesquire_small.fla to open it in Flash Professional CS5 and sign in to your Test&Target account.

After signing in, the Test&Target panel enables you to create a new campaign as described in the next section.

For the purposes of this sample project, you'll use the Adobe Test&Target extension to enable visitor targeting in a simple ad for a (live) demo website, JJEsquire.com. The banner ad will include two different versions: Spring collection and Fall collection. In order to enable visitor targeting, it's important to understand some Test&Target concepts, such as campaigns, flashboxes, and experiences.

The descriptions of these concepts are provided below:

• A campaign is a means of controlling online content in order to display different ads to different segments of potential customers. The Test&Target extension includes the options to create a new Flash Professional Landing Page Campaign or to use an existing campaign of this type.
• A flashbox is the Flash equivalent of an HTML mbox. While an mbox or "marketing box" is a portion of a web page that can be set to show specific contents in certain situations, a flashbox is an entire SWF file that enables multiple values for each element that it contains. Both mboxes and flashboxes can track and log visitor behavior on your site.

In this tutorial, you'll create a campaign from scratch. Follow these steps:

1. In the Campaign screen, click the Create a new Campaign button (see Figure 3).

2. In the screen that appears, enter a campaign name and a flashbox name in the provided fields. The campaign name will appear in the Test&Target interface and will be used when running reports. The flashbox name serves as an identifier of the Flash ad in the Test&Target system. It is a best practice to name the flashbox descriptively to indicate the name of the campaign, as shown below (see Figure 4).
3. Click Create.

This operation creates a new campaign and flashbox on the Test&Target server.

The Test&Target panel updates to display the Experiences screen. Experiences are different versions of an entire ad series. Site visitors will see a certain experience depending on the testing or targeting rules set up in the campaign. For example, you can target the Spring collection to visitors from countries in the Southern hemisphere, and the Fall collection to visitors from the Northern hemisphere. To achieve this, you'll need to create two experiences. Follow these steps:

1. Click the plus (+) icon on the right side to create the first experience.
2. In the field that appears, enter the experience name: Fall.
3. Press Enter (Windows) or Return (Mac).
4. Click the plus (+) icon again, and enter the name of the second experience: Spring.

At this point, the Experiences screen displays the two experiences, Fall and Spring (see Figure 5).

Notice that after creating your first experience, the default label automatically appears next to its name. This indicates that this experience will be displayed in the unlikely event that Test&Target servers don't respond, or to site visitors who don't fall into either of the target groups. (There may be situations when the marketing team chooses to target only a subset of the site visitors as part of the campaign.)

Now that you have defined the two experiences, you can start defining the rules that differ between them. For example, you can set the Fall experience's tagline to FALL PREVIEW and the Spring experience's tagline to SPRING PREVIEW, as shown below:

1. Select the tagline text on the Stage.
2. Click the Include button at the bottom of the Test&Target panel, to set this text as part of the experiences.
3. In the Element Name field, enter a name for this element. For this example, enter: text (see Figure 6).
4. Click OK.

This operation generates a Test&Target movie clip that contains the dynamic text element. It's important to note that this step adds the text element to both first and second experience. You can see this by selecting the second (Spring) experience (See Figure 7).

While both experiences are expanded, you'll see the newly created Test&Target text element's name and value displayed. Switch between experiences to notice that no changes occur to the ad on the Stage. To change the content of the tagline for each experience, follow these steps:

1. Select the second experience (Spring) and edit the text Test&Target symbol by double-clicking it on the Stage.
2. Use the Text tool to type the words SPRING PREVIEW in the dynamic text field (see Figure 8).

3. In the Test&Target panel, switch between experiences to see the ad tagline change on the Stage as you toggle between them.

You may also want to vary the text color between experiences, such as setting the Spring experience's tagline to green text, while keeping the Fall tagline white:

1. Select the second experience (Spring) in the Test&Target panel, and then select the text on the Stage.
2. In the Property inspector, use the color chip to set the text to green (see Figure 9).

At any time throughout the editing process you can review how the ad appears to your experiences. Click the Preview icon next to each experience name to review it.

Begin by clicking the Play button to preview the Fall experience, and then preview the Spring experience in the new window that appears. This enables you to clearly see the text value and color changes between each experience. You can also see the difference on the Stage in the Flash authoring environment, when you flip between the two experiences in the Test&Target panel (see Figure 10).

Of course, you are not limited to changing the color and content text properties when setting the different text elements of each experience. You can also change text size and text location.

Note: Remember to embed the fonts you are using in the ad. Use the Property inspector to select the font you want to use, and then click the Embed button. Be sure to enable the option to Export for ActionScript in the ActionScript tab.

At this point, you have a basic banner ad that is Test&Target-enabled. The campaign contains two different experiences that control how the tagline text appears. You can synchronize your newly created campaign to the Test&Target servers, so that the marketing team can review it.

Save your ad and click the Sync button in the bottom left corner of the panel (see Figure 11).

The synchronization between the Flash Professional panel and Test&Target performs several operations:

• Generates the necessary ActionScript code for Test&Target instrumentation; this adds a new layer to your Flash file named TnTAS_Layer.
• Creates a campaign in the Test&Target system with the campaign name, experience information, and flashbox data.
• Uploads the compiled Flash file (SWF file) to the Test&Target servers, to allow the marketing team to preview it from within the interface.

Note: Please remember that it is still necessary to deploy the final Flash SWF file to its final destination. Also, if the SWF file exceeds 100 KB in size, it cannot be uploaded to the Test&Target servers and a warning message is displayed in the panel. If the SWF file exceeds the 100 KB limit, Test&Target features will continue to work as expected, except for the preview feature, which is disabled for large files.

After synchronization is complete, visit the Test&Target web interface to check that all the information was properly uploaded:

1. In the search field above the Campaign List, type the first few characters of the campaign you created until the name of the campaign appears in the list (see Figure 12).

2. Select the campaign you want to edit in the list of campaigns. The editing interface appears. Use the provided fields to edit the properties (see Figure 13).

• You'll notice that each experience contains an element called text that has editable fields for value, color, font size, width, height and position. This information has been sent from the Test&Target panel in Flash Professional during the synchronization process.
• The marketing department can log in and tweak all the text properties mentioned above. After making changes, they can preview the ad to see how it looks. For example, try changing the text from FALL PREVIEW and SPRING PREVIEW to Fall Preview and Spring Preview. After making these changes, preview both experiences to see that the changes are applied. Save the campaign without approving it.
• The JJ.Esquire campaign contains two different versions of the same ad. The one in Flash Professional has text using only uppercase characters, whereas the one in the Test&Target interface uses lowercase and uppercase characters. If you return to the Test&Target panel in Flash Professional and click the Sync button again, a warning message will inform you of this difference (see Figure 14).

• The extension detects that the content has been modified in the Test&Target web interface. The dialog box prompts you to update the panel with the latest version of the ad from the Test&Target system, or to overwrite the information in the Test&Target system with the version of the ad you are seeing locally in Flash Professional.
• For this example, click the Update panel button. If you switch between experiences, you will see that the tagline text is now set to Fall Preview and Spring Preview, as it was modified in the web interface (see Figure 15).

• This update feature enables seamless collaboration between creative and marketing departments. It allows each team to see if someone else has made any changes to the campaign. Additionally, changes can only be applied to campaigns that have not yet been approved to go live.

In this section, you'll learn how to control the appearance of other elements in the ad, including animations (movie clips) and images (PNG, JPEG, and GIF files).

Incorporating embedded images

Dynamic text is not the only type of element that can be included as part of a Test&Target experience. For example, you can display different fashion models for the Spring and Fall experiences. Follow these steps:

1. Select the embedded bitmap from the movie clip.

Note: Make sure the actual bitmap is selected, not the movie clip that contains it.

2. Click the Include button from the Test&Target panel again.
3. The Set Element Name dialog box appears, prompting you to enter the element name. A check box option is provided that, when enabled, automatically generates Test&Target keyframes. Enter a descriptive name for the element, such as image, to make it easy to recognize in the Test&Target web interface. Leave the default setting (enabled) for the generate keyframes option (see Figure 16).

4. Click OK.

Because the option to generate keyframes was selected, the Test&Target extension will generate two keyframes with the following contents:

• The first keyframe (Frame 1) contains a label that corresponds to the name of the experience; it has a default length of 15 frames.
• The second keyframe (Frame 15) has only one frame containing a stop(); ActionScript statement.
• If the Test&Target keyframes are generated automatically, one set will be created for each experience, using names that correspond to each experience name. The image is converted into a Test&Target movie clip, which will play from the corresponding Test&Target keyframe for each experience, as shown in Figure 17.

• Test&Target keyframes can also be created manually, but I will present how this works in an upcoming section.

After including the embedded image in the flashbox, the generated Test&Target movie clip contains two layers:

• The TnT_Labels layer contains frame labels that are used to associate each keyframe with a Test&Target experience. For instance, the Spring experience will jump to the keyframe labeled Test&Target Keyframe_2.
• The TnT_Layer layer contains the actual content (project elements) that are displayed for each experience. This layer includes the keyframes that define each unique experience.
• Double-click the Test&Target movie clip to invoke the symbol editing mode. Select the embedded bitmap image to view the layers and frames generated by the Test&Target feature (see Figure 18).

Changing the image to display in the second experience (Spring) is easy. Follow these steps:

1. Select one of the frames in the TnT_Layer from the second Test&Target keyframe.
2. Right-click the bitmap image on the Stage, and choose the Swap bitmap option from the context menu that appears.
3. Use the dialog box to select a different bitmap. For this example, browse to select the file named spring_model.jpg in the sample files folder.

• To verify that the image has changed for each individual experience, preview both experiences. In addition to a different tagline, the Fall experience displays one image (the original, default image) and the Spring experience displays another image, the one that you just set.
• In the Test&Target panel, you will notice that each experience now contains a new element: the image you have included. The Keyframe menu in the panel indicates the Test&Target keyframe the current experience uses to display its content. You can change this by selecting another keyframe from the menu. You can think of this process as moving the record player needle to a different track on an old vinyl turntable to play a different song.
• To see how this image information is presented in the Test&Target system, click the Sync button again to publish your work and then access the campaign in the Test&Target web interface (see Figure 19).

• The image element appears in the list. The marketing department can change the keyframe setting for each experience, by selecting another keyframe from the list. This is a useful strategy in situations when you want to create additional experiences online, without editing the banner ad in Flash Professional. For example, you can reuse the spring fashion model image as part of a third experience, in order to test a new version of the tagline text.

Working with animations

In many cases, the banner ad may incorporate animation effects. The marketing team may want to test how site visitors react to different animations. In this section, you'll learn how to make the fashion model image slide in from the left side for the Fall experience, and slide in from the top for the Spring experience.

To accomplish this, you'll need to include the movie clip that handles the animation in the campaign's flashbox. This process is similar to the instructions you followed when embedding the bitmap. Follow these steps:

1. Select the movie clip symbol that contains the image on the Stage.
2. Click the Include button in the Test&Target panel.
3. This time, do not automatically generate the Test&Target keyframes. In the Set Element Name dialog box, set the element name to movie, and deselect the check box next to the Generate Test&Target keyframes automatically option (see Figure 20).

The movie element (movie clip) is now included in the flashbox, which means you can start creating variations of the movie element for each experience. You will see the movie element listed in the Test&Target panel for each experience. As you expand each experience, it will contain three elements:

• text: the dynamic text for the tagline
• image: the image data for each of the fashion models
• movie: the movie clip containing the animation effects

Take a moment to look through the expanded experiences and verify that all three elements are listed for each experience (see Figure 21).

To create the slide in animation, follow these steps:

1. Double-click Test&Target movie clip to enter the editing mode for the symbol.
2. Double-click the symbol inside the movie clip, to edit the image.
3. In the Timeline, add 15 frames by selecting Frame 15 and pressing F6.
4. Select the first keyframe. Drag the image of the fashion model outside the Stage, towards the left side of the screen.
5. Select the second keyframe and check that the image is in the desired position.

Right-click the Timeline between the two keyframes and select the option to Create Classic Tween. Scrub the Timeline (or press Enter or Return) to see that the image now appears from the left side with a slide-in effect, as shown in Figure 22.

If you are unfamiliar with creating motion tween animations in Flash, refer to the Creating motion tween animations section of the Flash Professional CS5 online help.

6. Select Frame 15. Open the Actions panel by choosing Window > Actions. In the Script window of the Actions panel, add a Stop command by typing the following line of code:

This single line prevents the animation from looping and playing over and over again. Close the Actions panel and you'll notice that the keyframe on Frame 15 contains a lowercase a character, which indicates that the frame contains ActionScript.

7. Click the movie link above the Stage to jump up a level in symbol editing mode and return to the main Timeline of the movie clip.

For clarity, it's a best practice to change the label names of the Test&Target keyframes, to make it easier to make selections in the Test&Target web interface. Select Frame 1 of the Tnt_Labels layer to select the frame label. In the Property inspector, change the name of the Test&Target Keyframe_1 to: Horizontal Tween. Select Frame 16 of the same layer and change the other frame label to: Vertical Tween.

If you click the Play button and preview the Fall and Spring experiences now, you will see that both experiences use the same animation effect, although they display different images. This occurs because both experiences point to the keyframe labeled Horizontal Tween (Frame 1) in the Timeline, which contains the animation effect that slides in from the left.

To animate the fashion model image to slide in from the top of the Stage in the second experience, you'll need to update the tween. Follow these steps:

1. Double-click the Test&Target movie clip named movie to enter symbol editing mode again.
2. Select Frame 1 of the TnT_Labels layer. Press and hold the Shift key. Click Frame 15 of the TnT_Layer layer. The first 15 frames of both the Tnt_Labels and TnT_Layer layers are highlighted. Right-click and choose the option to Copy Frames from the context menu that appears.
3. Select Frame 16 of the TnT_Labels layer. Press and hold the Shift key. Click Frame 16 of the TnT_Layer layer, so that Frame 16 is selected for both layers.
4. Right-click on Frame 16 and choose the option to Paste frames in the menu. At this point, you've copied the animation and the frame label onto the same layers, to create two similar Test&Target movie clips (see Figure 23).

5. Select Frame 16 of the TnT_Labels layer. Use the Property inspector to rename the second Test&Target keyframe on Frame 16 to Vertical Tween.
6. Select Frame 16 of the TnT_Layer layer. Use the Property inspector to swap the existing Fall image symbol with the symbol containing Spring image women2.
7. Double-click the Spring image symbol on the Stage, to enter symbol editing mode. You'll repeat the animation process you used when creating the first animation. Select Frame 15 and press F6 to add 15 frames. Select Frame 1 and move the fashion model image up and completely out of the visible area. Right-click the Timeline between Frame 1 and Frame 15 and choose the option: Create Classic Tween in the menu that appears. Scrub the Timeline (or press Enter or Return) to see that the image now appears from the top side with a slide-in effect.
8. Select Frame 15. Press F9 to open the Actions panel. In the Script window, type in a Stop command, like this:

9. Close the Actions panel and notice that a lowercase a character is added to Frame 15 where the motion tween ends (see Figure 24).

Set the animation elements in the two experiences

Now that you've created the two animations for the ad, follow these steps to set each experience to use a different slide in animation:

1. In the Test&Target panel, make sure that Horizontal Tween is selected for the first experience (Fall) in the Keyframe menu for the movie element.
2. In the second experience (Spring) use the Keyframe menu for the movie element and select the Vertical Tween keyframe.
3. Click the Play button to preview each of the experiences. In the Fall experience, the image slides in from the left. In the Spring experience, the image slides in from the top.
4. Click the Sync button to synchronize the Flash campaign with the Test&Target server.

Testing different landing pages

In addition to serving different ad content to different groups of visitors, you can route click-throughs to different landing pages, depending on which experience they have seen. This enables the marketing team to test the efficiency of different landing pages included in a campaign.

The URLs of the landing pages can be set either on the entire experience or on specific elements of the experience. If a landing page is set for each experience, visitors are redirected to that landing page, no matter where they click on the ad. If a landing page is set per element, visitors are redirected to a particular landing page only if they click a specific element.

Note: If you enable landing page testing for both individual elements and the entire experience, the experience's landing page URL will override any individual elements' landing page URL.

To enable landing page testing or targeting for your campaign, follow these steps:

1. In the Test&Target panel, select the first experience (Fall). Notice that a link icon appears next to the experience name.
2. Click the link icon. A Link field and a Target field appear.
3. Enter the desired URL in the Link field and select a target (if different from _self) in the Target menu for the selected experience. After pressing Enter (Windows) or Return (Mac), the landing page is enabled. All experiences will be pre-populated with these two landing page properties. You can now customize the landing page URLs for each experience (see Figure 25).

You can use the landing page feature to redirect visitors to different web pages from this site:

• When customers see the Fall experience and click on the banner ad, they will be redirected to the Jewelry and Accessories section. Use this URL for testing purposes: http://search.jjesquire.com/q1/Jewelry%2520%2526%2520Accessories/x1/leveli/view/nav_enus/top/1/
• When customers see the Spring experience and click on the banner ad, they will be redirected to the Beauty and Fragrance section. Use this URL for testing purposes: http://search.jjesquire.com/q1/Beauty%2520%2526%2520Fragrance/x1/leveli/view/nav_enus/top/1/

To set up different landing pages, simply enter the desired URL in the Link field and select a target from Target menu (see Figure 26). If the target is set to _self, the link loads in the same browser window; if set to _blank, the link loads in a new browser window.

Preview each experience again and click on the SWF to test the landing page behavior. When you preview the first experience (Fall) you're redirected to the Jewelry and Accessories page. When you preview the second experience (Spring) you're redirected to the Beauty and Fragrance landing page.

To see how this data appears in the Test&Target system, save and synchronize the banner ad project. Log in and edit the same campaign in the Test&Target web interface. Two new properties are now displayed for each experience:

• Landing page URL data is listed as landingPageURL
• Target data is listed as landingPageTarget

Using the interface, the marketing team can easily change the URL to point to a different landing page (see Figure 27).

In this article, you've learned how easy it is to implement an Adobe Test&Target marketing campaign without creating multiple Flash assets for different versions of your ad. To learn more about working with the Test&Target Extension for Flash, see the following resources:

• Adobe Test&Target Extension for Flash Professional online documentation
• Omniture Testing and Targeting blog (tips, tricks, and updates about releases)