Develop Android and iOS applications using Adobe Flex & AIR

As an iOS native app developer, I hate to write hybrid applications using third party frameworks. However, one day, I was assigned a task of building and testing a hybrid application on iOS and Android which was developed using Adobe Flex and AIR. In a sense, this marked the beginning of my suffering due to the poor performance of the final application as well as the complexity of the development process, compared with native development using the official iOS and Android SDKs. After a few weeks spent on studying new concepts such as Flash Player, Flex application, AIR SDK, AIR, etc, I finally finished the task, and decided to write this article to share my knowledge with other users who may be having the same problem.

Basic concepts

The following diagram demonstrates the basic architecture of an Adobe AIR application. iOS/Android applications built using AIR will have the Adobe AIR runtime included with their binaries, providing support for ActionScript classes which forms the basics of  Adobe AIR/Flex applications.

Adobe Flash (formerly called MacromediaFlash and Shockwave Flash) is a multimedia and software platform used for creating vector graphics, animation, browser games, rich Internet applications, desktop applications, mobile applications and mobile games.

Flex is an integrated collection of stylable graphical user interface, data manipulation and networking components, and applications built upon it are known as “Flex” applications. Flex GUIs are defined in MXML, similar to how Android and Microsoft Visual Studio define GUIs. In 2004, Macromedia Flex was released and specifically targeted the application development market. The Flex SDK includes the Flex framework (also known as the Flex class library), Flex command-line compilers, the Flex debugger, the ASDoc utility, and the debugger version of Adobe® Flash® Player and Adobe® AIR® runtimes.

AIR (formerly Adobe Integrated Runtime) is a cross-platform runtime system developed by Adobe Systems for building desktop applications and mobile applications, programmed using Adobe Flash, ActionScript and optionally Apache Flex.

Adobe AIR is a cross-operating-system runtime that lets developers combine HTML, JavaScript, Adobe Flash® and Flex technologies, and ActionScript® to deploy rich Internet applications (RIAs) on a broad range of devices including desktop computers, netbooks, tablets, smartphones, and TVs. AIR allows developers to use familiar tools such as Adobe Dreamweaver®, Flash Builder®, Flash Catalyst®, Flash Professional, or any text editor to build their applications and easily deliver a single application installer that works across operating systems.

The AIR SDK contains framework for Adobe AIR APIs, template for the Adobe AIR application install badge, command-line Adobe AIR Debug Launcher (ADL), command-line Adobe AIR Developer Tool (ADT)

The main difference between Flex and AIR is that Flex, unlike AIR, does not give access to native GUI components.

Build iOS/Android app with Flex SDK using Flash Builder 4.7

In this part, I will show you how to use Flash Builder to build a simple “Hello World” application that can run on the iOS simulator.

First, install the Flash Builder(FB) with Adobe Creative Cloud, which can take a long time due to large download size.

Then, follow the steps in this link to build a simple “Hello World” application. When done, try to launch the application and you will encounter the first challenge – error message “iOS Simulator launch requires AIR SDK 3.4 or above” is shown:

To find out the reason of this error, click on “Learn more” which says

“Adobe Flex SDK 4.6 and Apache Flex SDK 4.8 contain AIR 3.1. When you create Flex projects using these SDKs, AIR 3.1 applications are created. And, you can’t use features that are specific to AIR 3.4. To use the AIR 3.4 features, you can overlay the AIR 3.4 SDK on the Flex SDK”

The reason this happens is because AIR 3.4 is a very old version. To find out how old it is, check the AIR SDK version archive here. To fix this error, we are going to use the latest version of AIR, v18.0.0 as at Aug 2015. Following the following steps to get this done:

1. Download the original AIR SDK without compiler version 18.0 at the bottom of this page http://www.adobe.com/devnet/air/air-sdk-download.html

2. Extract the downloaded package and check “AIR SDK Readme.txt” to make sure you have downloaded the right version.

\

3. Update the preinstalled AIR SDK files with the new files using ditto command in 2 directories:

• ditto ~/Downloads/AdobeAIRSDK /Applications/Adobe\ Flash\ Builder\ 4.7/sdks/4.6.0
• ditto ~/Downloads/AdobeAIRSDK/Applications/Adobe\ Flash\ Builder\ 4.7/eclipse/plugins/com.adobe.flash.compiler_4.7.0.349722/AIRSDK/

The “ditto” command replaces the existed files inside destination directories recursively.

4. The AIR SDK is now up-to-date and can be used to launch your app on the iOS simulator.

Building from the command line

The following diagram demonstrates the process of building an iOS application from Flex:

To achieve this from the command line, follow the following steps:

1. Creates the SWF file which is the final target of Adobe Flash Platform

amxmlc -swf-version 27 +configname=airmobile \
-include-libraries=libs/some_tools.swc,libs/an_extension.ane \
src/hello_world_application.mxml \
-output ./bin-debug/HelloWorld.swf

– HelloWorld_application.mxml is markup language file which combines with ActionScript to make application.
– an_extension.ane is a native extension which help AIR application access native function of platform. It’s optional.
– HelloWorld.as and other file .as are the logic implementation of AIR application.

2. Package all data into a single file – HelloWorld.ipa

adt -package -target ipa-test-interpreter \
-provisioning-profile ./a_path/ios.mobileprovision \
-storetype pkcs12 -keystore ./a_path/cer.p12 -storepass “password of cer.p12" \
../bin-debug/HelloWorld.ipa src/HelloWorld-app.xml \
-extdir libs src/GeoComplyClientTest.swf libs/another_tool.swc

‘target ipa-test-interpreter’ specifies the output type of ipa. This is functionally equivalent to a debug package, but compiles more quickly. However, the ActionScript bytecode is interpreted and not translated to machine code. As a result, code execution is slower in an interpreter package. You can check all possible target types by command “adt -help”

To complete code signing, you will need provide the provisioning profile and the private key in.p12 format.

Building with AIR Native Extension (ANE)

The overall process and required command line is summarized in the following diagram:

The provided command line are for iOS build, which generates an IPA file. If you are building the .APK file for Android, you will need to modify the commands slightly.