Rich Media Ads

In this article you'll learn about the power of rich media ads over standard Flash ads, what you can do creatively with rich media ads, and how to leverage what you already know about designing and developing with Adobe Flash and Adobe Flex for visually creative, interactive ends.

Whether you're a Flash designer, a Flash or Flex developer, or a hybrid of both, if you work at a creative agency or do similar work as a freelancer, you know that sooner or later you'll get that dreaded call from your client: "You know that microsite you're building for us? Well, we also need you to create Flash banners for the ad campaign."

After all your hard work designing the best microsite to accomplish the goals of your client's marketing or ad campaign, and have it look amazing for their customers, you get to design standard Flash banners in one of three boring flavors of boxes—728 × 90, 300 × 250, or 160 × 600—leaving no room for your cool microsite's features to shine through.

It's not all doom and gloom, though. In fact, it gets much, much better. Let me introduce you to the solution: online rich media advertising.

Rich media ads are the ones that expand, perhaps take over the web page for a bit, letting you explore it without leaving the page—the ones that give you more creative freedom. Because let's face it, what you're trying to do is engage people with your creative, right? Standard Flash banners have practically no shot of doing that when all you've got is a small box and 30 KB to deal with. Designing for standard Flash banners is usually less than inspiring.

One of the questions we get asked the most at PointRoll is, "So what can you do in a rich media ad?" Well, let me ask you something first: What can you create with Flash or Flex? Because that's what you can do with rich media.

Literally, almost anything you would put on the microsite you've been building for your client can be ported into a rich media ad. This is also a great venue to showcase features that didn't get approved to go onto the microsite—the ones you thought were awesome, interactive, and engaging, and should have made it. Not to mention, more screen real estate and more size in kilobytes are allowed in a rich media ad than with a standard Flash ad, so you can use more enticing visual and interactive elements to engage your audience. Rich media is a far more flexible platform, so no matter how you develop it, it'll work within the ad. You can leverage OOP to keep the creative scalable, use timeline-based animations, incorporate XML and databases, access web services, and more.

What can you do in a rich media ad? Here's my patented Rich Media Capability Crib Sheet:

• Use higher-quality images
• Stream multiple videos in standard or HD format
• Record your own video with a webcam and send to your friend's e-mail or smartphone
• Log into Twitter, follow a brand, and tweet about it from the ad
• Post images and video to Facebook
• Collect information about the user and send it to a database
• Play a 3D multiplayer game using Papervision and Adobe Flash Media Interactive Server

All these and much, much more can be done in a rich media ad.

Now I know this is starting to sound like an advertisement for rich media itself, but I sometimes feel that rich media is the "underground" component in an advertising campaign compared to standard Flash banners, and so I need to shout it out. I work with rich media every day, so my view is slightly slanted, but let me tell you: it works. More and more of our clients know it works when they see results with each successful campaign. As a bonus for us designers and developers, rich media ads are a lot more fun to work on, too. At PointRoll, we easily handle over 100,000 Flash files each year to build rich media ads. Indeed, Flash designers and developers the world over are constantly doing amazing, innovative, and creative things every day just for online rich media advertising. Want proof? Here's a case in point.

The 2010 Mustang Customizer ad

We recently ran a campaign for Ford Motor Company that was built with Flex Builder 3 and used over 1,000 external ActionScript files. It was a beast of a project, with beautiful results, originally built as a microsite: the2010Mustang.com. We then worked with Ford and the ad agency Team Detroit to port the 2010 Mustang Customizer (see Figure 1) into a 728 × 90 banner (see Figure 2) that expands to a 728 × 270 panel (see Figure 3) upon rollover.

Users begin to customize their 2010 Mustang in the ad—choosing colors (even saving custom color combinations), changing wheels, and adding decals, smoke, and grille styles. As a draw to help drive users to the microsite, many of the features are "locked" in the ad, giving users the option to continue building their Mustang on the microsite. That's right: you start customizing in the ad and then all of your customized Mustang options are brought over from the rich media ad into the website, where you can really go to town on it.

The campaign was a huge success for Ford. The client was happy with high engagement metrics, the development team was happy that they got to build something super-cool, and most importantly, users were happy they had something fun to do instead of watching a 15-second animation loop.

So how'd they do that? Good question. All assets are brought into the ad via URL paths specified in an XML file. The user's choices are stored in an Object and then finally brought over to the microsite as a query string, passing in every selection value as a flashvar via swfobject on the microsite's page. Each animation transition (such as when you change the wheels and see it appear on the Mustang) is class-based for easy reuse.

Exploring the sample ad

The sample file RM_Ad_Example.fla is really simplified because of the enormous scale of the actual project, so showing one class file without showing the many supporting classes wouldn't help much here (besides, I can't reveal the agency's source code). Even so, this sample file should give you a good sense of what's happening, even with this basic look. Figure 4 shows the SWF that plays the role of the ad.

Figure 4. Interactive sample ad (make your selections and click the Click Thru button)

Make some selections in the combo boxes and then click the Click Thru button. The web page you're brought to acts as the microsite. The URL of the microsite in this example is defined in the config.xml file and assigned to _link in RM_Ad_Example.fla. Note that any external asset can be referenced in the XML and utilized in the ad this way.

Here's a look at the code:

Here's a breakdown of the code:

1. Create variables to load in the XML file, store the XML, store the microsite link, and store the selections the user makes.
2. Add an event listener to xmlURLLoader to listen for the completion of the file loading with Event.COMPLETE.
3. Add an event listener to the clickThru_btn (on the Stage) with MouseEvent.CLICK.
4. Add event listeners to the three combo box components (on the Stage) for Event.CHANGE.
5. Set default values to the each property (color, wheels, and decal) to _currentparts (the URLVariables object).
6. Load in an external XML file and, on the completion of its load, grab the path to the microsite page from it.
7. Store the microsite path in a variable called _link.
8. Each time the user makes a new selection and Event.CHANGE fires, update the values of _currentparts with the current selections from each combo box.
9. When the user clicks the "Click Thru" button, make a new URLRequest object called _fullLinkRequest, passing in _link as the required string. Set _currentparts as the data property of _fullLinkRequest. Finally, go to the microsite page using the full query string: navigateToURL(_fullLinkRequest).

As I said, this is a really stripped-down code example that just scratches the surface of what's possible. But it shows one way you can incorporate external elements into your rich media creative and pass information along to continue the interactive experience where the user left off in the ad. Try doing that with a standard Flash ad.

As a Flash or Flex professional, you have the power to create (almost) anything you want in an ad—and, just as important, whatever your client wants. I know that most of the time, it's not your call to say, "Look, there's this awesome way we could really show off your brand and engage the user... with rich media ads." Very often it's the client or the media agency you're working with that may nix your rich media ideas based on budget limitations or lack of education on the subject. What I'm trying to do is empower you with the knowledge of what you can do with rich media once you get the green light. If you want to fight to use it in an upcoming campaign, that's even better.

You need some ammunition for when the client asks about their ROI with rich media advertising. It's all about results for them. To get results, they need targeted ads, and to measure results they need the most (and best) metrics available. Of the over 150 measurable elements and targeting possibilities, here's a list of some of the most compelling ones:

• Interaction rate: How many users actually roll over the ad to watch that movie trailer or learn more about that product? This is the percentage of users engaging with the banner to view additional content in an expanded state.
• Specific user activity: Want to see specifically which products the user views the most in the ad experience? No problem. Want to find out if the user likes to play one game over another in the ad? Sure! Track any interaction you need.
• Video performance: How much of the brand's video does the user actually watch? See the percentage of the video viewed and any actions the user performs on the video, such as pause, mute, or replay.
• Brand interaction time: How many seconds does the user "play" in the ad? That's some serious one-on-one face-time with the brand. A rich media ad can tell you about that. This metric has become just as valuable, if not more, than click-through rate.
• Click-through rate (CTR): A click-through is the action which takes the user to a designated landing page, determined by the advertiser, which is a location away from the ad. The click-through rate is the percent of users who perform this action.. Yes, they'll want it and it's covered, of course.
• Optimized creative: What if one message or image is working better than another in your campaign? Based on how the user engages with the ad, you can show the better-performing message or image more often. If it's not working, show one that does work—automatically. Maximize exposure for ads that work and minimize those that don't. That means the best bang for the brand's buck.
• Dynamic creative: You can target messaging, imagery, and video to a specific user based on demographic, publisher page, or behavioral data. In other words, one media buy can be exponentially more effective by showing the right ad to the right user at the right time. Our research shows that the more relevant an ad, the better it performs.

This list is just for the client, right? Not necessarily. It's a good idea to review the metrics of a campaign as a designer/developer to see what's working, too. Then you can apply your learning to the next campaign you get.

Where do you start when actually creating rich media ads? What are some best practices? Here are a few tips:

• Create assets specific for rich media, such as properly sized video and optimized imagery.
• Use external files like SWFs, JPEGs, and PNGs to keep your initial load size down. Publisher sites usually need the initial load of the SWF file to be low so their page loads quickly. After that, they're cool with the subloads.
• If it makes sense, try going OOP with your build to account for resizes. Creating dynamic positioning and sizing of all your ads based on an argument value could speed up production. Be careful not to cross that line into over-developing for a simple creative execution.
• Sometimes good old timeline animation is perfectly fine. There's nothing wrong with the K.I.S.S. approach (Keep It Simple, Stupid) when appropriate.
• Just as when you build larger applications, make sure all involved parties are aware of additional technological implementations like databases or servers outside the ad server's domain (in other words, make sure to get cross-domain files to your ad server or publisher).
• Just because you can put in the kitchen sink doesn't mean you should. You're a smart designer, so use your best judgment and advise your client on what's too much. Also consult with your rich media ad-serving partner.

Making your rich media ads count

Designers and developers have one shot to get the user to actually look at the ad instead of reading the article or watching the video they came to see. As we say at PointRoll, when was the last time you went online to look at ads? The challenge is making an impression on the user right off the bat. But you can win users over with the right ad served to the right user at the right time that is fun, interactive, and—that's right—engaging. You have the tools to do it with Flash and Flex, along with any other technology you want to bring into the picture.

Rich media is a powerful tool in online advertising, one that your clients shouldn't be afraid to use. It gives you the opportunity to create effective, engaging, and measurable ads for your clients, and have fun doing it. I say, "Think outside the banner." There's no reason to limit your design and development creativity by sticking ads in a standard ad "box."

If you ever need help making the case for rich media, hit me up.

Where to go from here

Check out more great examples of rich media advertising in the PointRoll Creative Showcase.