This is a presentation I gave at FlashTent.org

1. Developing AIR for Mobile
using Flash Professional CS5.5
@ChrisGriffith

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

4. Mobile is Everywhere

5. Context

6. mobile vs. desktop

7. Orientation

8. Touch
44px

9. Touch
The average fingertip is 3x larger
than the hand cursor
Make your buttons 3x larger
Then make them even larger

10. With fingers, come hands…

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

13. Pixels Per Inch (PPI)
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

14. What is Adobe AIR?
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.

15. AIR for Mobile Overview
• 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

16. Creating an Android App: Setup
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

17. Creating an iOS 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/

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

19. Development Environments
Emulator Device

20. Accelerometer
var accel:Accelerometer = new Accelerometer();
accel.addEventListener(AccelerometerEvent.UPDAT
E, update);
function update(e:AccelerometerEvent):void
{
e.accelerationX;
e.accelerationY;
e.accelerationZ;
}

21. 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;
}

22. 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";
}

23. Hardware Keys
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, tru
e);
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
}
}

24. 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();
}

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

26. StageWebView
• You get a browser in your Flash app!
• Good solution for
– Maps
– Facebook Connect
– Remote Content

27. StageText

28. StageVideo

29. 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.

30. 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.

31. Limitations

32. No Native Controls
http://blog.kevinhoyt.com/2010/05/some-flash-android-components/

33. No Access to Contacts

34. Building Applications

35. Don’t Fear the Timeline

36. Publishing - Android

37. Publishing - Android

38. Publishing - iOS

39. Publishing - iOS

40. To the Market…

41. Development Guidelines

42. 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

43. 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

44. GPU Acceleration
cacheAsBitmapMatrix property
Make sure to assign a Matrix to the cacheAsBitmapMatrix property
on your DisplayObject like this:
square.cacheAsBitmapMatrix = new Matrix();
http://blog.theflashblog.com/?p=2386

45. Text
 Use opaque background over
transparency
 Avoid TLF
 Test different anti-aliasing techniques
(animation, bitmap text...)
 Avoid frequently-updated text
 Use appendText vs. text +=

46. 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

47. 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();
}

48. Resources

49. Thanks!
chris.griffith@gmail.com
@chrisgriffith
http://chrisgriffith.wordpress.com/