We are working hard these days on an Android version of the WMN.fm Mobile Player.  After getting all the SDKs, and reading through the prerelease documentation, I decided it was time to use Flash Builder 4 to manage and debug the application.  This is very easy to setup, so here are a few tips to help you on your way.

First, read this blog post

1. If you haven’t already, download all the SDKs, install the CS5 extension, and successfully create a few Android test apps using Flash CS5 Professional.

2. Now that you know you’ve got everything you need to build Android apps it’s time to try and get Flash Builder to play nice.  The first step is to create an SDK folder Flash Bulder can use.

  • Locate the SDKs folder inside the Flash Builder  application folder.  On OSX: /Applications/Adobe Flash Builder 4/SDKs
  • Duplicate the folder of the most recent version (for me this is 4.0.1) and rename it appropriatly.  I used: /4.0.1-air2.
  • Using the ditto command, copy the AIR SDK files into your new folder:
ditto -V /path/to/air/prerelease /path/to/new/flashbuilder/sdk

3. Now fire up flex builder, and create a new air project. Select AIR for the Application Type, and click the Use a specific SDK dropdown.  If you completed the last few steps properly you should now see AIR for Android in the drop down list.  Select it!, Next Next Finish!

4. Change the root node of the main Application.mxml file from WindowedApplication to just Application.  Now edit the -app.xml file to reflect the app your building  The initialWindow node is where you really need to change a few things.


<!-- Settings for the application's initial window. Required. -->
 <initialWindow>
 <!-- The main SWF or HTML file of the application. Required. -->
 <!-- Note: In Flash Builder, the SWF reference is set automatically. -->
 <content>AndroidDebugTest.swf</content>

 <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
 <systemChrome>standard</systemChrome>

 <!-- The window's initial width in pixels. Optional. -->
 <width>480</width>

 <!-- The window's initial height in pixels. Optional. -->
 <height>800</height>

 <!-- The window's initial x position. Optional. -->
 <x>0</x>

 <!-- The window's initial y position. Optional. -->
 <y>0</y>

 </initialWindow>

5. Throw a couple buttons in the application, that simply trace a few different test messages.
6. Create a Debug Run Configuration that doesn’t require a local swf. Click the little drop down arrow beside the debug icon in Flash Builder and select Other.
7. Create a new Web Application configuration.
8. Enter the project details… the trick to this is to add “about:blank” in the URL or path to launch field.
9. In my copy of Flash Builder, the Apply button would not activate, and it tells me ” Project must be an ActionScript or Flex project.” I resolved this by hitting entering in the Name of the launch configuration, and the URL (about:blank) first. Then when you fill the Project Name in, hit Enter, and it saved for me.
10. Compile you app using the command line compilers, I’ve modified and posted Renaun’s script here:


APP_NAME=$1
USER_WORKSPACE=/Volumes/Data/sandbox/wmn/workspace
ANDROID_SDK=$USER_WORKSPACE/Devices/android/android-sdk-mac_86
AIR_SDK=$USER_WORKSPACE/FlexSDKs/4.0.1-air2.5

$AIR_SDK/bin/amxmlc -target-player 10.0.0 -debug=true $APP_NAME.mxml

$AIR_SDK/bin/adt -package -target apk-debug -connect 192.168.1.2 -storetype pkcs12 -keystore $USER_WORKSPACE/wmnAndroid.p12 -storepass m3d14st4t10n $APP_NAME $APP_NAME-app.xml $APP_NAME.swf icon48.png icon72.png

$ANDROID_SDK/tools/adb install -r $APP_NAME.apk

Now from the source directoy, I am able to run: ../compile.sh AndroidDebugTest  (passing the app name as the only parameter)

This will compile, and push the application onto my Nexus One device.  I verifiy the app installed, and force quite it.

Now, all that’s left is to run the remote debug configuration we created, and while it’s waiting for the connection to the flash debugger (it will timeout if your too slow) open the app again on your android.  You should now see the android connect to the remote debugging session, and the flash builder 4 console tracing your test statements.

This article was written to quickly get experienced developers up and running with Flash Builder 4 and Android, let me know your thoughts!

Advertisements