Your SlideShare is downloading. ×
0
Developing AIR for Mobileusing Flash Professional CS5.5          @ChrisGriffith
DisclaimerThese opinions and thoughts are my own, and  may or may not reflect the opinions of the  company that I work for.
Mobile is Everywhere
Context
mobile vs. desktop
Orientation
Touch44px
TouchThe average fingertip is 3x largerthan the hand cursorMake your buttons 3x largerThen make them even larger
With fingers, come hands…
Ergonomics    How will they touch it?    • One Thumb?    • Two Thumbs?    • Pointer Finger?
Pixels Per Inch (PPI)Device                                                         Resolution   PPI   PhysicalNexus One/ ...
What is Adobe AIR?Adobe AIR allows designers anddevelopers by providing a consistentand flexible developmentenvironment fo...
AIR for Mobile Overview           •   GeoLocation           •   Accelerometer           •   Camera           •   Multitouc...
Creating an Android App: Setup     Get the Android SDK: http://developer.android.com/sdk         ADB – Android Device Debu...
Creating an iOS App: Setup   Get the iOS SDK: http://developer.apple.com/programs/ios/   Allows you to create and install ...
Updating AIR SDKwww.swfgeek.net/2011/09/26/targeting-flash-player-11-rc1-air-3-rc1-in-flash-professional-cs5-5/
Development EnvironmentsEmulator          Device
Accelerometervar accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);funct...
Gesturescell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);function onZoom(e:TransformGestureEvent):void{  ...
Geolocationvar geo: Geolocation;if (Geolocation.isSupported) {         geo = new Geolocation();         geo.addEventListen...
Hardware Keysstage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:KeyboardEv...
Orientationstage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;function setPosition():void{vidHold...
SQLite Supporthttp://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 RuntimeDevelopers now have more flexibility with theirapp packaging options and can automaticallypackage AIR 3 wit...
ANEsUse native code to take advantage of the sameplatform- and device-specific native capabilitiesand APIs available to na...
Limitations
No Native Controlshttp://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 ...
GPU Acceleration                                Set rendering mode to GPU    Make sure cacheAsBitmap is set to true on you...
GPU Acceleration                               cacheAsBitmapMatrix property    Make sure to assign a Matrix to the cacheAs...
Text Use opaque background over  transparency Avoid TLF Test different anti-aliasing techniques  (animation, bitmap tex...
Display ObjectsUse the appropriate type of display object     Objects that aren’t interactive, use Shape();        trace(g...
Freeing MovieclipsAlpha? RemoveChild? Visible?Even when removed from the display list, the movie clip still dispatchesthe ...
Resources
Thanks!chris.griffith@gmail.com@chrisgriffithhttp://chrisgriffith.wordpress.com/
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
Upcoming SlideShare
Loading in...5
×

Developing AIR for Mobile with Flash Professional CS5.5

5,212

Published on

This is a presentation I gave at FlashTent.org

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,212
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors
  • Transcript of "Developing AIR for Mobile with Flash Professional CS5.5"

    1. 1. Developing AIR for Mobileusing Flash Professional CS5.5 @ChrisGriffith
    2. 2. DisclaimerThese opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
    3. 3. Mobile is Everywhere
    4. 4. Context
    5. 5. mobile vs. desktop
    6. 6. Orientation
    7. 7. Touch44px
    8. 8. TouchThe average fingertip is 3x largerthan the hand cursorMake your buttons 3x largerThen make them even larger
    9. 9. With fingers, come hands…
    10. 10. Ergonomics How will they touch it? • One Thumb? • Two Thumbs? • Pointer Finger?
    11. 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. 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. 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. 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. 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. 16. Updating AIR SDKwww.swfgeek.net/2011/09/26/targeting-flash-player-11-rc1-air-3-rc1-in-flash-professional-cs5-5/
    17. 17. Development EnvironmentsEmulator Device
    18. 18. Accelerometervar accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);function update(e:AccelerometerEvent):void{ e.accelerationX; e.accelerationY; e.accelerationZ;}
    19. 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. 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. 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. 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. 23. SQLite Supporthttp://www.dehats.com/drupal/?q=node/58
    24. 24. StageWebView• You get a browser in your Flash app!• Good solution for – Maps – Facebook Connect – Remote Content
    25. 25. StageText
    26. 26. StageVideo
    27. 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. 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. 29. Limitations
    30. 30. No Native Controlshttp://blog.kevinhoyt.com/2010/05/some-flash-android-components/
    31. 31. No Access to Contacts
    32. 32. Building Applications
    33. 33. Don’t Fear the Timeline
    34. 34. Publishing - Android
    35. 35. Publishing - Android
    36. 36. Publishing - iOS
    37. 37. Publishing - iOS
    38. 38. To the Market…
    39. 39. Development Guidelines
    40. 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. 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. 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. 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. 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. 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. 46. Resources
    47. 47. Thanks!chris.griffith@gmail.com@chrisgriffithhttp://chrisgriffith.wordpress.com/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×