How to Use Flex SDK 4.5 Hero with FlashDevelop

Posted on by

If you’re a Flex developer and want to try Flex 4.5 Hero with Android device, then this post might help you to get started 😉
You might also have a look at my previous post about creating Adobe AIR app for Android using AS 3.0. It might help you to setup some parts like Android SDK and digital certificates, also if you don’t want to use Flex framework and want to use pure AS3 solution.

Before you start, you can always download the whole project and source code of this post from here.

1. Install Flex Hero SDK

  • Download the Flex hero SDK from here. For this example, I use the MAX preview version.
  • Extract the SDK to a folder. Since the Flex 4.5 is still preview version, it’s better if you keep your real Flex SDK (4.1) separated from Flex Hero
  • Flex SDK 4.5 has already included the Adobe AIR 2.5 SDK so you don’t have to download it separately.

2. Make sure AIR 2.5 adt tools is available
You can install AIR 2.5 SDK on top of your Flex 4.1 SDK or just use the one from Flex 4.5. Check my previous post on installing AIR SDK 2.5 on top of your Flex 4.1 SDK.

  • Set PATH environment variable to {flex_4.1_folder}bin (if you have it installed on Flex 4.1) or to {flex_4.5_folder}bin if you just want to use the one from Flex Hero SDK.
  • To make sure that you have AIR 2.5 installed, type adt -version from command line. You’ll get something like “2.5.XXX”

3. Install Android SDK
You have to download and install the Android SDK even though you’re using Adobe AIR to create application. The Android SDK is used mainly for creating the Android package (APK) and also to install the application directly to your device.
Check Adobe’s Android Setup for help or directly go to Android Developer installation guide.
Make sure you also set the environment path to {android_sdk_folder}tools.
Update: Since the SDK r08, set the path to {android_sdk_folder}platform-tools instead, so you can acccess the command adb from anywhere.

4. Create Flex Hero project using Flash Develop

  • Open FlashDevelop.
  • Create a new project and choose AIR Flex 4 Projector. This will create a project with Main.mxml file.
  • Now close your FlashDevelop! We’re going to edit the FlashDevelop project file manually.
  • Using a text editor, edit your FlashDevelop project file (HeroOnMobile.as3proj), and change the following xml items:
    • replace <movie version=”10″ /> to <movie version=”11″ />. This will change the target from Flash Player 10 to Flash Player 10.
    • replace <option additional=”+configname=air” /> with <option additional=”+configname=airmobile” />. This will be the additional compiler parameters
    • replace <option customSDK=”” /> with <option customSDK=”C:devflex_sdk_4.5.0.17689″ />. Remember that c:devflex_sdk_4.5xxx is where you installed your Flex Hero project, replace it with your own path!
  • You can also edit everything above directly from FlashDevelop
Project Properties

Project Properties

5. Create your first Flex mobile app

  • Now open your FlashDevelop project. We’re going to create a simple hello world.
  • Edit your main.mxmland replace everything with: 
    <s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
	firstView="com.abiyasa.views.HomeView">

	<fx:Declarations />

	<fx:Script>
	<![CDATA[
		import flash.events.Event;

		private function backToHome(event:Event = null):void
		{
			this.navigator.popToFirstView();
		}
	]]>
	</fx:Script>

	<s:actionContent>
		<s:Button label="+" />
	</s:actionContent>

	<s:navigationContent>
		<s:Button label="H" click="backToHome(event)" />
	</s:navigationContent>
</s:MobileApplication>
  • From the code above, you see that the main file requires a view called HomeView (on attribute firstView). Create a package/folder com.abiyasa.views and create a file HomeView.mxml inside it. You can rename the package name com.abiyasa.views to anything you want, just make sure that you also change the attribute firstView on main.mxml
  • For HomeView.mxml, replace everything with: 
    <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
	title="ohai" width="100%" height="100%">

	<fx:Declarations />

	<s:layout>
		<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10" />
	</s:layout>

	<s:Label text="Im in ur android, saying hello" />

	<s:Rect width="100%" height="100%" />

	<s:Button label="okay" width="100%" />
</s:View>

6. Compile!

    • Try to compile your application.
    • If all setup is OK, you’ll get no error message. Playing the app will only show you an empty grey screen. This is OK since you haven’t edit the application.xml.
    • If you got an error like ‘cannot found s:MobileApplication…’, then make sure that you have:
      • Set Flash Player target to 10.1
      • Set compiler options to +configname=airmobile
      • Set custom SDK path to your Flex SDK 4.5’s path

      Otherwise, see the screen shots of project settings above.

      • Change the xmlns (AIR 1.5) to xmlns="http://ns.adobe.com/air/application/2.5"
      • Change <version>1.0</version> to <versionNumber>1.0</versionNumber>
      • Add <supportedProfiles>mobileDevice</supportedProfiles>
      • Add Android manifest. Just like every Android apps (native or Adobe AIR), we have to declare any phone feature we are going to use in advance (e.g Internet, GPS, Camera, touch screen, screen types, …). This is important to if you’re going to submit your app to Android Market.
      • For this example, we don’t use any phone features but let’s give the very basic permission for using Internet. Here is the full application.XML: 
        <?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
	<id>com.abiyasa.HeroOnMobile</id>
	<versionNumber>1.0</versionNumber>
	<filename>HeroOnMobile</filename> 

	<name>Hero On Mobile</name>
	<description></description>
	<copyright>2010</copyright> 

	<initialWindow>
		<title>HeroOnMobile</title>
		<content>HeroOnMobile.swf</content>
		<systemChrome>standard</systemChrome>
		<transparent>false</transparent>
		<visible>true</visible>
		<minimizable>true</minimizable>
		<maximizable>true</maximizable>
		<resizable>true</resizable> 

		<autoOrients>true</autoOrients>
	</initialWindow> 

	<supportedProfiles>mobileDevice</supportedProfiles>

	<!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
	<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 declarations will be here -->
</application>
      • test123 is the password for your certificate. Change it to your password and remember that you will use this password once more during package creation.
      • Change "Green Game Company" with your company name or your name. Double Quote is included if you game company name has spaces.
      • Once executing the command, a certificate file called myCertificate.p12 will be created.
      • You only need to create certificate ONCE! If you already have the file, you don’t have to create it. Just use the same certificate file to create the APK
      • Make sure you always use the same certificate for each application. You can even have one certificate for every apps you develop.
      • There are some rules for certifcate when to apply android market. For testing on your device this is not required. See Google’s guideline for signing your application
      • First, connect your device with USB. You may need to install the driver first.
      • We’re going to use adb tools from Android SDK. You need to have to inculde the Android tools folder to you environment path.
      • Type adb devices to see if your device connected. This command will list the connected devices (or even emulator) with your computer. Your device may appears as something like ‘I7500wJLU2AuEy0’. At least, the list should not empty 😉
      • Go to the folder bin (where you have your APK file generated) and type adb install HeroOnMobile.apk
      • Open you Android phone. You’ll see you app’s icon. Open it 🙂

7. Change the Application.XML

8. Run on device simulator (using ADL)
At this stage, try to compile again and run. Press Ctrl-Enter or press F5. If everything is allright, your app will be shown correctly! Congratulations!
Just check the menu ‘Device’, and there are options to simulate screen rotation. Try to click ‘Rotate Left’ or ‘Rotate Right’

9. Create icons
Before we create the Android package (APK), there are two things we should prepare: icons and digital certificate. We should provide 3 sizes of icon:36×36, 48×48, and 72×72 so your app’s icon can be displayed nicely on different screen size. Google has a very good guideline for icons. Check it out here.

If you want to create simple icons, Google has a simple web tool for that : http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html

Once you have the icons, put them on folder icons and put the folder icons inside the bin folder (where you SWF file generated). This is to make the packaging process easier.

Then we need to edit the application.xml to include our icons. Add these lines below the </android> line:

<icon>
    <image36x36>icons/icon36.png</image36x36>
    <image48x48>icons/icon48.png</image48x48>
    <image72x72>icons/icon72.png</image72x72>
</icon>

10. Create self-signed certificate
The last thing that you should prepare is a digital certificate. The certificate will be used to sign your application so the user knows that the app is coming from you, not from someone else. This is also the requirement if you want to publish your game to Android Market.

Luckily, you can create your own certificate (self-signed certificate) for free and you don’t have to use the pay one. I remember when we were using J2ME and Symbian that only paid certificate was accepted.

If you already have or created your own certificate (from previous project), you can skip this step and use your certificate for creating APK file.

To create a certificate just execute the this command (one line):
adt -certificate -cn SelfSigned -o "Green Game Company" -validityPeriod 25 1024-RSA myCertificate.p12 test123

11. Create APK
Go to bin folder (where you have the SWF file and icons folder) and type this command (one line):
adt -package -target apk -storetype pkcs12 -keystore ..myCertificate.p12 -storepass test123 HeroOnMobile.apk ..application.xml HeroOnMobile.swf icons

The adt command uses the certificate file, application.xml, swf, and icons to create the APK. The '-storepass test123' paramater is the same password for creating the certificate

12. Send it to your Android
There is nothing can beat testing your app on real device. Even Android developers test their app on device. There are emulators included in Android SDK but it took minutes just to get the emulator started and it does not reflect the speed and rendering on real device.

Don’t forget that you can also download the whole source code of this post from here. I also include the batch files to create certificate files and the APK file 😉

Some very good Links:

1 thought on “How to Use Flex SDK 4.5 Hero with FlashDevelop”

  1. Pingback: Adobe Air for android | Dotinga.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.