Write one code, ActionScript, and publish your application to multiple screens right from mobiles, desktops (standalone), Web and other devices. Learn the aspects of multiscreen coding using Flash Professional, emulate in Device Central and make use of device specific features. Understand the concepts of laying out visuals across for multiple screens.

1. Hemanth Sharma Platform Evangelist, Adobe Systems Design & DevelopMultiscreen ExperienceswithAdobe Flash Platform

2. ? Multiscreen What ? Why ?

3. Handheld Devices Personal Computers Tablets Other Devices Multiscreen

4. Challenges Layout / User InterfaceScreen Sizes, Resolution & Orientation Device Input CapabilitiesKeyboard / Mouse / Keypad / Multitouch / Accelerometer Hardware ConstraintsProcessor, Memory, Optimization Testing & SimulationBrowsers & Devices Packaging & DistributionWeb / Standalone / Mobile

5. Adobe Flash Platform Flash Professional Flash Builder Flash Catalyst Flash Player 10.1 AIR 2.x

6. What’s New? Flash Professional Flash Player 10.1

7. Flash Professional CS5 Enhanced Scripting Flash Builder Integration Code Snippets Panel Custom Class Introspection Improved Productivity XML based FLAs Share assets via FXG Video Improvements Expressive New Text Engine * Spring for Bones * New Deco Tools * * Not ideal for mobile

8. Flash Player 10.1 New Platforms Full Flash Player Multitouch Gestures Accelerometer Input Geolocation Optimized SWF Management Greater Performance Rendering Performance Start-up Time Battery & CPU Optimizations Memory Management And more… Rich Media Support HTTP Streaming Peer-assisted Networking Microphone Access Dynamic Frame Rate And more…

9. Fixed Vs Flexible Designing a Multiscreen Layout

10. Multiscreen User Interface / Layout Fluid / Flexible Layout Common / Re-usable UI Elements Common Code Easy Bug Fixes Easy to manage Generally 1 Project Heavy File Size Non-shareable Project File Fixed Layout Less File Size Less Compromises Can still manage Common Code Thus making it Easy to fix Bugs Screen-specific Multiple Projects Layout-specific UI Elements Difficult Bug Fixes

11. Fixed Layout Desktop / Tablet Device

12. Flexible Layout Landscape Portrait

13. Weigh Weigh your “Requirements”

14. 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)

15. Flexible Layout Flash Builder + Flex Project - Layout Constraints

16. Flexible Layout Web Application – Flash Professional CS5

17. Flexible Layout AIR Publish Settings AIR Application – Flash Professional CS5 Project-app.xml AIR Application – Flash Builder (Flex)

18. Device Input Capabilities KeyboardDesktop PC, Devices (Virtual / Connected / Hardware) KeypadDevices AccelerometerDevices / Tablets Multitouch / GestureDevices, Tablets, Laptops, Desktop PC

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

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

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

22. Approach CORE Libraries Third PartyLibraries Smart Layout Desktop Web Mobile Tablet

23. Coding Approach Flex Projects

24. Flash Professional + Flash Builder http://www.bit.ly/multiscreen1 http://www.bit.ly/multiscreen2

25. Touch UI Tips GesturesUse touch gestures, but do not complicate

26. Touch UI Tips GesturesUse touch gestures, but do not complicate Design for real hand sizes45px – 50px 45px

27. Touch UI Tips GesturesUse touch gestures, but do not complicate Design for real hand sizes45px – 50px Use Touch FeedbackProvide Haptics wherever necessary

28. Testing & Simulation

29. AIR Packaging .air .exe .dmg Flash Professional CS5 .apk

30. Packaging for Android .apk

31. Demo

33. Keep bitmaps as small as possible

34. Reduce number of nodes for Vectors

35. Use opaque background for texts

36. Experiment with Anti-aliasing options for text

37. Use only if absolutely necessary (for Mobile Content) –Filters Blend Modes Transparency Perspective Distortion

39. Adjust Frame Rate dynamically

40. Combine Event Handlers functions wherever possible

41. Use EnterFrame over Timers

42. Use Event.RESIZE over StageOrientationEvent.ORIENTATION_CHANGE

43. Place text/graphics on whole pixels (Pixel Boundaries)

44. Avoid object creation inside loops

45. Instantiate one Library Bitmap and re-use the BitmapData

47. Reduce frquency of non-video updates (Playhead, etc.)

48. Avoid overlapping graphics / transparent overlays

49. Avoid rotation, skew and perspective projections

50. Do not CacheAsBitmap

51. Avoid filters, ScrollRect, .z

52. Avoid color transforms, alpha

53. Stop EnterFrame handlers and Timers

55. http://bit.ly/multiscreen2

56. http://www.hsharma.com/projects/photobooth

57. http://groups.adobe.com

58. http://flashproindia.groups.adobe.com

60. Thank You Twitter:@hemanthsharma Facebook:http://www.facebook.com/hemanthsharma Blog:http://www.hsharma.com/tech