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.

Apache Flex 4.11 Released!

The Apache Flex project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.11.0. This release makes some important improvements over previous versions of Apache Flex and Adobe Flex including new and improved components and performance enhancements.

What’s new in Apache Flex v4.11.0?

The Apache Flex 4.11.0 SDK allows application developers to build expressive web and mobile applications using MXML for layout and ActionScript 3, an ECMAScript based language for client-side scripting.

The Apache Flex 4.11.0 release contains many improvements that professional software development teams will appreciate. This advances the framework forward. It is truly one of the best cross-platform programming languages used to write applications that are testable and can be compiled to run on multiple technology platforms from a single set of code.

Apache Flex 4.11.0 highlights include:

    • Support Flash Player 11.9.
    • Support for AIR 3.9.
    • 120 and 640 dpi mobile resolution/skin support, fixes to 480dpi skins.
    • mx:AdvancedDataGrid and mx:DataGrid speed improvements.
    • Added column sort type access to the datagrid columns in mx:Datagrid, s:Datagrid, and mx:AdvancedDataGrid.
    • Able to easily change mx:AdvancedDataGrid row and column item renderer spanning.
    • s:DataGridEditor will now be visible in ASDocs and be visible in the Tag inspector.
    • Minor changes to make SDK compile with Falcon compiler.
    • Added access to imageDecodingPolicy in BitmapImage.
    • Changed UIComponent removedFromStageHandler from private to protected to allow override
    • New experimental mobile spark datagrid.
    • Updated OSMF swc to latest version (2.0)
    • Renamed experimental supportClazzes package to be supportClasses.
    • Mobile Callout moved to spark and can be used in Desktop and Browser apps.
    • Support for [Experimental] metadata tag.
    • Over 50 bugs/issues were closed with this release

Download Apache Flex 4.11.0

Adobe roadmap for the Flash runtimes

Say Hello to “Irving” and  “Jones” and Flash Player releases!

Flash Player and AIR “Irving” and “Jones”

Adobe is planning its next two releases for late 2013 and early 2014. These releases continue to focus on premium video, gaming, security, and stability.

Some of the features being worked on for these releases include the following:

  • OSX Mavericks support for desktop Flash Player and AIR
  • Significant reduction in iOS packaging times
  • ActionScript concurrency for mobile (beta)
  • iOS 7 support (depends upon Apple schedule)
  • Support for Windows 8.1 PlayTo
  • Support for Windows 8.1 tab suspension improvements
  • Support for Windows Internet Explorer 11 back navigation caching
  • XXHDPI icon support for AIR Android
  • pkg installer bundle for Mac OSX (vs .dmg)

Read more on Adobe’s site about the Flash Runtimes Roadmap – http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html

 

Apache Flex 4.10 Released!

Today the Apache Flex Team has released the latest version to the Flex SDK, we are now at version 4.10.0!

Apache Flex 4.10.0 highlights include:

    • Support for latest versions of Flash Player and AIR runtimes. At the same time, we have made it easier for developers wanting to take advantage of the latest advances in the Flash runtimes by letting them choose the versions during installation. The Apache Flex SDK Installer now allows developers to select various combinations of the Flex SDK, Flash Player and AIR runtimes. All the settings and configurations are taken care of during the installation, so the developer can just start coding!
    • Improved support for older Flash Player versions. Enterprise environments have more stringent requirement in terms of upgrading Flash Player versions. Now, because of our improved backwards compatibility, those customers can safely upgrade to the latest version of the Flex SDK without having to force a Flash Player upgrade on their end users.
    • The new spark components ensure that SDK users can build functionalities quickly and in a more performant way. The need for handling these components in two different architecture styles (mx vs. spark) will be eliminated.
    • “Out of the box” support for Advanced Telemetry allowing developers to easily profile their application and improve performance using Adobe Scout.
    • Better localization for multiple languages. Flex 4.10.0 is better now when trying to make application for multiple countries and languages.
    • Better international support for dates in formatters, validators, and the DateField and DateChooser components.
    • Better for developer productivity – less Run Time Errors (RTEs) and workarounds required in 4.10.0
    • 480 dpi mobile resolution/skin support means that Flex SDK users can now target high resolution devices such as iOS Retina, etc.

setting up FDT for Flex 4 SDK & Flash Player 10.1

Aiden Tailor wrote a great blog post on how to set up the Flex 4 SDK with FDT. You can check it out here

Read what he says, and follow the instructions, I did it and it works perfect, any problems just ask!

The point to this post is to take this one step more to configure the Flex 4 SDK to work with the Flash Player 10.1

Download Adobe Flash Player 10.1 beta 3 at Adobe Labs here

In the flex 4 SDK that you just set up from Aiden’s blog:

{SDKFolder}/frameworks/libs/player/10

replace the playerglobal.swc with the flash 10.1 that you just downloaded

open the flex-config.xml replace line 16 to read

 <target-player>10.1.0</target-player>

restart FDT

Now create a new project, “Flex 4 Test”
create a Main class

package {
	import flash.display.Sprite;
	import flash.events.AccelerometerEvent;
	import flash.sensors.Accelerometer;
	import flash.text.TextField;

	public class Main extends Sprite {
		private var myText:TextField = new TextField();
		private var acc:Accelerometer = new Accelerometer();
		private var isSupported:Boolean = Accelerometer.isSupported;

		public function Main() {
			myText.width = 200;
			addChild(myText);
			checksupport();
		}

		private function checksupport():void {
	    	if (isSupported) {
		    	myText.text = "Accelerometer feature supported";
			    acc.addEventListener(AccelerometerEvent.UPDATE, getInfo);
			} else {
			    myText.text = "Accelerometer feature not supported";

			}
		}

		private function getInfo(evt:AccelerometerEvent):void {
	    	myText.text = String("at: " + evt.timestamp + "n" + "acceleration X: " + evt.accelerationX + "n" + "acceleration Y: " +   evt.accelerationY + "n" + "acceleration Z: " + evt.accelerationZ);

		}
	}

}

Run file. I do get the following warning

This compilation unit did not have a factoryClass specified in Frame metadata to load the configured runtime shared libraries. To compile without runtime shared libraries either set the -static-link-runtime-shared-libraries option to true or remove the -runtime-shared-libraries option.

UPDATED
To fix this warning is an easy fix as it turns out, I had to search the flex-config.xml file to find it, but if you open the flex-config.xml file on line 385, you will see

<static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>

make sure this property is set to true! it is set to false by default. This will get rid of the compiler warning when you run your projects using the Flex 4 SDK.

 

For some reason the text below in the swf file is very small, this is not the case! If you could like to see a version with larger text, lease go here.
The final swf
[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://blog.hawaiiflash.org/wp-content/uploads/2010/03/Main.swf” targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

June 2009 meeting

AGENDA: RMC’s principal Samuel Asher Rivello will bring 2 exclusive nights of training to Honolulu from Venice, California.

Rivello Multimedia Consulting (RMC) focuses on four services for Adobe Flash CS4 and Flex 3; software architecture, consulting, development, and training.

RMC will offer one free night of training and one premium night of training. Each nite is a standalone event. Come to one or both! Send an email to reserve for Night #1. Purchase through paypal to reserve for Night #2.

Reserve your place now below!

DATES: 7PM START
**Monday June 15th, 2009 (Free Night)
**Tuesday June 16th, 2009 (Premium Night)

DURATION:
**Night #1 approx. 2 Hours.
**Night #2 approx. 4 Hours.

LOCATION:
**Honolulu, Hawaii. (Directions/parking coming soon!)


NIGHT #1: Mon. June 15th – Free Night: MMO & Augmented Reality

AGENDA A: Massively Multiplayer Online (MMO) technology has arrived in all forms of gaming. Giants like Blizzard’s ‘World of Warcraft’ define the commercial-subscription genre, and newbies like Webkinz and Club Penguin have burst on the scene with amazing financial success. Page based Web 1.0 interactivity is no longer competitive. Embrace the paradigms of the emerging ‘Web 2.0′, with an MMO’s unique and engaging new format. In this session we will overview MMOs as the sublime progeny of Web 2.0 & the Rich Internet Application (RIA). Learn to create a simple, fully functioning MMO social experience in less time than you think. While the examples shown will be specific to Flex 3 for deployment to the browser, this session is equally relevant for application developers of other technologies including Adobe Flash CS3 and Adobe Flex 3 for Adobe AIR desktop deployment.

AGENDA B: Augmented reality (AR) adds graphics, sounds, and more to the natural world around you. You can expect video games to drive the development of augmented reality, but this technology will have countless applications. The technology adds computer-generated graphics to your field of vision. Augmented reality will truly change the way we view the world. Using the power of the Adobe Flash player, Adobe Flex Builder, and a few open API’s, augmented reality has arrived on your desktop. With a webcam, AR will replace part of the live video footage it sees with Papervision3D computer models, animated in real-time. It is impressive and inspirational. Learn the basic background of augmented reality, and how to setup your first project using the technology.

AUDIENCE: All levels of designers and developers for Flash will enjoy this talk! We will show code, but there is also some just plain fun! Laptops are not required. Attendees will get inspired and learn the basics of two projects. All source code and documentation will be available to attendees.

OUTLINE: Augmented Reality

  • Section A.1: Getting Context: What is Augmented Reality?
  • Section A.2: Creating Augmented Reality
  • Section A.3: Next Steps

OUTLINE: MMO

  • Section B.1: Getting Context: Web 2.0 and the MMO
  • Section B.2: Creating an MMO from Scratch with Adobe Flex 3… in 59 minutes.
    • Choosing Client Side Technology
    • Choosing Server Side Technology
    • Development
  • Section B.3: Next Steps
    • Integration Online
    • Future Features

RESERVE 1 TICKET PER EMAIL ADDRESS: Seats are first come first serve. Sorry but no refunds available after June 15th.


NIGHT #2: Tue. June 16th – Premium Night: Intro to PureMVC for Flash & Flex (4 Hours)

AGENDA: Superpower your Flash and Flex Development with PureMVC. Architect new projects of all sizes in a more scalable and maintainable way. Revisit projects and easily add new features. Collaborate on teams with confidence.

PureMVC is a light framework for creating applications based on the class Model-View-Controller meta design pattern. It has a very narrow goal, to provide design patterns AND development patterns to help you separate your programming into three distinct areas; data, user interface, and the application logic. It is approachable and powerful with minimal tedium and repetition in development. While the examples shown will be specific to Adobe Flex 3 for deployment to the browser, this session is equally relevant for application developers of other technologies including Adobe Flex 3 for Adobe AIR desktop deployment.

AUDIENCE: Intermediate to advanced Adobe Flash CS4 and Adobe Flex 3 developers with equivalent ActionScript 3.0 knowledge. This is not for beginner developers or for designers; its pretty technical. Laptops are not required. Attendees will have another tool in their belt for organizing readable, efficient, maintainable projects. All source code and documentation will be available to attendees.

OUTLINE:

  • Section 1: Background of and Benefits of PureMVC
    • What is a framework?
    • What is PureMVC?
  • Section 2: PureMVC Applied
    • Setting up a new PureMVC project
    • Implementing all features of PureMVC
    • Extending an application with new features
  • Section 3: PureMVC Next Steps
    • PureMVC vs. Other Frameworks
    • 10 Tips for PureMVC
    • What’s next?

PURCHASE TICKETS FOR NITE #2: Seats are first come first serve. Sorry but no refunds available after June 15th.

See more on Sam’s Blog

Flash Guru to Speak at UH

Sam Rivello of Los Angeles-based Rivello Multimedia Consulting will lead two days of presentations beginning tomorrow for the Hawaii Flash User Group. The first, free night will cover Massively Multiplayer Online (MMO) environments and augmented reality. Tuesday’s “Premium Night” will cover more advanced topics relating to the PureMVC framework for Flash and Flex development.

Rivello has designed, developed or managed the development of over 400 Flash and Shockwave games and applications, many for Fortune 1000 companies. He is an Adobe Certified Designer and Developer for Flash, an Adobe Flex Champion, an international public speaker, and a university professor.

The sessions will be held in Room 219 of the Agricultural Sciences Building (1955 East-West Rd.) at the University of Hawaii at Manoa. To attend the free MMO and augmented reality session, RSVP at the Adobe Groups event page. Tickets for the advanced “Premium Night” session are $149, and can be purchased via PayPal through Sam’s RMC Roadshow blog post.

Flex Skinning

I just went through a tutorial on flexcf and have discovered that you can skin a flex app! This opens a whole new set of doors! A project that I am putting together here locally is using flash CS 3 with ColdFusion, and one of the reasons was that flash CS 3 is easier to modify for a custom look, you know the design aspects, but now I see you can add wonderful designs to flex as well`-`

I checked out AsFusion as well as fill colors, does anybody know of other examples?