Serge Jespers » android

Displaying ads in your mobile AIR application

Serge Jespers — Tue, 17 May 2011 08:37:52 +0000

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.



Ad jig

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.

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

Serge Jespers — Thu, 24 Feb 2011 08:06:18 +0000

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

Serge Jespers — Thu, 27 Jan 2011 07:50:48 +0000

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!

Lapse It • Lite • Time-Lapse for Android on AppBrain

Lapse It • Time-Lapse for Android on AppBrain

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

Got AIR for Android? Try these games!

Serge Jespers — Fri, 08 Oct 2010 12:46:50 +0000

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.

Chroma Circuit for Android on AppBrain

Gridshock for Android on AppBrain

Qrossfire for Android on AppBrain

Meteor Storm for Android on AppBrain

Jacks for Android on AppBrain

MazeBall for Android on AppBrain

POGZ for Android on AppBrain

Treasure Caves 2 for Android on AppBrain

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

Serge Jespers — Fri, 08 Oct 2010 07:00:25 +0000

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.