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

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? Native? Flash/Flex? Web? Other?

6. My Mobile App Portfolio

7. Mobile is Everywhere

8. Designing for Mobile

9. Context

10. mobile vs. desktop

11. Orientation

12. Touch 44px 12

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

14. With fingers, come hands…

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

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 GeoLocation Accelerometer Camera Multitouch / Gesture Support Screen Orientation Microphone GPU Acceleration SQLite DB StageWebView No Native Widgets No Multiple Camera Support No Access to Contacts Limited SMS Support

21. ADB – Android Device Debugger installs apps on your device

22. DDMS - Dalvik Debug Monitor for desktop simulation.

23. Download AIR 2.6 http://www.adobe.com/products/air/

25. Accelerometer varaccel:Accelerometer = new Accelerometer(); accel.addEventListener(AccelerometerEvent.UPDATE, update); function update(e:AccelerometerEvent):void { e.accelerationX; e.accelerationY; e.accelerationZ; }

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 } } setPosition(); stage.addEventListener(Event.RESIZE, resizeLayout); function resizeLayout(e:Event):void { setPosition(); }

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

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

32. Limitations

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

34. No Access to Contacts

35. Building Applications

36. Don’t Fear the Timeline

37. Publishing

38. Publishing

39. To the Market…

40. .air .exe .air .dmg .ipa .apk 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: 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. GPU Acceleration blog.theflashblog.com/?p=2386

47. Avoid TLF

48. Test different anti-aliasing techniques (animation, bitmap text...)

49. Avoid frequently-updated text

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); e.currentTarget.stop(); }

53. Flex for Mobile - HERO http://labs.adobe.com/technologies/flexsdk_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. https://market.android.com/details?id=air.adobe.flex.TourDeMobileFlex

56. Resources

58. Thanks! Email: chris.griffith@gmail.com Twitter: @chrisgriffith Blog: http://chrisgriffith.wordpress.com/