New to mobile development? Wondering how mobile applications are built? This presentation will walk you the entire development process of the AIR for Android application from design to deployment. Chris Griffith will show you how he designed and built the application using a variety of tools and techniques.

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 SQLite DB 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 import flash.sensors.Accelerometer; import flash.events.AccelerometerEvent; Accelerometer.isSupported; 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. Limitations

31. No Native Controls

32. No Access to Contacts

33. Building Applications

34. Don’t Fear the Timeline

35. Publishing

36. Publishing

37. To the Market…

38. .air .exe .air (swf, jpg, mp3) .dmg .ipa .apk AIR Packaging & Distribution Workflow

39. Development Guidelines

40. 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. Avoid TLF

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

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

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

47. Flex for Mobile - HERO

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

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