Download - Adobe Flash Platform for Mobile Development
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