Developing AIR for Android with Flash Professional CS5

Uploaded on

A presentation I gave to the Bay Area Mobile Meetup on Developing AIR for Android with Flash Professional CS5.

A presentation I gave to the Bay Area Mobile Meetup on Developing AIR for Android with Flash Professional CS5.

More 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
  • Foundation of development for mobileAIR for Android Technical tips and tricks
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors


  • 1. Developing AIR for Android using Flash CS5
    Chris Griffith
  • 2. Disclaimer
    These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • 3. Who has built for mobile?
  • 4. Who uses what?
  • 5.
  • 6. My Mobile App Portfolio
  • 7. Mobile is Everywhere
  • 8. Designing for Mobile
  • 9. Context
  • 10. mobile vs. desktop
  • 11. Orientation
  • 12. Touch
  • 13. Touch
    The average fingertip is 3x larger than the hand cursor
    Make your buttons 3x larger
    Then make them even larger
  • 14. With fingers, come hands…
  • 15. Ergonomics
    How will they touch it?
    One Thumb?
    Two Thumbs?
    Pointer Finger?
  • 16.
  • 17. Data based on respective products published technical specifications
    Pixels Per Inch (PPI)
  • 18. The Adobe® AIR® 2.6 runtime enables developers to use HTML, JavaScript, and ActionScript® to build web applications that run as standalone client applications without the constraints of a browser. Adobe AIR allows designers and developers by providing a consistent and flexible development environment for the delivery of applications across devices and platforms. Support for Android™, BlackBerry Tablet OS,* and iOS mobile operating systems and televisions is now available.
  • 19. AIR for Android Overview
    Multitouch / Gesture Support
    Screen Orientation
    GPU Acceleration
    SQLite DB
    No Native Widgets
    No Multiple Camera Support
    No Access to Contacts
    Limited SMS Support
  • 20. Creating an Android App: Setup
    • Get the Android SDK:
    Allows you to create and install apps on your device
    • Android - SDK Manager to install packages etc.
    • 21. ADB – Android Device Debugger installs apps on your device
    • 22. DDMS - Dalvik Debug Monitor for desktop simulation.
    • 23. Download AIR 2.6
    • 24. Get AIR for Android runtime .apk installed
  • Development Environments
  • 25. Accelerometer
    varaccel:Accelerometer = new Accelerometer();
    accel.addEventListener(AccelerometerEvent.UPDATE, update);
    function update(e:AccelerometerEvent):void
  • 26. 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;
  • 27. 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"; }
  • 28. 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  }}
  • 29. 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
    stage.addEventListener(Event.RESIZE, resizeLayout);
    function resizeLayout(e:Event):void
  • 30. SQLite Support
  • 31. StageWebView
    You get a browser in your Flash app!
    Good solution for
    Facebook Connect
    Remote Content
  • 32. Limitations
  • 33. No Native Controls
  • 34. No Access to Contacts
  • 35. Building Applications
  • 36. Don’t Fear the Timeline
  • 37. Publishing
  • 38. Publishing
  • 39. To the Market…
  • 40. .air
    AIR Packaging & Distribution Workflow
  • 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:
    Blend modes
    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;
  • 44. GPU Acceleration
    cacheAsBitmapMatrix property
    Make sure to assign a Matrix to the cacheAsBitmapMatrix property
    on your DisplayObject like this:
    square.cacheAsBitmapMatrix = new Matrix();
  • 45. GPU Acceleration
  • 46. Text
    • Use opaque background over transparency
    • 47. Avoid TLF
    • 48. Test different anti-aliasing techniques (animation, bitmap text...)
    • 49. Avoid frequently-updated text
    • 50. Use appendText vs. text +=
  • Horizontal? Vertical? Both?
    Content should dictate orientation, but don’t forget about the keyboard.
    Consider adjusting content based on layout:
  • 51. 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(newSprite())); // output: 396
    Need animation? Use Movieclip();
    trace(getSize(newMovieClip())); // output: 416
  • 52. 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);
  • 53. Flex for Mobile - HERO
  • 54. Hero in a Nutshell: Mobile Application Development
    Allow developers to create a single mobile project that will run on multiple mobile environments
    UI components supporting touchscreen interaction
    Application framework fitted with common mobile UI patterns
    Interactive performance tuned for mobile devices
  • 55. Resources
    Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.
  • 56. Resources
  • 57.
  • 58. Thanks!
    Twitter: @chrisgriffith