Transcript
  • 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

Recommended