• Like
Developing AIR for Mobile with Flash Professional CS5.5
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Developing AIR for Mobile with Flash Professional CS5.5


This is a presentation I gave at FlashTent.org

This is a presentation I gave at FlashTent.org

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors


  • 1. Developing AIR for Mobileusing Flash Professional CS5.5 @ChrisGriffith
  • 2. DisclaimerThese opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • 3. Mobile is Everywhere
  • 4. Context
  • 5. mobile vs. desktop
  • 6. Orientation
  • 7. Touch44px
  • 8. TouchThe average fingertip is 3x largerthan the hand cursorMake your buttons 3x largerThen make them even larger
  • 9. With fingers, come hands…
  • 10. Ergonomics How will they touch it? • One Thumb? • Two Thumbs? • Pointer Finger?
  • 11. Pixels Per Inch (PPI)Device Resolution PPI PhysicalNexus 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
  • 12. What is Adobe AIR?Adobe AIR allows designers anddevelopers by providing a consistentand flexible developmentenvironment for the delivery ofapplications across devices andplatforms.It supports Android™, BlackBerryTablet OS, and iOS mobile operating.
  • 13. 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
  • 14. 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
  • 15. 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/
  • 16. Updating AIR SDKwww.swfgeek.net/2011/09/26/targeting-flash-player-11-rc1-air-3-rc1-in-flash-professional-cs5-5/
  • 17. Development EnvironmentsEmulator Device
  • 18. Accelerometervar accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);function update(e:AccelerometerEvent):void{ e.accelerationX; e.accelerationY; e.accelerationZ;}
  • 19. Gesturescell.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;}
  • 20. Geolocationvar geo: Geolocation;if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE,updateHandler); geo.setRequestedUpdateInterval(10000);} else { log.text = "Geolocation feature not supported";}
  • 21. Hardware Keysstage.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 }}
  • 22. Orientationstage.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();}
  • 23. SQLite Supporthttp://www.dehats.com/drupal/?q=node/58
  • 24. StageWebView• You get a browser in your Flash app!• Good solution for – Maps – Facebook Connect – Remote Content
  • 25. StageText
  • 26. StageVideo
  • 27. Captive RuntimeDevelopers now have more flexibility with theirapp packaging options and can automaticallypackage AIR 3 with their Android™, iOS app intoa single installation file that includes the appand a bundled version of the AIR runtime.
  • 28. ANEsUse native code to take advantage of the sameplatform- and device-specific native capabilitiesand APIs available to native apps, with easyintegration into AIR applications.
  • 29. Limitations
  • 30. No Native Controlshttp://blog.kevinhoyt.com/2010/05/some-flash-android-components/
  • 31. No Access to Contacts
  • 32. Building Applications
  • 33. Don’t Fear the Timeline
  • 34. Publishing - Android
  • 35. Publishing - Android
  • 36. Publishing - iOS
  • 37. Publishing - iOS
  • 38. To the Market…
  • 39. Development Guidelines
  • 40. Graphics• Consider bitmaps over vectors• Keep bitmaps as small as possible• Minimize number of vectors• Test your animations with different qualities of StageAvoid, if possible:• Filters• Blend modes• Transparency• Perspective distortion
  • 41. 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
  • 42. 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
  • 43. Text Use opaque background over transparency Avoid TLF Test different anti-aliasing techniques (animation, bitmap text...) Avoid frequently-updated text Use appendText vs. text +=
  • 44. Display ObjectsUse 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
  • 45. Freeing MovieclipsAlpha? RemoveChild? Visible?Even when removed from the display list, the movie clip still dispatchesthe 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();}
  • 46. Resources
  • 47. Thanks!chris.griffith@gmail.com@chrisgriffithhttp://chrisgriffith.wordpress.com/