Developing AIR for Mobileusing Flash Professional CS5.5

@ChrisGriffith

These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.

Disclaimer

Mobile is Everywhere

Context

mobile vs. desktop

Orientation

Touch

44px

Touch

The average fingertip is 3x larger than the hand cursor

Make your buttons 3x larger

Then make them even larger

With fingers, come hands…

Ergonomics

How will they touch it?• One Thumb?• Two Thumbs?• Pointer Finger?

Device Resolution PPI Physical

Nexus One/ HTC Incredible 800x480 254 3.7’

HTC EVO/ HTC Desire HD 800x480 217 4.3’

Droid/ Droid 2 854x480 265 3.7’

Droid X 854x480 240 4.3’

Samsung Galaxy S Vibrant 800x480 232 4.0’

iPhone 3GS and lower 480x320 163 3.5’

iPhone 4 / iPhone 4S 960x640 326 3.5’

iPad 1024x768 132 9.7’

Galaxy Tab 1024x600 170 7’

Data based on respective products published technical specifications

Pixels Per Inch (PPI)

Adobe AIR allows designers and developers by providing a consistent and flexible development environment for the delivery of applications across devices and platforms. It supports Android™, BlackBerry Tablet OS, and iOS mobile operating.

What is Adobe AIR?

• GeoLocation• Accelerometer• Camera• Multitouch / Gesture Support• Screen Orientation• Microphone• GPU Acceleration• SQLite DB• And more…

• No Native Widgets• No Access to Contacts• Limited SMS Support

AIR for Mobile Overview

Get the Android SDK: http://developer.android.com/sdk

ADB – Android Device Debugger installs apps on your device

DDMS - Dalvik Debug Monitor for desktop simulation.

Download AIR 3.1 sdk http://www.adobe.com/products/air/

Get AIR for Android runtime .apk installed via Android Market

Creating an Android App: Setup

Get the iOS SDK: http://developer.apple.com/programs/ios/

Allows you to create and install apps on your device

$99 per year

Download AIR 3.1 sdk http://www.adobe.com/products/air/

Creating an iOS App: Setup

Updating AIR SDK

www.swfgeek.net/2011/09/26/targeting-flash-player-11-rc1-air-3-rc1-in-flash-professional-cs5-5/

Emulator Device

Development Environments

Accelerometer

var accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);

function update(e:AccelerometerEvent):void{

e.accelerationX;e.accelerationY;e.accelerationZ;

}

Gestures

cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);function onZoom(e:TransformGestureEvent):void{

cell.scaleX *= e.scaleX;cell.scaleY = cell.scaleX;

}

cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);function onRotate(e:TransformGestureEvent):void{

cell.rotation += e.rotation;}

Geolocation

var geo: Geolocation;

if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE, updateHandler); geo.setRequestedUpdateInterval(10000);} else { log.text = "Geolocation feature not supported"; }

Hardware Keys

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);

function onKeyDown(event:KeyboardEvent):void { //Back Key if (event.keyCode == Keyboard.BACK) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }

//Menu Key if (event.keyCode == Keyboard.MENU) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }}

Orientation

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

function setPosition():void

{

vidHolder.x = stageWidth/2 - vidHolder.width/2;

vidHolder.y = stageHeight/2 - vidHolder.height/2;

//If the layout is vertical

if (stage.stageWidth < stage.stageHeight)

{

//Adjust graphics

}

}

setPosition();

stage.addEventListener(Event.RESIZE, resizeLayout);

function resizeLayout(e:Event):void

{

setPosition();

}

SQLite Support

http://www.dehats.com/drupal/?q=node/58

StageWebView

• You get a browser in your Flash app!

• Good solution for– Maps– Facebook Connect– Remote Content

StageText

StageVideo

Captive Runtime

Developers now have more flexibility with their app packaging options and can automatically package AIR 3 with their Android™, iOS app into a single installation file that includes the app and a bundled version of the AIR runtime.

ANEs

Use native code to take advantage of the same platform- and device-specific native capabilities and APIs available to native apps, with easy integration into AIR applications.

Limitations

No Native Controls

http://blog.kevinhoyt.com/2010/05/some-flash-android-components/

No Access to Contacts

Building Applications

Don’t Fear the Timeline

Publishing - Android

Publishing - Android

Publishing - iOS

Publishing - iOS

To the Market…

Development Guidelines

Graphics

• Consider bitmaps over vectors• Keep bitmaps as small as possible• Minimize number of vectors• Test your animations with different qualities of Stage

Avoid, if possible:• Filters• Blend modes• Transparency• Perspective distortion

GPU Acceleration

Set rendering mode to GPU

Make sure cacheAsBitmap is set to true on your DisplayObject like this:square.cacheAsBitmap = true;

http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html

GPU Acceleration

cacheAsBitmapMatrix property

http://blog.theflashblog.com/?p=2386

Make sure to assign a Matrix to the cacheAsBitmapMatrix property on your DisplayObject like this:square.cacheAsBitmapMatrix = new Matrix();

Text

Use opaque background over transparency

Avoid TLF Test different anti-aliasing techniques

(animation, bitmap text...) Avoid frequently-updated text Use appendText vs. text +=

Display Objects

Use the appropriate type of display object

Objects that aren’t interactive, use Shape();trace(getSize(new Shape()));// output: 216

Interactive but no timeline? Use Sprite();trace(getSize(new Sprite()));// output: 396

Need animation? Use Movieclip();trace(getSize(new MovieClip()));// output: 416

Freeing Movieclips

Alpha? RemoveChild? Visible?

Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event.

runningBoy.addEventListener(Event.REMOVED_FROM_STAGE, deactivate);

function deactivate(e:Event):void{

e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement);

e.currentTarget.stop();

}

Resources

Thanks!

chris.griffith@gmail.com

@chrisgriffith

http://chrisgriffith.wordpress.com/