An updated version of my recent talk on developing AIR for Android applications with Flash Professional CS5 that I gave to the LAFlash user group

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.

4. My Mobile App Portfolio

5. Mobile is Everywhere

6. Designing for Mobile

7. Context

8. mobile vs. desktop

9. Orientation

10. Touch 44px 10

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

12. With fingers, come hands…

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

15. Data based on respective products published technical specifications Pixels Per Inch (PPI)

16. AIR for Android Overview GeoLocation Accelerometer Camera Multitouch / Gesture Support Screen Orientation Microphone GPU Acceleration SQLiteDB StageWebView No Native Widgets No Multiple Camera Support No Access to Contacts Limited SMS Support

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

19. DDMS - Dalvik Debug Monitor for desktop simulation.

20. Download AIR 2.5 http://www.adobe.com/products/air/

21. Get AIR for Android runtime .apk installed

22. Get the AIR for Android Extension for Flash CS5http://labs.adobe.com/technologies/flashpro_extensionforair/

23. Development Environments Emulator Device

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

25. 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; }

26. 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"; }

27. Hardware Keys stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);function onKeyDown(event:KeyboardEvent):void { //Back Key if (event.keyCode == 94) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff } //Menu Key if (event.keyCode == 95) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }}

28. 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(); }

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

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

31. Limitations

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

33. No Access to Contacts

34. Building Applications http://labs.adobe.com/technologies/flashpro_extensionforair/

35. Don’t Fear the Timeline

36. Publishing

37. Publishing

38. To the Market…

39. .air .exe .air .dmg .ipa .apk AIR Packaging & Distribution Workflow

40. Development Guidelines

41. 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

42. GPU Accleration Set rendering mode to GPU Make sure cacheAsBitmap is set to true on your DisplayObject like this:square.cacheAsBitmap = true;

43. GPU Accleration Make sure to assign a Matrix to the cacheAsBitmapMatrix property on your DisplayObject like this:square.cacheAsBitmapMatrix = new Matrix(); http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html

44. GPU Accleration blog.theflashblog.com/?p=2386

46. Avoid TLF

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

49. 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

50. 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(); }

51. Flex for Mobile - HERO http://labs.adobe.com/technologies/flexsdk_hero/

52. 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

53. 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

54. Resources

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