Your SlideShare is downloading. ×
0
Developing AIR for Android using Flash CS5	<br />Chris Griffith<br />
Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work...
Who has built for mobile?<br />
Who uses what?<br />Native?<br />Flash/Flex?<br />Web?<br />Other?<br />
My Mobile App Portfolio<br />
Mobile is Everywhere<br />
Designing for Mobile<br />
Context<br />
mobile vs. desktop<br />
Orientation <br />
Touch<br />44px<br />12<br />
Touch<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them ev...
With fingers, come hands…<br />
Ergonomics<br />How will they touch it?<br />One Thumb?<br />Two Thumbs?<br />Pointer Finger?<br />
Data based on respective products published technical specifications<br />Pixels Per Inch (PPI)<br />
The Adobe® AIR® 2.6 runtime enables developers to use HTML, JavaScript, and ActionScript® to build web applications that r...
AIR for Android Overview<br />GeoLocation<br />Accelerometer<br />Camera<br />Multitouch / Gesture Support<br />Screen Ori...
Creating an Android App: Setup<br /><ul><li>Get the Android SDK: http://developer.android.com/sdk</li></ul>  Allows you to...
 ADB – Android Device Debugger installs apps on your device
 DDMS - Dalvik Debug Monitor for desktop simulation.
Download AIR 2.6 http://www.adobe.com/products/air/
 Get AIR for Android runtime .apk installed</li></li></ul><li>Development Environments<br />Emulator<br />Device<br />
Accelerometer<br />varaccel:Accelerometer = new Accelerometer();<br />accel.addEventListener(AccelerometerEvent.UPDATE, up...
Gestures<br />cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);<br />function onZoom(e:TransformGestureEv...
Geolocation<br />var geo: Geolocation;<br />if (Geolocation.isSupported) {            geo = new Geolocation();            ...
Hardware Keys<br />stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:Keyb...
Orientation <br />stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br />function setPosi...
SQLite Support<br />http://www.dehats.com/drupal/?q=node/58<br />
StageWebView<br />You get a browser in your Flash app!<br />Good solution for<br />Maps<br />Facebook Connect<br />Remote ...
Limitations<br />
No Native Controls<br />http://blog.kevinhoyt.com/2010/05/some-flash-android-components/<br />
No Access to Contacts<br />
Building Applications<br />
Don’t Fear the Timeline<br />
Publishing<br />
Publishing<br />
To the Market…<br />
.air<br />.exe<br />.air<br />.dmg<br />.ipa<br />.apk<br />AIR Packaging & Distribution Workflow<br />
Development Guidelines<br />
Graphics<br />Consider bitmaps over vectors<br />Keep bitmaps as small as possible<br />Minimize number of vectors<br />Te...
GPU Acceleration<br />Set rendering mode to GPU<br />Make sure cacheAsBitmap is set to true on your DisplayObject like <br...
GPU Acceleration<br />cacheAsBitmapMatrix property<br />Make sure to assign a Matrix to the cacheAsBitmapMatrix property<b...
GPU Acceleration<br />blog.theflashblog.com/?p=2386<br />
Text<br /><ul><li>Use opaque background over transparency
Avoid TLF
Test different anti-aliasing techniques (animation, bitmap text...)
 Avoid frequently-updated text
Use appendText vs. text +=</li></li></ul><li>Horizontal?  Vertical?  Both? <br />Content should dictate orientation, but d...
Upcoming SlideShare
Loading in...5
×

Developing AIR for Android with Flash Professional CS5

3,181

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,181
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Foundation of development for mobileAIR for Android Technical tips and tricks
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors
  • Transcript of "Developing AIR for Android with Flash Professional CS5"

    1. 1. Developing AIR for Android using Flash CS5 <br />Chris Griffith<br />
    2. 2. Disclaimer<br />These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.<br />
    3. 3. Who has built for mobile?<br />
    4. 4. Who uses what?<br />Native?<br />Flash/Flex?<br />Web?<br />Other?<br />
    5. 5.
    6. 6. My Mobile App Portfolio<br />
    7. 7. Mobile is Everywhere<br />
    8. 8. Designing for Mobile<br />
    9. 9. Context<br />
    10. 10. mobile vs. desktop<br />
    11. 11. Orientation <br />
    12. 12. Touch<br />44px<br />12<br />
    13. 13. Touch<br />The average fingertip is 3x larger than the hand cursor<br />Make your buttons 3x larger<br />Then make them even larger <br />13<br />
    14. 14. With fingers, come hands…<br />
    15. 15. Ergonomics<br />How will they touch it?<br />One Thumb?<br />Two Thumbs?<br />Pointer Finger?<br />
    16. 16.
    17. 17. Data based on respective products published technical specifications<br />Pixels Per Inch (PPI)<br />
    18. 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.<br />
    19. 19. AIR for Android Overview<br />GeoLocation<br />Accelerometer<br />Camera<br />Multitouch / Gesture Support<br />Screen Orientation<br />Microphone<br />GPU Acceleration<br />SQLite DB<br />StageWebView<br />No Native Widgets<br />No Multiple Camera Support<br />No Access to Contacts<br />Limited SMS Support<br />
    20. 20. Creating an Android App: Setup<br /><ul><li>Get the Android SDK: http://developer.android.com/sdk</li></ul> Allows you to create and install apps on your device<br /><ul><li> Android - SDK Manager to install packages etc.
    21. 21. ADB – Android Device Debugger installs apps on your device
    22. 22. DDMS - Dalvik Debug Monitor for desktop simulation.
    23. 23. Download AIR 2.6 http://www.adobe.com/products/air/
    24. 24. Get AIR for Android runtime .apk installed</li></li></ul><li>Development Environments<br />Emulator<br />Device<br />
    25. 25. Accelerometer<br />varaccel:Accelerometer = new Accelerometer();<br />accel.addEventListener(AccelerometerEvent.UPDATE, update);<br />function update(e:AccelerometerEvent):void<br />{<br />e.accelerationX;<br />e.accelerationY;<br />e.accelerationZ;<br />}<br />
    26. 26. Gestures<br />cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);<br />function onZoom(e:TransformGestureEvent):void<br />{<br />cell.scaleX *= e.scaleX;<br />cell.scaleY = cell.scaleX;<br />}<br />cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);<br />function onRotate(e:TransformGestureEvent):void<br />{<br />cell.rotation += e.rotation;<br />}<br />
    27. 27. Geolocation<br />var geo: Geolocation;<br />if (Geolocation.isSupported) {            geo = new Geolocation();            geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);            geo.setRequestedUpdateInterval(10000);} else {            log.text = "Geolocation feature not supported"; }<br />
    28. 28. Hardware Keys<br />stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:KeyboardEvent):void {<br /> //Back Key  if (event.keyCode ==Keyboard.BACK) {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }<br /> //Menu Key<br />  if (event.keyCode ==Keyboard.MENU) {      event.preventDefault(); // to kill event from running default behavior       //do your own back stuff  }} <br />
    29. 29. Orientation <br />stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br />function setPosition():void<br />{<br />vidHolder.x = stageWidth/2 - vidHolder.width/2;<br />vidHolder.y = stageHeight/2 - vidHolder.height/2;<br /> //If the layout is vertical<br /> if (stage.stageWidth < stage.stageHeight)<br /> {<br /> //Adjust graphics<br /> }<br />}<br />setPosition();<br />stage.addEventListener(Event.RESIZE, resizeLayout);<br />function resizeLayout(e:Event):void<br />{<br />setPosition();<br />}<br />
    30. 30. SQLite Support<br />http://www.dehats.com/drupal/?q=node/58<br />
    31. 31. StageWebView<br />You get a browser in your Flash app!<br />Good solution for<br />Maps<br />Facebook Connect<br />Remote Content<br />
    32. 32. Limitations<br />
    33. 33. No Native Controls<br />http://blog.kevinhoyt.com/2010/05/some-flash-android-components/<br />
    34. 34. No Access to Contacts<br />
    35. 35. Building Applications<br />
    36. 36. Don’t Fear the Timeline<br />
    37. 37. Publishing<br />
    38. 38. Publishing<br />
    39. 39. To the Market…<br />
    40. 40. .air<br />.exe<br />.air<br />.dmg<br />.ipa<br />.apk<br />AIR Packaging & Distribution Workflow<br />
    41. 41. Development Guidelines<br />
    42. 42. Graphics<br />Consider bitmaps over vectors<br />Keep bitmaps as small as possible<br />Minimize number of vectors<br />Test your animations with different qualities of Stage<br />Avoid, if possible:<br /> Filters<br /> Blend modes<br /> Transparency<br /> Perspective distortion<br />
    43. 43. GPU Acceleration<br />Set rendering mode to GPU<br />Make sure cacheAsBitmap is set to true on your DisplayObject like <br />this:square.cacheAsBitmap = true;<br />http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html<br />
    44. 44. GPU Acceleration<br />cacheAsBitmapMatrix property<br />Make sure to assign a Matrix to the cacheAsBitmapMatrix property<br /> on your DisplayObject like this:<br />square.cacheAsBitmapMatrix = new Matrix();<br />http://blog.theflashblog.com/?p=2386<br />
    45. 45. GPU Acceleration<br />blog.theflashblog.com/?p=2386<br />
    46. 46. Text<br /><ul><li>Use opaque background over transparency
    47. 47. Avoid TLF
    48. 48. Test different anti-aliasing techniques (animation, bitmap text...)
    49. 49. Avoid frequently-updated text
    50. 50. Use appendText vs. text +=</li></li></ul><li>Horizontal? Vertical? Both? <br />Content should dictate orientation, but don’t forget about the keyboard.<br />Consider adjusting content based on layout:<br />
    51. 51. Display Objects<br />Use the appropriate type of display object<br />Objects that aren’t interactive, use Shape();<br />trace(getSize(new Shape()));<br /> // output: 216<br />Interactive but no timeline? Use Sprite();<br />trace(getSize(newSprite())); // output: 396<br />Need animation? Use Movieclip();<br />trace(getSize(newMovieClip())); // output: 416<br />
    52. 52. Freeing Movieclips<br />Alpha? RemoveChild? Visible?<br />Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event. <br />runningBoy.addEventListener(Event.REMOVED_FROM_STAGE, deactivate);<br />function deactivate(e:Event):void<br />{<br />e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement);<br />e.currentTarget.stop();<br />}<br />
    53. 53. Flex for Mobile - HERO<br />http://labs.adobe.com/technologies/flexsdk_hero/<br />
    54. 54. Hero in a Nutshell: Mobile Application Development<br />Allow developers to create a single mobile project that will run on multiple mobile environments<br />UI components supporting touchscreen interaction<br />Application framework fitted with common mobile UI patterns<br />Interactive performance tuned for mobile devices<br />
    55. 55. Resources<br />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.<br />https://market.android.com/details?id=air.adobe.flex.TourDeMobileFlex<br />
    56. 56. Resources<br />
    57. 57.
    58. 58. Thanks!<br />Email: chris.griffith@gmail.com<br />Twitter: @chrisgriffith<br />Blog: http://chrisgriffith.wordpress.com/<br />
    1. A particular slide catching your eye?

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

    ×