The document discusses the development of multiscreen experiences using the Adobe Flash platform, addressing challenges like various screen sizes, input capabilities, and hardware constraints. It outlines features of Flash Professional and Flash Player, including improved scripting, performance optimizations, and layout design strategies for flexible and fixed layouts. Additionally, it provides tips for using touch gestures, optimizing resources, and offers links for further resources and projects.

1. Hemanth SharmaPlatform Evangelist, Adobe SystemsDesign & DevelopMultiscreen ExperienceswithAdobe Flash Platform

2. ?MultiscreenWhat ?Why ?

3. Handheld DevicesPersonal ComputersTabletsOther DevicesMultiscreen

4. ChallengesLayout / User InterfaceScreen Sizes, Resolution & OrientationDevice Input CapabilitiesKeyboard / Mouse / Keypad / Multitouch / AccelerometerHardware ConstraintsProcessor, Memory, OptimizationTesting & SimulationBrowsers & DevicesPackaging & DistributionWeb / Standalone / Mobile

5. Adobe Flash PlatformFlash ProfessionalFlash BuilderFlash CatalystFlash Player 10.1AIR 2.x

6. What’s New?Flash ProfessionalFlash Player 10.1

7. Flash Professional CS5Enhanced ScriptingFlash Builder IntegrationCode Snippets PanelCustom Class IntrospectionImproved ProductivityXML based FLAsShare assets via FXGVideo ImprovementsExpressiveNew Text Engine *Spring for Bones *New Deco Tools **Not ideal for mobile

8. Flash Player 10.1New PlatformsFull Flash PlayerMultitouch GesturesAccelerometer InputGeolocationOptimized SWF ManagementGreater PerformanceRendering PerformanceStart-up TimeBattery & CPU OptimizationsMemory ManagementAnd more…Rich Media SupportHTTP StreamingPeer-assisted NetworkingMicrophone AccessDynamic Frame RateAnd more…

9. Fixed Vs FlexibleDesigning a Multiscreen Layout

10. Multiscreen User Interface / LayoutFluid / Flexible LayoutCommon / Re-usable UI ElementsCommon CodeEasy Bug FixesEasy to manageGenerally 1 ProjectHeavy File SizeNon-shareable Project FileFixed LayoutLess File SizeLess CompromisesCan still manage Common CodeThus making it Easy to fix BugsScreen-specific Multiple ProjectsLayout-specific UI ElementsDifficult Bug Fixes

11. Fixed LayoutDesktop / TabletDevice

12. Flexible LayoutLandscapePortrait

13. WeighWeigh your “Requirements”

14. Flexible LayoutFlash Professional + Flash Project - Custom Flexible Layout Classstage.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 LayoutFlash Builder + Flex Project - Layout Constraints

16. Flexible LayoutWeb Application – Flash Professional CS5

17. Flexible LayoutAIR Publish SettingsAIR Application – Flash Professional CS5Project-app.xmlAIR Application – Flash Builder (Flex)

18. Device Input CapabilitiesKeyboardDesktop PC, Devices (Virtual / Connected / Hardware)KeypadDevicesAccelerometerDevices / TabletsMultitouch / GestureDevices, Tablets, Laptops, Desktop PC

19. Accelerometerimport 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 Gesturesimport 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 Keysstage.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. ApproachCORE LibrariesThird PartyLibrariesSmart LayoutDesktopWebMobileTablet

23. Coding ApproachFlex Projects

24. Flash Professional + Flash Builderhttp://www.bit.ly/multiscreen1http://www.bit.ly/multiscreen2

25. Touch UI TipsGesturesUse touch gestures, but do not complicate

26. Touch UI TipsGesturesUse touch gestures, but do not complicateDesign for real hand sizes45px – 50px45px

27. Touch UI TipsGesturesUse touch gestures, but do not complicateDesign for real hand sizes45px – 50pxUse Touch FeedbackProvide Haptics wherever necessary

28. Testing & Simulation

29. AIR Packaging.air.exe.dmgFlash Professional CS5.apk

30. Packaging for Android.apk

31. Demo

32. Content Optimization & TipsBitmaps for Performance Vs Vectors for Less Memory

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) –FiltersBlend ModesTransparencyPerspective Distortion