Using Flash Builder Burrito and the Flash IDE you can export your ActionScript projects to three mobile platforms without any change in code! Let’s take a look at how to make this possible. Before we get started, here is a video with one of my demo apps running on all three devices:

Multi-screen:
The variety of screen resolutions and DPIs can be the hardest part of building a mobile app. When building an AIR app for mobile devices you have two important properties Capabilities.screenResolutionX(Y) and Capabilities.screenDPI. Using stage.stageWidth on mobile devices does not work the way you would expect it to. If you set up your application in Flash to have a width of 480 and a height of 800, the stageWidth and stageHeight will return these numbers even if the screen is smaller. Another thing to note is that the iOS packager currently targets 320×480 even though many of the iOS devices run 640×960. We’ll account for that by adding a screenResolution check.

In my application when a device has lower than 400 pixels in width I drop down the paint brush width. When the device has higher than 400 pixels I increase the size of the menu accordingly. A better approach would be to use the Capabilities.screenDPI for this calculation rather than just the screenResolution. All of your view components should be able to render at different DPIs and resolutions. When you know this from the start it is easy to build into the code. Here is an example:

if(Capabilities.screenResolutionX < 400){
	_canvas = new SimplePaint(Capabilities.screenResolutionX, Capabilities.screenResolutionY-85);
	_canvas.ratio = 0.66;
}else{
	_canvas = new SimplePaint(Capabilities.screenResolutionX, Capabilities.screenResolutionY-125);
	_menuBar.scaleX = _menuBar.scaleY = 1.5;
}

Notice how we are changing the size ratio of the brushes for smaller screens with a lower DPI. For larger screens we are increasing the size of the menu. This makes the application appear the same to the end user even when the app is running at 480×800 on the Android and 320×480 on the iOS! This could be improved to use the actual DPI value but the basic idea is there.

Multi-touch
This is the easy part. Use the Multitouch.maxTouchPoints to determine if the device supports touch. If it does than add touch listeners, if the device has 0 touch points add mouse event listeners. Don’t be that person that only codes for one device. With only a few extra lines of code you app will work on desktop and mobile. This also makes debugging much easier!

if(Multitouch.maxTouchPoints > 0){
	Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
	_canvas.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
	_canvas.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
	_canvas.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
}else{
	_canvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseBegin);
	_canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMyMouseMove);
	_canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseEnd);
}

Wasn’t that easy? One thing to note is that TOUCH_END was not always dispatched, especially when you start using 3+ touch points. To work around this add a timer into your class that checks to see if a TOUCH_MOVE event has been called. The TOUCH_MOVE event is dispatched even when the user has stopped moving and only stops when the touch has ended. As a backup, check every half a second or so to make sure the specific touch point id is still moving.

Setup:
To setup your workspace to export to all three platforms you’ll need to create a ActionScript only Mobile project in Flash Builder Burrito. Create an FLA in the source folder that uses the runnable AS file as its base. Create your assets in the FLA file, export them into a SWC to be used for FB and mark them as run time compiled so they work with the Flash IDE. From here you can export to all three devices without changing any files. Life is good

Conclusion:
In just 17 lines of code and a little setup we’ve got our multi-screen, multi-touch application ready to go! Make sure to add your event listeners for Android to close the app when the user hits back or home. This entire painting application is less than 400 lines of code (~4KB compiled), was built from scratch in less than 12 hours and is easily maintainable across multiple platforms. Performance is great and native APIs are easy to use. My only complaints are that the file size for the iOS is rather large and the iOS exporter doesn’t support the Camera API yet. Outside of that, this is the best way to build cross platform apps.

Wet Paint on the Web:

Porting to the web required changing 3 lines of code. To get these source files running on mobile devices change the _webMode value to false and remove the width / height from the SWF declaration. I also had to comment out the cacheAsBitmapMatrix to get it running on the web. Still very easy to convert!

Source files.

Enjoy!