Flash Development for Android Cookbook: Over 90 recipes to build exciting Android applications with Flash, Flex, and AIR

1. We will first create a new project by choosing AIR for Android under the Create New section of the Flash Professional welcome screen:

2. We can then verify that we are targeting AIR for Android by taking a look at the document properties under the Properties panel:

3. We can also modify existing Flash documents to target Android by selecting AIR for Android as the Player option.

4. Now, simply build your Flash project as you normally would. Adobe has made the process of targeting Android with Flash Professional CS5.5 absolutely painless.

1. Firstly, create a new project by choosing AIR for Android under the Create from Template section of the Flash Professional welcome screen:

2. This will present a choice of several templates targeting AIR for Android. Choose the appropriate template for your device:

3. Alternatively, create a new ActionScript 3.0 project and open your publish settings by going to File | Publish Settings.

4. This will open a dialog allowing you to choose your target platform. In this case, we want to select AIR Android as the appropriate Player:

5. Now you will be able to adjust Application and Installer Settings targeting Android, and compile projects into .apk files.

1. In the Flash Builder Package Explorer, right-click on some empty space and choose New | Flex Mobile Project or New | ActionScript Mobile Project:

2. We will then provide the mobile project with a name and choose where Flash Builder should store the project files on the local machine.

3. The next step allows us to choose the target platform, in this case, Google Android, and define which application template to use (if you are making use of the mobile Flex framework). We can also set the default View name on this screen through the Initial view title input..

4. Additionally, we will choose whether or not the application will reorient based upon device tilt with the Automatically reorient option. We can select to display the application at full screen by selecting the Full screen checkbox.

5. One last selection to make on this screen is whether we would like to use density aware skins in our mobile components by selecting the Automatically scale application for different screen densities checkbox and selecting the appropriate Application DPI setting.

6. The rest of the project setup is really the same as any other project in Flash Builder.

1. Visit the Adobe Open Source website at http://opensource.adobe.com/ and locate the latest build of the Flex SDK.

2. Download a ZIP file of the latest Adobe Flex SDK and extract it to a hard drive to a location you will remember. For instance, C:\SDKs\Flex.

3. Launch Flash Builder and go to Window | Preferences.

4. Scroll down the Flash Builder menu item and select Installed Flex SDKs. You will now see a list of each of the SDKs currently available in your copy of Flash Builder:

5. Click the button labeled Add… and browse to the location of the Flex SDK you recently downloaded.

6. Provide the dialog with a meaningful name and click OK. For example, Flex 4.5. If we want to be very specific, we can always name it the full build name, such as: Flex 4.5.0.16076.

7. The Flex 4.5 SDK will now be available for use in your application. To use it in a project, simply select this SDK when creating a new project or when modifying the Flex Compiler properties in an existing project.

1. In Flash Builder, right-click in the Package Explorer panel and choose New | Flex Project. Alternatively, we can choose ActionScript Project, but this will not include any mobile benefits, as the actual Flex SDK components will not be employed. However, it is useful to note that ActionScript projects will generally perform better than their Flex counterparts simply due to the fact that they do not rely on such a heavy framework.

2. The New Flex Project dialog will appear in which you must provide a Project name, and select whether to create the project targeting Web or Desktop. If this project will be compiled for AIR for Android, we will want to make sure to choose Desktop, as this application type will target the Adobe AIR runtime. If creating a project targeting Flash Player in the browser, we will choose Web.

3. When choosing Desktop, we will also want to be sure to choose a mobile-enhanced version of the Flex SDK for our Android project. Flex 4.5 and above include everything we need to begin developing robust Android applications.

4. The last thing we must do is make sure that the mobile-enabled Flex SWCs are going to be used in our project. In order to declare <s:ViewNavigatorApplication> or <s:TabbedViewNavigatorApplication> for the main container of our project, these specific SWCs must be accessible, else Flash Builder will report errors.

5. The final section of the New Flex Project dialog allows us to be sure the mobile SWCs are included. You will notice that mobilecomponents.swc is not included in our project. Select the tab labeled Library path and click on the button labeled Add SWC…:

6. When the Add SWC dialog appears, browse to the location of the selected Flex SDK. Assuming we unpackaged the SDK to C:\SDKs\Flex4 we will now browse to C:\SDKs\Flex\frameworks\libs\mobile select the mobilecomponents.swc file, and click on Open. This will add support for the mobile components to our application.

7. Complete the project setup. We are now able to use mobile specific containers and controls without receiving errors from Flash Builder, but we must make a few more adjustments in order to correctly compile our application.

8. Locate the AIR descriptor file in your project. It is normally named something like {MyProject}-app.xml and resides at the project root. Open this file and change the <visible> attribute to true. It may be necessary to uncomment this node, if it has been commented out.

9. Right-click on your project in the Package Explorer and select Properties.

10. Select the Flex Compiler menu option and add the following to the Additional compiler arguments: theme=C:\{SDK Location}\frameworks\themes\Mobile\mobile.swc

11. Finally, switch the root node of your main application file from <s:Application> to <s:ViewNavigatorApplication>. We can now author and compile applications using the mobile flex framework components.

1. Visit the Adobe Open Source website at http://opensource.adobe.com/ and locate the latest build of the Flex SDK.

2. Download a ZIP file of the latest Adobe Flex SDK and extract it to a hard drive to a location you will remember. For instance, C:\SDKs\Flex.

3. Launch FDT and go to Window | Preferences.

4. Scroll down the FDT menu item and select Installed SDKs. You will now see a list of each of the SDKs currently available in your copy of FD:

5. Click on the button labeled Add and browse to the location of the Flex SDK you recently downloaded.

6. Provide the dialog with a meaningful name and click OK. For example, Flex 4.5:

7. The Flex 4.5 SDK will now be available for use in your application. To use it in a project, simply select this SDK when creating a new project or when modifying the Flex Compiler properties in an existing project:

1. In FDT, right-click in the Flash Explorer panel and choose NEW | New Flash Project:

2. The New Flash Project dialog will appear in which you must provide a Project name, and select whether to create the project using ActionScript 3 or Flex. We need to make sure to choose Flex 4, as this will include Spark components, which can be mobile-friendly if using a proper version of the Flex SDK.

3. The next section will allow us to choose a specific Flex SDK to use in our project. We should choose a mobile-enhanced version of the Flex SDK for our Android project. Flex 4.5 and above include everything we need to begin developing robust Android applications.

4. The last thing we must do is make sure that the mobile-enabled Flex SWCs are going to be used in our project. In order to declare <s:ViewNavigatorApplication> or <s:TabbedViewNavigatorApplication> for the main container of our project, these specific SWCs must be accessible, else FDT will report errors.

5. The next section allows us to be sure the mobile SWCs are included. Select the tab labeled SDK Library and click on the button labeled Select SWCs…

6. You will notice that mobile\mobilecomponents.swc is not included in our project. Select the checkbox next to this SWC and press the OK button to continue:

7. Now we will be able to use mobile specific containers and controls without receiving errors from FDT.

1. Go to the menu and choose File | New | Flex Mobile Project.

2. Provide the project setup dialog with information about the new mobile project.

3. Copy all of your files from the project folder in your original project into this new mobile project excluding your project descriptor file ({myApp }.xml) and Default Application files.

4. Now, copy everything within your old Default Application file and paste it into the Default Application file that was created along with your mobile project. Once everything has been copied over, right-click on the main application file and choose Set as Default Application.

5. Change all instances of <s:WindowedApplication> to <s:ViewNavigatorApplication> (alternatively, <s:TabbedViewNavigatorApplication>).

6. Look within your Problems panel to see whether or not any further modifications need to be made.

7. If you are not using any of the old Halo components (mx namespace) it is a good idea to remove the namespace declaration for your opening <s:ViewNavigatorApplication> tag.

8. Add a firstView attribute to the <s:ViewNavigatorApplication> tag. This should point to the View automatically created when you set up the mobile project.

9. Since visual UI elements cannot reside directly within a <s:ViewNavigatorApplication /> node, we must wrap the <s:Button /> instance within a <fx:Declarations> </fx:Declarations> tag set, or move it to a specific View.

1. Open the System Properties dialog. You can reach this dialog in many ways, the most direct being a right-click on My Computer. Then select Properties.

2. Choose Advanced system settings from the left hand menu.

3. Click on the button at the bottom of this window that says Environment Variables…

4. Click upon the PATH variable in this window and select Edit:

5. Now, simply add the location of your bin directory into the set of variables: If the last item in your variable value list has not been terminated with a semicolon, you must add one before every new item. For example: C:\SDKs\AIR\bin.

6. That should do it. Hit OK a few times and bring up the command prompt to verify that we've set this up correctly. Type in adt -version and hit Enter. If all is well, ADT will spit back a version string that looks something like adt version "2.5.0.00000".

1. Open the Terminal.

2. Now we must create the shell configuration profile. Enter the following into the Terminal window: cat >> .bash_profile on a Mac or cat >> .bashrc for Ubuntu (each Linux distribution may have its own particular naming convention for the startup script).

3. Next, enter export PATH=$PATH:/home/joseph/SDKs/AIR/bin to set the PATH variable pointing to the AIR development tools bin directory. Hit Enter.

4. Enter Ctrl+Shift+D to end this process.

5. Now we will check to be sure everything was added appropriately. Type cat .bashrc into the Terminal and hit Enter. You should see the PATH command spit back at you:

6. You may need to log out of your profile and then log back in for the new environment variable to be picked up by the system.

7. Bring up the Terminal again, after logging back into your profile.

8. Type echo $PATH into the Terminal and hit Enter. This should display everything that is included in the PATH variable including the location of our AIR bin directory.

9. That should do it. We will now verify that we've set the AIR SDK up correctly. Type in adt -version and hit Enter. If all is well, ADT will spit back a version string that looks something like adt version "2.5.0.00000":