Getting started with Adobe AIR for Android

by Brian Rinaldi

Mobile development is sexy — there's no denying that. But for someone like me, who generally focuses on back-end development or behind-the-firewall Flex applications, building a mobile application sounds intimidating. I can't pinpoint exactly why, but I also know I am not alone. However, with new Adobe AIR for Android (currently in developer prerelease on Adobe Labs) and the Adobe Flash IDE, mobile development for Google's new Android 2.2 operating system (code-named Froyo) couldn't be easier.

In this article, I discuss the essential tools you need to start developing for AIR for Android using Adobe Flash Professional CS5. I walk you through getting AIR installed on your Android phone and configuring Flash software to develop for that platform. Then I show you how to build and deploy your first application. While this application won't be groundbreaking, it can serve as a solid launching point for your new future as a mobile applications developer. (Note: The details of this tutorial were tested against the AIR for Android release as of August 1, 2010, on a Google/HTC Nexus One running Android 2.2.)

Setting up your development environment

Getting set up to develop Android applications with Flash is pretty straightforward. Here is a list of the items you will need and where to find them:

• Google Android SDK: The SDK contains the tools you need to develop for Android regardless of whether you are doing native applications in Java or AIR for Android applications in Flash. Specifically, you will use two tools in the SDK during this tutorial: adb and ddms.
• AIR for Android: Currently AIR for Android is available through the Adobe prerelease program at no cost, but it does require you to sign up. Once you sign up, you will have access to the downloads of the AIR for Android installation file and the Flash Professional CS5 extension as well as the accompanying documentation.

Now that you have downloaded the tools, you just need to run through some steps to do the installations. Lee Brimelow covers many of these same steps in a video tutorial on GoToAndLearn. (Note: Most of the time, the instructions are the same, but Brimelow's instructions assume you are working on a PC while mine assume you are working on a Mac.)

To get started:

1. Unzip the Android SDK. You will need to access many of the items in the Tools folder of the SDK files via the command line, so it's a good idea to keep this folder easily accessible.
2. With your phone connected to your computer, use the adb tool inside the Tools folder to ensure that the phone is connected. (Note: You may need to install a driver for your phone if it is connected to a PC.)
3. Open a command line window and navigate to the Tools folder inside your unzipped Android SDK, and run the command ./adb devices at the prompt. You should see your device on the list (see Figure 1). If you do not see your phone listed, make sure that it has the USB Debugging option enabled. This caused me some initial trouble. You can access this setting on Android 2.2 via Settings > Applications > Development > USB Debugging.

Figure 1. Use adb to ensure your mobile device is connected to your computer.

Now that you have confirmed your phone is connected properly, it's time to install AIR for Android:

1. Take the AIR runtime file you downloaded from prerelease and place it in the Tools directory under your Android SDK. (This isn't required, but it makes it easier to find.)
2. Type the following command at the prompt: /adb install Runtime_Device_Froyo_20100720.apk (Note: The exact filename of the apk may change depending on the date of the most updated release.)

You should see a response similar to Figure 2 indicating the install succeeded.

Figure 2. This response confirms you have installed AIR successfully.

You can also verify on your Android phone by navigating to Settings > Applications > Manage Applications, where you should now see Adobe AIR listed (see Figure 3). You can take screen shots of your application as well as other debugging information using the ddms application in your Android SDK tools directory.

Figure 3. Verify AIR is running on your Android phone.

Building mobile applications in Flash Professional CS5

To get started on a project, you first need to install the AIR for Android extension for Flash Professional CS5. Just double-click the install file to open your extension manager and install the extension. Once you have the extension installed, you should see an option for creating a new AIR for Android application under Create From Template when you start up the Flash CS5 IDE. Choose this option, which targets a document size of 480 × 800 and gives you an AIR for Android Settings button within your application's Properties panel.

(Note: You can use Flash Builder instead of Flash Professional CS5 to create your mobile application. I recommend the series of tutorials by Terrence Ryan for more information.)

In Figure 3, you may also notice an application called KidsStorybook. That is the sample application you are building. It's a very basic application consisting of five frames that contain the text from a storybook my seven-year-old son made for his class at school. (I was inspired by the much more interesting applications based on a child's drawing that David Stockton built with Flash Catalyst.) You will notice from the screen shot that it looks like a native application on Android.

The application consists of very little code other than what is required to make the buttons browse through pages. Figure 4 shows one of the pages with both buttons as it appears on my phone.

Figure 4. The KidsStorybook mobile application.

Let's take a quick look at the code that we'll start with, which all exists in the first frame of a layer for actions. All this code does is add listeners to the button clicks and navigate to the previous or next page. I also added a listener to hide the appropriate button when a previous or next frame does not exist. As I mentioned, this is pretty standard (and basic) ActionScript code — nothing here would work any differently if you were simply targeting a browser.

import flash.events.Event;

stop();

this.addEventListener(Event.ENTER_FRAME,handleEnterFrame);
nextBtn.addEventListener(MouseEvent.MOUSE_DOWN,nextFrameHandler);
prevBtn.addEventListener(MouseEvent.MOUSE_DOWN,prevFrameHandler);

function nextFrameHandler(event:MouseEvent):void {
    goNextFrame();
}
function goNextFrame() {
    if (currentFrame < totalFrames) {
           gotoAndStop(currentFrame+1);
    }
}
function prevFrameHandler(event:MouseEvent):void {
    goPreviousFrame();
}
function goPreviousFrame() {
    if (currentFrame > 1) {
           gotoAndStop(currentFrame-1);
    }
}
function handleEnterFrame(event:Event) {
    prevBtn.visible = true;
    nextBtn.visible = true;
    if (currentFrame == 1) {
           prevBtn.visible = false;
    }
    else if (currentFrame == totalFrames) {
           nextBtn.visible = false;
    }
}

In this code, I am actually using MouseEvent and not TouchEvent events. MouseEvent events work just fine on Android when pressed with your finger. In fact, the documentation recommends that you use MouseEvent events rather than TouchEvent events because they consume less memory.

Now if I were to deploy this application to my Nexus One or any other Android based phone that supports AIR, it would look and work just as I'd expect. That's what's great for Flash and ActionScript 3 programmers — you can leverage the knowledge and skills you already have and create mobile applications easily. However, nothing in this sample application takes advantage of the mobile platform. Let's change that by quickly adding some code to leverage the touch screen by enabling users to swipe left or right to change pages.

import flash.events.TransformGestureEvent;

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,swipeHandler);
function swipeHandler(event:TransformGestureEvent):void {
    if (event.offsetX == -1) {
           goNextFrame();
    }
    else if (event.offsetX == 1) {
           goPreviousFrame();
    }
}

That is all you need to do. I simply added a listener for the swipe gesture and called a swipeHandler() method. This method looks at the value of the offsetX property of the event to determine if users are swiping from right to left (that is, going to next page) or left to right (that is, going to the previous page). I told you this stuff was easier than you thought.

Deploying your first application

At this point, you've built the application, but you haven't actually tested it on your phone. Let's walk through how to manage the settings for publishing within Flash Professional CS5 using the AIR for Android extension.

In the Properties panel for your Flash application, click the Edit button next to the AIR for Android settings. This should open a new window with several tabs, including General, Deployment, and Icons.

In the General tab, you can do things like set the name of your application, the version, and the aspect ratio. These should all be pretty self-explanatory.

The Deployment tab (see Figure 5) contains settings for your certificate, which is required. For this example, I am using a self-signed certificate. You also use the Deployment tab to specify whether to create a debugging or release build. Finally, the Deployment tab enables you to automatically install and launch the application on a connected phone for testing. Simply point to the copy of adb in your Android SDK Tools directory (that's the tool you used to test that the device was connected earlier in this tutorial). Assuming your phone is still connected, click Publish. The AIR application should now install and launch on your mobile phone, which you can see by either browsing on your phone or using ddms to take a screen shot.

Figure 5. Use the Deployment tab to publish your application.

If you run this application, then you should be able to browse the short book my son wrote using either the buttons or the swipe gesture. However, the application has a generic icon when listed among the other applications on the phone. To fix this, simply add your icon to the Icons tab. I simply made a 72 × 72 PNG image of the fish and added it to the settings.

Now you're a mobile developer

You are now officially a mobile developer. You can even build those sexy native applications everyone seems to want. Granted, your first application wasn't groundbreaking, but it was a good start. While we touched on using gestures, you can take advantage of so much more with the touch screen and accelerometer to create better and more exciting applications.

For more information, visit the Mobile and Devices Developer Center. If you're interested in delivering video to mobile devices, make sure to see Edmond Au's article. If you'd like to see inspiring examples of Flash content running on devices that support Flash Player 10.1, visit the Adobe Flash Showcase for mobile.

‹ Back