How to Develop an Android App using FlashDevelop and AIR 2.6 SDK

Hello everyone, this is my first tutorial on how to get you started on developing Android apps using a free opensource code editor called FlashDevelop and the free Adobe AIR 2.6 SDK, without having to buy the Flash CS5/5.5 or Flash/Flex Builder.

First, you need to download and install FlashDevelop, its a free opensource code editor for Actionscript, for those of you who don't know Actionscript is the scripting language used by Adobe's Flash CS and Flex software products.

• go to: http://www.flashdevelop.org/
• click the "All downloads" link and you will land on the forums page where you can see all the versions of FlashDevelop available.
• choose the latest version and read through the instructions before downloading, you don't need to download the Flex SDK as the installer will automatically download it for you.
• you may need to download and install .NET Runtime and Java Runtime before you install FlashDevelop, you can visit the wiki page here for more info. 
• note: you need to let the FlashDevelop installer to download the Flex SDK which will take a while, the FlashDevelop installer itself is tiny at around 9.5mb, while the Flex SDK is at around 600mb.

 

once your done installing FlashDevelop you can now compile actionscript code without having Flash installed.

The next thing you need to do is to update your AIR 2.0 SDK to AIR 2.6 SDK (which is inside the Flex SDK that FlashDevelop automatically downloaded) to do this download the AIR 2.6 SDK on this link for this example, we will be downloading the windows version.

• once your finish downloading the AIR SDK, navigate to your FlashDevelop installation path (by default: C:\Program Files\FlashDevelop) go to the "Tools" folder then to the "flexsdk" folder (you should now be on this path: C:\Program Files\FlashDevelop\Tools\flexsdk)
• extract all of the AIR SDK (AdobeAIRSDK.zip) contents to the path that you are in (C:\Program Files\FlashDevelop\Tools\flexsdk) you need to overwrite the files for it to be updated. 

now that your have the updated AIR SDK, download the actual Android SDK on this link

• once on the download page, download the windows zip version of the Android SDK (named: android-sdk_r10-windows.zip take note that the name of the file will change depending on the version of it)
• extract it somewhere on you computer where you can easily access it, for this example I will be extracting it on the desktop.
• inside the folder, run "SDK Manager.exe" a popup window will appear, it will ask you to update all of the available packages from its repository, however it would take a heap load of time to update it as the packages are at least 3gig (or bigger).
• instead I would advice that you download the following:
• close the window "Choose Packages to Install", then select "Available packages", then click the small arrow on the "Android Repository" to show all of the other options.

 

• check "Android SDK Platform-tools, revision 3"
• check "SDK Platform Android 3.0, API 11, revision 1"
• check "SDK Platform Android 2.3.3, API 10, revision 1"
• check "SDK Platform Android 2.2, API 8, revision 2"
• check "Android Compatability package, revision 1"

 

 this will enable you to use the emulator for Android version 3.0 (honeycomb) 2.3.3 (gingerbread) and 2.2 (froyo) it also enable you to develop on the following versions.

• now go to the "Third party Add-ons" and click the small arrow to show all of the options available.
• open the options for "Google Inc. (dl-ssl.google.com)" and check the "Google USB Driver package, revision 4" option.

 

this will allow you to detect your android phone if it is connected via USB, now hit "Install Selected" button and wait for your download to finish.

How to open the Android Emulator:

• on the "Android SDK and ADV Manager" window select "Virtual Devices"
• hit the "New..." button, you will see the "Create new Android Virtual Device (ADV)" window
• on the "Name:" field enter any desired name, for this example I will name it "AndroidEmulator"
• on the "Target:" drop down menu choose any version of android you like, for this example I will choose Android 2.2 (froyo)
• on the "SD Card" - > "Size:" field you can enter any amount of mb but for this example I will be entering 1000mb (or 1 gig of SD card memory)
• hit "Create ADV", you will now see it on the previous window on the "List of exisiting Android Virtual Devices".
• select the created Android Virtual Device and hit "Start..." button

 

Note: this will take a while for the emulator to load, mine took at least 10min to 15min for it to fully load.

How to Install AIR Runtime Player on your Android Emulator

• navigate to: "C:\Program Files\FlashDevelop\Tools\flexsdk\runtimes\air\android\emulator"
• copy the "Runtime.apk" and paste it on your Android SDK Folder inside "platform-tools" folder
• hold shift and right click on the "platform-tools" folder and choose "Open command line window here"
• type: adb install Runtime.apk
• this will install the Runtime.apk (which is the AIR Runtime) to your emulator

How to check if your Android Phone is detected or not.

• on the Android SDK folder you will see the "platform-tools" folder
• while holding the shift key, right click on the "platform-tools" folder and on the options choose "Open command window here".
• in the command window type the following: adb devices
• you will then see a list of android devices plugged in to your computer

Note: sometimes you may need to install softwares on your computer from your phone's manufacturer, so that your computer will be able to detect your phone.

Now that everything is set, download the AIR Android Template for FlashDevelop, you can get the template here. 
(Thanks to Keith for telling me about the wrong link, also Thanks Guave Studio Blog  and  azerdark for the link on the old AIR Android Template)

however since the template is severly outdated we will need to modify the template for it to work properly.

• once your finish downloading the file (it should be named "airandroidtemplate.fdz") open it with winrar and extract its content on its own folder.
• there you will see the file "application.xml.template", open it with FlashDevelop

 replace the text on that file with this:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/2.6">

    <id>$(PACKAGEDOT)$(PROJECTID)</id>
    <versionNumber>1.0.0</versionNumber>
    <filename>$(PROJECTID)</filename>
    <description />
    <!-- 
        To localize the description, use the following format for the description element.<description><text xml:lang="en">English App description goes here</text><text xml:lang="fr">French App description goes here</text><text xml:lang="ja">Japanese App description goes here</text></description>
    -->
    <name>$(PROJECTNAME)</name>
    <!-- 
        To localize the name, use the following format for the name element.<name><text xml:lang="en">English App name goes here</text><text xml:lang="fr">French App name goes here</text><text xml:lang="ja">Japanese App name goes here</text></name>
    -->
    <copyright />
    <supportedProfiles>mobileDevice</supportedProfiles>
    <initialWindow>
        <content>$(PROJECTID).swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <fullScreen>false</fullScreen>
        <aspectRatio>portrait</aspectRatio>
        <renderMode>auto</renderMode>
        <autoOrients>false</autoOrients>
    </initialWindow>
   
    <android>
    <manifestAdditions>
          <![CDATA[
            <manifest android:installLocation="auto">
                <!-- Added for Internet and debugging support -->
                <uses-permission android:name="android.permission.INTERNET"/>

                <uses-configuration android:reqFiveWayNav="true"/>
                <supports-screens android:normalScreens="true"/>
                <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>

                <application android:enabled="true">
                    <activity android:excludeFromRecents="false">
                        <intent-filter>
                        <action android:name="android.intent.action.MAIN"/>
                        <category android:name="android.intent.category.LAUNCHER"/>
                        </intent-filter>
                    </activity>
                </application>
            </manifest>
          ]]>
      </manifestAdditions>
     
    </android>
   
    <icon />
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <!--
        More options:
        http://livedocs.adobe.com/flex/3/html/File_formats_1.html#1043413
    -->
</application>

•  then on the same folder go to "scripts" folder
• open the "settings.bat.template" with FlashDevelop

replace the following line:

set ANDROID_PATH_TOOLS="C:\Program Files\android-devsdk\tools"
set AIR_PATH_BIN="C:\Program Files\Adobe\air25\bin"

with the right path to your AIR SDK and Android SDK in this case:

set ANDROID_PATH_TOOLS="<path to your Android SDK>\platform-tools"
set AIR_PATH_BIN="C:\Program Files\FlashDevelop\Tools\flexsdk\bin"

for example if I have my Android SDK saved on my desktop:

set ANDROID_PATH_TOOLS="C:\Users\JhayVie\Desktop\android-sdk-windows\platform-tools"
set AIR_PATH_BIN="C:\Program Files\FlashDevelop\Tools\flexsdk\bin"

 The AIR_PATH_BIN remains the same since the AIR SDK is saved inside of the FlashDevelop folder.

once your finish modifying the files you must copy the "190 ActionScript 3 - AIR Android AS3" folder and paste it to your FlashDevelop template directory located here: "C:\Program Files\FlashDevelop\Projects"

Close FlashDevelop and relaunch it to make sure all your changes has been saved.

Now you can go and create an Android AIR Template on FlashDevelop

• Create a Folder and name it what ever you want, for this example I will name my folder "AndroidTest" and I'll save it on the desktop.
• Fire up FlashDevelop and go to "Project" then choose "New Project".
• A new window will popup, on the "Location" field click the "Browse" button and navigate to the folder you just created.
• then finally click "Ok"

You should see that FlashDevelop has automatically created an arrangements of files and folders for you, right click on the file "CreateCertificate.bat" located on the left side portion of FlashDevelop, this portion acts as a convinient navigation interface for all your files in your project.

Executing "CreateCertificate.bat" will create a file called "SelfSigned.p12" this file will serve as a virtual certificate, this is required if you want to publish your apps on the Android Market.


Now for the sake of example we will be writing a very simple flash app, where going to draw a small green square on the stage and make it move using the Android Accelorometer feature.

• open "Main.as"
• replace all the text inside of it with this:

package
{
    import flash.display.Sprite;
    import flash.events.AccelerometerEvent;
    import flash.sensors.Accelerometer;
   
    /**
     * ...
     * @author <your name>
     */
    public class Main extends Sprite
    {
        //creates the accelerometer object
        private var accelerometer:Accelerometer;
        //creates a container for the square
        private var square:Sprite;
       
        //vertical and horizontal variable containers for the square
        private var veloX:Number = 0;
        private var veloY:Number = 0;
       
        public function Main():void
         {
            //creates the instance of the square
            square = new Sprite();
            //draws a dynamic green square
            square.graphics.beginFill(0x00FF00);
            square.graphics.drawRect( 0, 0, 100, 100 );
            square.graphics.endFill();
           
            //places the square on the stage 100x and 100y
            square.x = 100;
            square.y = 100;
           
            //adds the square on the display list
            addChild(square);
           
            //creates the instance of the accelerometer object
            accelerometer = new Accelerometer();
            //creates the interval on how responsive the accelerometer is, on this example it updates 30 times per second
            accelerometer.setRequestedUpdateInterval( (1 / 30) * 1000 );
            //adds an event that listens for the updates on the accelerometer
            accelerometer.addEventListener( AccelerometerEvent.UPDATE, accelerometerUpdate);
           
        }
       
        //makes the square move on every update of the accelerometer
        private function accelerometerUpdate(e:AccelerometerEvent):void
        {
            veloX = e.accelerationX * 0.5 + (1 - 0.5) + veloX;
            veloY = e.accelerationY * 0.5 + (1 - 0.5) + veloY;
           
            square.x = veloX;
            square.y = veloY;
        }
       
    }
   
}

Finally Test your movie by pressing "Ctrl" + "Enter" or press the little play button below FlashDevelop's main menus, if you still have your Emulator running or if you have any Android Phone connected to your computer, the FlashDevelop Template will automatically Install your app on any Android Devices connected (or running) on your computer.

On the Next tutorial I will be explaining a little bit about the code we just wrote.

Recommended books:
Essential ActionScript 3.0
The Essential Guide to Open Source Flash Development
FlashDevelopAndroid Development with Flash