Create a cross-platform mobile app with AS3 and HTML5/JS

The turning point

In the last months of 2010 Apple has removed many restrictions in its developer agreement and published guidelines about the apps it will accept and reject.

Between these restrictions there was also the impossibility to submit to the appstore apps built using the packager for iPhone.

Flash on the iPhone ? really ?!

No, not really.

This is made possible by a Low Level Virtual Machine (LLVM) compiler infrastructure developed to understand AS3 code and able to output native ARM assembly code.

Porting to iPhone/ipad your AS3 projects is pretty easy and through the Packager for iPhone and Air for Android you can theoretically develop cross-platform application that looks exactly the same regardless the device it runs on.

So..can I export my AS3 app for iPhone and watch it run flawlessly ?

No, again.

Simple applications might work since the first attempt, but more complex apps requires some tricks to get them to work in the right way.

This is due to iPhone Packager immaturity, iPhone architecture and the impossibility to gain access to the native iPhone APIs.

If you have any experience developing applications with Adobe Flash Lite or other mobile platforms, you can use many of the same tricks and techniques such as caching bitmaps, limiting the display list depth, and so on.

iPhone OS publish settings

//iPhone OS publish settings

CPU vs GPU

In order to boost performances, iPhone packager lets us (through specific combobox in the compiler panel)  to take the advantage of the augmented rendering pipeline that uses OpenGL ES. This augmented rendering pipeline enhances the Flash rendering model to allow developers to take advantage of the GPU on iPhones increasing performances when rotating, scaling, moving o manipulating bitmaps.

This helps, but don’t expect the same performances that you can achieve with native APIs.

If you are planning to add animation to your app/game you have to use some “trick”:

-iPhone packager compiler set to GPU Mode

-assign a BitmapMatrix to all moving/translating/scaling/rotating objects

-cache as bitmap all moving objects and all objects that come to overlap with objects moving

This is because vector objects are redrawn each frame and also any bitmap object that overlaps with them is redrawn too. This seems really expensive for the  iPhone CPU. So comes in play the GPU.

To take advantage of the acceleration you can take advantage of the cacheAsBitmapMatrix and cacheAsBitmap properties, that allows you to cache data on your GPU instead of CPU.

Example:
//set the cacheAsBitmapMatrix property
myMovieclip.cacheAsBitmapMatrix = new Matrix();

//you have to cache as bitmap your object after a Matrix is assigned
myMovieclip.cacheAsBitmap=true

You can find addictional hints and best pratice for optimizing your code (such mark class as final,listen for an event once etc etc) here:

http://www.adobe.com/devnet/flash/articles/optimize_content_ios.html

Benchmarks

Despite such precautions, it is very difficult to achieve the same performance that can be obtained on Air for Android on the iPhone.

I made (like many other developers) a lot of testing with physics framework (as box2D) and width simple 3d animation (planes with random 3d rotation) and I noticed that where on Air for Android I got 26-28 FPS, the same AS3 project on the iPhone runs at 2-3 FPS.

The day we’ll can see complex applications developed in AS3 is still far away at the moment . Also due to the fact that native APIs are inaccessible through AS3 and iPhone Packager. So if we need inertial scroll, data picker and so on, we have to code it by hand. It means a lot of waste of time.

I do not exclude that in the near future Adobe might release a new version of the Packager for iPhone with some optimization and native APIs access, but until now I feel to suggest AS3 crossplatform approach only if you have already developed a AS3 project (not too cpu/gpu expensive) that you want port on mobile devices. For complex or GPU/CPU expensive application the best choice is still Objective-C, that lets you more overall control of the iPhone hardware and brings up with itself full access to native APIs/Frameworks.

Other crossplatform mobile free development tools

As many of you know, AS3 with Adobe Packager for iPhone is not the only alternative to native objective-c development.

Nowadays, the best choice came with frameworks that support javascript/HTML5 code and wraps it in to a native application or map it to native code.

Sencha Touch
Sencha Touch http://www.sencha.com/products/touch/

Sencha touch does not returns native code or wrappers but it’s designed to develop web apps with native cross-platform look’n feel.

PhoneGap
PhoneGap http://www.phonegap.com/

PhoneGap wraps HTML5/Javascript code in to a native webview wrapper that can be installed as app. It supports native API functionality as accelerometer, GPS and so on.

Titanium Appcelerator
Titanium Appcelerator http://www.appcelerator.com/

Titanium Appcelerator deserves a few more words because of its singular approach.

Titanium is capable to produce both desktop and mobile cross-platform native application using primarily javascript.

This is possible trough Kroll.

You can see more information about Kroll on the GitHub project page. Here is a small excerpt:

“Kroll is a compact microkernel written in C++ for running pluggable modules. Kroll supports a cross-language, cross-platform “binding” and invocation framework which supports mixing and matching code within the Kroll kernel. Yes, that means you can pass a Javascript object to a Python function and stuff like that. It’s just that bad ass … admit it.”

Kroll and Titanium Appcelerator

So you can easily use php code in a desktop application or use javascript to map native code in modules (IE: written in OBJ-C) like Titanium does.

This also means that developing Android or iPhone application implies a previously installed native SDK with its APIs.

After installation and during projects creation process Titanium will check for available SDKs (Titanium, iPhone and Android ) and let you choose which platform you want to develop for and with which SDK version.

Titanium Appcelerator - New project

//Titanium Appcelerator - New project

Titanium SDK makes available javascripts calls to instantiate almost all native ui elements and functionality.

To show us how it can be easy to build a simple application Titanium creates for us  (for every new project) a basic app with 2 window in 2 tabs, generated by a single javascript file:

app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)

Titanium.UI.setBackgroundColor('#000');

// create tab group

var tabGroup = Titanium.UI.createTabGroup();

//

// create base UI tab and root window

//

var win1 = Titanium.UI.createWindow({

title:'Tab 1',

backgroundColor:'#fff'

});

var tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win1

});

var label1 = Titanium.UI.createLabel({

color:'#999',

text:'I am Window 1',

font:{fontSize:20,fontFamily:'Helvetica Neue'},

textAlign:'center',

width:'auto'

});

win1.add(label1);

//

// create controls tab and root window

//

var win2 = Titanium.UI.createWindow({

title:'Tab 2',

backgroundColor:'#fff'

});

var tab2 = Titanium.UI.createTab({

icon:'KS_nav_ui.png',

title:'Tab 2',

window:win2

});

var label2 = Titanium.UI.createLabel({

color:'#999',

text:'I am Window 2',

font:{fontSize:20,fontFamily:'Helvetica Neue'},

textAlign:'center',

width:'auto'

});

win2.add(label2);

//

//  add tabs

//

tabGroup.addTab(tab1);

tabGroup.addTab(tab2);

// open tab group

tabGroup.open();

The results:

With few lines of code, titanium literally creates a native project (OBJ-C/JAVA) in the relative iPhone/Android build folder (/myApp/build/iphone/myApp/build/android) and then compiles it through the relative SDKs allowing us to launch the app on (SDK related) device simulator, publish it on our device for testing purpose or deploy it for appstore submission.

The approach to Titanium may be difficult due the lack of documentation. Luckily Appcelerator makes available for us a all-round demo called Kitchensink on Github https://github.com/appcelerator/KitchenSink and a Q&A-like community http://developer.appcelerator.com/questions/created.

Wherever you will be lead by your tastes .. good mobile development to all of you!

Comments

comments

Leave a Reply

Your email address will not be published.


*