Displaying ads in your mobile AIR application

Posted by on May 17, 2011 in AIR, android | 5 comments

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

Android activations visualized

Posted by on Feb 24, 2011 in android, devices | 1 comment

We all know that the device market is changing rapidly. We also know that Android is rapidly gaining market share but this video is still pretty amazing to see. It visualizes Android device activations from October 2008 until now.

(Hat tip AndroidCentral)

Lapse It – time-lapse video app made with AIR for Android

Posted by on Jan 27, 2011 in AIR, android | Comments Off

I just came across this very nicely made time-lapse video application in the Android Market. Lapse It is built with Flex 4.5 and runs on the AIR runtime. You can set the capture interval to anything from 1 second to as long as you like. You can also limit the length of your capture by limiting the amount of frames, by setting a time or you can stop it manually. Lapse It will capture frames with a resolution up to 720p (It’s actually not 720p but 720×480) (the free version is limited to 240×160) and the final result can be either a JPEG sequence or an FLV video. The app also has a built-in video player so you can immediately see the result and will even allow you to directly upload it to YouTube.

I was going to record the sunrise this morning… But then I remembered that I actually live in Belgium and that we are in the middle of the winter… ;-) The chances for sun are very slim and this morning it was too cloudy to record anything useful. I love time-lapse video so you can bet on the fact that I will be using this app whenever I can!

Go check it out!

UPDATE: I just did a quick little test with Lapse It and I absolutely love the result!

Got AIR for Android? Try these games!

Posted by on Oct 8, 2010 in AIR, android | 8 comments

I saw some comments from people installing AIR on their Android device who couldn’t find any apps for it. I think that’s just the beauty of it all. An AIR application behaves exactly the same way as any other application in the Android Market, so while there are already a few AIR apps in the market, they’re not explicitly identified as AIR applications. But I understand that you all want to test the performance and experience, and you want to know which apps run on AIR. So here’s a few AIR-based games that are currently available in the Android Market for you to try out.

I’ve also created an AIR for Android Applications list on AppBrain (UPDATE: AppBrain now has a list of all AIR applications on the Android Market: http://www.appbrain.com/apps/adobe-air) and will keep that up to date with new apps I find or hear about. If your app is already in the Android Market I’d love to hear about it!

AIR for Android now in the Android Market

Posted by on Oct 8, 2010 in AIR, android | 7 comments

Now that’s fantastic news to wake up to: The AIR for Android runtime is now available in the Android Market.

Just open up the Market application on your Android (Froyo) device, search for Adobe AIR, and install it on your device. That same search will also reveal some apps that are built with AIR. I’m sure there will be more apps in the market in the next coming weeks. If you’re looking for some apps to try out I can highly suggest Qrossfire, Gridshock and Chroma Circuit from Bowlerhat Games! UPDATE: I posted a list of other games that are available in the Android Market and I’ve started a list on AppBrain with even more AIR games and apps! AppBrain is maintaining a list of applications built with Adobe AIR. Check out http://www.appbrain.com/apps/adobe-air

This is a really exciting release. It gives Flash Platform developers direct access to the Android Market without having to learn anything new. You can just build applications with the technology you already know and distribute them in the Market application that the user already knows.

Where to go next?

  • To build applications you can get the SDK from the prerelease program.
  • Build your applications using Flash Builder, Flash Professional CS5 or your favorite ActionScript development tool.
  • Package your application with the AIR SDK as an APK file (an update/fix for Package Assistant Pro is coming later today on Monday)
  • Publish your application to the Android Market. Ryan Stewart has an excellent post on how to sign your applications and submit them to the Android Market.

Android – Move your apps to SD

Posted by on Oct 6, 2010 in android | 17 comments

One of the major gripes of Android users is the disk space problem. The problem is that you can really only install applications on the device’s internal memory. Froyo allows you to install apps on the SD card… but only if the developer actually enables that feature in his app. There are a lot of apps in the Android Market that do not have this feature enabled (and yes… Flash Player is one of those apps) but there is an easy solution.

Well… Easy… Provided that you are familiar with the Android SDK and have no problem using a terminal window.

The trick is actually pretty simple and all credits go to Jason Patel who posted this on the Modaco Nexus One forum.

  1. You need to make sure that you enabled “USB debugging” on your phone.
  2. You need the Android SDK but I’m sure you have that installed by now, right? ;-)
  3. Connect your phone to a USB port, open up a terminal window, and type “adb shell pm setInstallLocation 2” (without the quotes). ADB is part of the Android SDK.
    This will enable the move to SD card option for all applications.
  4. Go to the Applications menu in the Settings menu and move your apps to your SD card.
  5. To restore this setting back to default type “adb shell pm setInstallLocation 0“.

So far I have not encountered any problems with any of the apps that I moved to SD… That said… Please note that there’s no guarantee that this won’t break or slow down your apps. If you encounter any issues I’d love to hear about them though. Just leave a comment below…