Displaying ads in your mobile AIR application
I’ve seen a few Tweets from people who were asking about adding ads to their mobile AIR applications… Well… There’s actually a hidden gem in the AIR documentation… But… As most of you probably never read any docs ;-) I thought I’d highlight it here.
The trick is simple… Use the StageWebView class. You set the StageWebView object viewport to cover the area in your application in which you want to display the ad. Then you load an HTML page that contains the code for requesting and displaying ads. And tadaaaa… You have ads in your mobile AIR application.
Here’s an example of an HTML page that loads an ad from AdMob.
<html>
<head>
<title>Ad jig</title>
<script type="text/javascript">
var admob_vars = {
pubid: 'admob_pubID', // change to your publisher id
bgcolor: 'ffffff', // background color (hex)
text: '000000', // font-color (hex)
test: true, // test mode, set to false if non-test mode
manual_mode: true
};
function showAd()
{
_admob.fetchAd(document.getElementById('adspace'));
}
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body onload="showAd()">
<div id="adspace"></div>
</body>
</html>
The following ActionScript code will display the ad page in your mobile AIR application.
//Set up web view object
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
var adViewPort = new Rectangle( 0, 0, this.stage.stageWidth, 60 );
webView.viewPort = adViewPort;
webView.addEventListener(ErrorEvent.ERROR, onWebViewError );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onWebViewLocChanging );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onWebViewLocChange );
//Copy the html file outside the app directory
var templateFile:File = File.applicationDirectory.resolvePath( "adview.html" );
var workingFile:File = File.createTempFile();
templateFile.copyTo( workingFile, true );
try
{
webView.loadURL( workingFile.url );
}
catch (e:Error)
{
trace( e );
}
function onWebViewLocChange( event:LocationChangeEvent ):void
{
trace( "Change to" + event.location );
if( event.location != workingFile.url )
{
//Reset location back to our ad display page
navigateToURL( new URLRequest( event.location ) );
try
{
webView.loadURL( workingFile.url );
}
catch (e:Error)
{
trace( e );
}
}
}
function onWebViewLocChanging( event:LocationChangeEvent ):void
{
trace( "Changing " + event.location );
event.preventDefault();
navigateToURL( new URLRequest( event.location ) );
}
function onWebViewError( error:ErrorEvent ):void
{
trace( error );
}
But what if you want to use the mobile Flex framework? Well… Sönke Rohde actually wrote a wrapper around the StageWebView class so you can use it as a Flex component. By using this wrapper it becomes as easy as adding this one line of code to your app.
<components:WebView source="adview.html" width="300" height="50"/>
Note: This approach will most likely also work with other ad networks. Also not that this only works on mobile AIR applications. The example does not work in desktop applications, or when testing mobile applications on the desktop, due to local-versus-remote sandbox restrictions.
Kudos to Adobe’s learning resources team for putting this example together and to Sönke for creating the StageWebView UIComponent.
Now go make some money ;-)
Upcoming events: Meet the PlayBook, CS5.5 Evolution Tour, Multi Mania, Webinale
Traditionally May and June seem to be the busiest months of the year and it’s no different this year.
Later today I’m taking the Eurostar to London and will join the CS5.5 Evolution Tour crew for the CS5.5 event in London. There’s still some room left if you want to join us but you may want to register right now as I’m sure we will be closing registration soon. I’ll also be joining the CS5.5 Evolution Tour in Amsterdam next week. If you’re an Adobe UserGroup member you can even sign up for a special device update and may even go home with a brand new device. The day after the CS5.5 Evolution Tour stops in Amsterdam you can find us in Kortrijk for Multi Mania. This will be my 7th consecutive year at Multi Mania… Time flies… Registration for Multi Mania is still open so get your free tickets now!
If you happen to be in Amsterdam next Thursday you may want to check out the Meet The PlayBook event. It’s a great opportunity to get to know the power of the BlackBerry PlayBook and learn how you can build apps for it using Flash Builder 4.5. Sadly I won’t be able to make it to this event myself (I’m doing a guest lecture at the University of Ghent) but my colleague Piotr will show you all the good stuff.
Later this month I’ll also be speaking at Webinale in Berlin. I’ve never been to Webinale but I only heard good things about it so I’m really looking forward to it.
Hope to see you at one of these events!
What’s your favorite Flash Builder 4.5 feature?
In case you haven’t heard… Creative Suite 5.5 and Flash Builder 4.5 are now available for purchase and trial versions are also available. There are lots of new features in both Creative Suite 5.5 and Flash Builder 4.5… But what’s your favorite new feature? Record a quick video, submit it to YouTube, tag it with FB45FAVORITE and add the widget to your site and/or social network pages. Don’t forget to vote for your favorite feature!
Feel free to follow me on: 
