1. Hemanth Sharma Adobe Flash Platform Platform Evangelist for Mobile Adobe Systems Development 1

2. Adobe Flash Platform 2

3. Why Flash Platform? Adobe Flash Platform Tooling is Supported on Windows & Macintosh Flash Player Runtime is Supported on Win/Mac/Linux, etc Flash Lite 1.0 - Flash Lite 4.0 Flash Player 10.1 Adobe Integrated Runtime (AIR) Microphone Access Native Processes Hardware Acceleration 3

4. Challenges LAYOUT / USER INTERFACE Screen Sizes, Resolution & Orientation DEVICE INPUT CAPABILITIES Keyboard / Mouse / Keypad / Multitouch / Accelerometer HARDWARE CONSTRAINTS Processor, Memory, Optimization TESTING & SIMULATION Browsers & Devices PACKAGING Web / Standalone / Mobile 4

5. Designing a Mobile Layout FIXED VS FLEXIBLE 5

6. Multiscreen User Interface / Layout FIXED LAYOUT FLUID / FLEXIBLE LAYOUT Less File Size Common / Re-usable UI Elements Less Compromises Common Code Can still manage Common Code Easy Bug Fixes Easy to manage Screen-speci c Multiple Projects Generally 1 Project Layout-speci c UI Elements Heavy File Size Dicult Bug Fixes Non-shareable Project File 6

7. Fixed Layout DESKTOP / TABLET DEVICE 7

8. Flexible Layout LANDSCAPE PORTRAIT 8

9. Weigh your Requirements WEIGH 9

10. Flexible Layout FLASH PROFESSIONAL + FLASH PROJECT - Custom Flexible Layout Class stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; function setPosition(e:Event):void { if (stage.stageWidth < stage.stageHeight) { // Adjust UI Elements for Vertical Layout } else { // Adjust UI Elements for Horizontal Layout } } setPosition(null); stage.addEventListener(Event.RESIZE, setPosition) 10

11. Flexible Layout FLASH BUILDER + FLEX PROJECT - Layout Constraints 11

12. Device Input Capabilities KEYBOARD Desktop PC, Devices (Virtual / Connected / Hardware) KEYPAD Devices ACCELEROMETER Devices / Tablets MULTITOUCH / GESTURE Devices, Tablets, Laptops, Desktop PC 12

13. Accelerometer import flash.sensors.Accelerometer; import flash.events.AccelerometerEvent; If (Accelerometer.isSupported) { var accel:Accelerometer = new Accelerometer(); accel.addEventListener(AccelerometerEvent.UPDATE, update); } function update(e:AccelerometerEvent):void { e.accelerationX; e.accelerationY; e.accelerationZ; } 13

14. Multitouch Gestures import flash.events.TransformGestureEvent; 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; } 14

15. 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 } } 15

16. Approach ird Party CORE Libraries Libraries Smart Layout Desktop Web Mobile Tablet 16

17. Coding Approach FLEX PROJECTS 17

18. Flash Professional + Flash Builder h p://www.tinyurl.com/multiscreen1 h p://www.tinyurl.com/multiscreen2 18

19. Testing & Simulation 19

20. AIR Packaging .air .exe .dmg FLASH PROFESSIONAL CS5 .apk .ipa 20

21. Packaging for Android .apk 21

22. Whats new in Flash Builder (Burrito) & Adobe Flex? New Flex SDK Hero Multiscreen Flex development Optimized Mobile Flex components based on Spark More Spark components 22

23. New Flex Mobile Components 23

24. View Based Apps 24

25. Flex Mobile Work ow .apk 25

26. DEMO & DEVELOPMENT WALKTHROUGH 26

27. Content Optimization & Tips Bitmaps for Performance Vs Vectors for Less Memory Keep bitmaps as small as possible Reduce number of nodes for Vectors Use opaque background for texts Experiment with Anti-aliasing options for text Use only if absolutely necessary (for Mobile Content) Filters Blend Modes Transparency Perspective Distortion 27

28. Content Optimization & Tips Set Frame Rate as low as possible Adjust Frame Rate dynamically Combine Event Handlers functions wherever possible Use EnterFrame over Timers Use Event.RESIZE over StageOrientationEvent.ORIENTATION_CHANGE Place text/graphics on whole pixels (Pixel Boundaries) Avoid object creation inside loops Instantiate one Library Bitmap and re-use the BitmapData Use Loader.unloadAndStop(); - Sounds, Listeners, Timers, HW, etc. 28

29. Video Player Optimization Tips Minimize redraw region during Video playback Reduce frquency of non-video updates (Playhead, etc.) Avoid overlapping graphics / transparent overlays Avoid rotation, skew and perspective projections Do not CacheAsBitmap Avoid lters, ScrollRect, .z Avoid color transforms, alpha Stop EnterFrame handlers and Timers Stop all timelines 29

30. Resources h p:// ex.org/tourmobile h p://labs.adobe.com/technologies/ ex/mobile/ h p://www.tinyurl.com/multiscreen1 h p://www.tinyurl.com/multiscreen2 h p://groups.adobe.com h p:// ashproindia.groups.adobe.com h p://labs.adobe.com h p://tv.adobe.com 30

31. Questions? Web: h p://www.hsharma.com/tech Twi er: @hemanthsharma Facebook h p://www.facebook.com/hemanthsharma 31