breadcrumb arrow home | blog

Flash Builder to Android workflow

Posted: 26/07/10

An image of Flash Builder to Android workflow

Over the past couple of weeks I've been getting to grips with a Google Nexus One device; largely I've been impressed by the power and speed of the thing (if not the battery life)!

My main reason for getting my hands on one was to be able to take advantage of two things: It's got Flash Player AND soon will have the AIR 2.5 runtime! With AIR for Android, you package your SWF as a native .apk Android app, which is installed onto the device and run with the assistance of the AIR 2.5 runtime - this needs to be installed on the device to run the app, but the user will be prompted to download and install it if it isn't found.

Getting setup

So what do you need to get started?

- Adobe Flash Builder (https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder) You can also use Flash CS5 to build AIR for Android apps, but I prefer working in Flash Builder :)

- AIR 2.5 SDK (see link below)

- AIR 2.5 for Android runtime (https://prerelease.adobe.com/callout/default.html?callid={AEF64EB4-A977-4317-909A-14AD8014BA21})

- Google's Android SDK & Development Tools (http://developer.android.com/sdk/index.html)

1) Download and install Flash Builder 4, if you don't have it already.

2) Install the Android SDK.

Download the ZIP, unpack it to somewhere like c:android-sdk-windows, then run the SDK Setup application. You'll need to run it a couple of times to pick up all of the update downloads (I had to run it 3 times to get the latest SDK and USB drivers).

3) Add the Android tools directory to your system environment PATH.

Right-click on your Computer icon, select Properties, then select "Advanced system settings". In the dialogue that opens, click the "Environment Variables..." button.

Click the New... button. In the dialogue that opens enter the variable name "ANDROID" and the the value to be full system path to the android-sdktools directory. Press OK to save and close.

Now scroll down the list until you see the PATH variable. Select it and click the Edit... button. At the end of the Variable value string add the following

;%ANDROID%

OK everything to save the changes.

4) Connect your Android Device and install the drivers.

Be sure to dismiss any notifications to install the drivers; you need to do this in the Device Manager (Windows). With it connected, open your Windows Device Manager, then right-click the unknown Nexus One device in the list. Select "Update drivers..." then browse to the location of the Android SDK directory on your machine, and select the usb_driver directory. Accept the changes and allow Windows to install the drivers for you. You shouldn't need to restart your machine, but if you experience problems later a reboot may solve it.

5) Verify that the Android Debug Bridge application can see your device.

Connect your Android device using the USB cable. On the device, be sure to enable USB debugging; you should get a notification show, failing which go to Settings->Applications->Development->USB debugging.

Open the command prompt window and type the following, then press enter:

adb devices

After a couple of seconds the prompt should return a "List of devices attached" together with a single line containing the serial number of your device. If no devices show, check that the USB driver mentioned in step 4 have been correctly installed.

6) Download the AIR 2.5 SDK.

Un-zip, then overlay the AIR SDK on top of your current Flex 4.0/4.1 SDK (merge the AIR 2.5 folder contents into the Flex SDK folder contents).

7) Modify your system environment PATH for FLEX.

Right-click on your Computer icon, select Properties, then select "Advanced system settings". In the dialogue that opens, click the "Environment Variables..." button. Scroll through the list of user variables until you find the one containing the path to your Flex SDK directory. Select it and click Edit...

(If you don't see it in the list, click New... and add it, remembering to add the FLEX variable to the end of your PATH string, like you did with the ANDROID variable earlier.)

Modify the path to be the path to the bin directory of the Flex SDK folder into which your overlaid the AIR 2.5 SDK. OK everything to close the dialogue.

8) Install the AIR for Android runtime onto your Android Device.

Remembering where you downloaded the AIR 2.5 for Android file (the .apk one) to, start the command prompt and type the following and press enter:

adb install c:PATH_OF_AIR_FOR_ANDROID.APK

The ADB tool will then install the app onto your device for you.

At this point you now have your development environment setup to build AIR 2.5 applications for Android, you have the AIR runtime installed on your device, and you have a mechanism for deploying your AIR applications to your device.

Now you're ready put build a basic AIR app and get it deployed to the device.

Building an app

1) Start a new Flex Project Flash Builder 4 with the application type set to AIR.

Ensure you step through the project creation wizard step-by-step so that you can specify the Main application file as Main.as - The reason for this is that we're not going to use the Flex framework to create the AIR app, we're going to do it purely with Flash AS3.0 code.

2) Create a TextField instance

In Main.as, create a new TextField instance with the text "Hello World!" and add it to the display list.

package

{

import flash.display.Sprite;

import flash.text.TextField;

public class Main extends Sprite

{

public function Main()

{

var textField:TextField = new TextField();

textField.text = "Hello World!";

addChild( textField );

}

}

}

3) Export a release build.

Go through the standard process of exporting a release build of your project, which will create the .air file and request you to specify a certificate with which to sign your app. For now just 'self-sign' the application and remember where the .p12 certificate is created. Also, don't forget the password you assigned to the certificate, you'll need this in a moment!

4) Package as an Android app.

You now need to package the AIR app as an Android .apk file, so that it can be installed on Android. To do this, you need to use the ADT tool that ships with the AIR 2.5 SDK, and which should now be present as an environment variable in your command prompt. First change the directory to the bin-debug folder of your project, so for me this would be something like:

cd C:UsersjodieAdobe Flash Builder 4AndroidExampleProjectbin-debug

Enter the following command and arguments:

adt -package -target apk -storetype pkcs12 -keystore ../codesigningcert.p12 AndroidTest.apk AndroidTest-app.xml AndroidTest.swf

Looking at this more closely, I started by specifying the command name "adt", I then gave it the attribute -package which tells it that I want to package an AIR application. I then provide the -storetype attribute with the value pkcs and then tell it where to find the -keystore file... This is the .p12 file you created when exporting the release build of your AIR app. In the last part of the command attributes, you specify three file names. The first is the name of output .apk file (this can be anything you like). Next is the name of the AIR application descriptor file (you'll find this in the bin-debug directory of your project). Finally, you specify the name of the AIR application SWF file (again, you'll find this in the bin-debug folder in Flash Builder). All three must be specified.

Hit enter, and all going well you'll be asked to enter your certificate password, then the packager will create your .apk file in your project's bin bin-debug folder.

5) The next step is to get it onto the device.

With your device connected and visible to ADB, type the following at the command prompt:

adb install C:UsersjodieAdobe Flash Builder 4AndroidExampleProjectbin-debugAndroidTest.apk

Where the file path is the full path to the .apk you just created in your bin-debug folder. After hitting enter, you should see confirmation that the app has been successfully installed on the Android device. Congratulations, you've done it! Now get onto your device, find the app in your menu system, fire it up and marvel at the "Hello World!"

If you don't see the app display anything, have a quick look in your -app-xml. file to check that initialWindow is visible when the app starts up:

<visible>true</visible>

Sometimes you'll find this value is still set to false (the default).

Useful documentation

This doc is very informative when configuring your application's manifest file Setting mobile application properties

And Packaging an AIR installation file using the AIR Developer Tool (ADT) provides further assistance with using the command line tool.

Apply to join the AIR for Android pre-release

Keywords for this post: air, android, 2.5, flash builder, nexus one