Introduction to Flex Hero for Mobile Devices
Download as KEY, PDF5 likes1,262 views
An introduction to Flex "Hero" for mobile devices. Covers new mobile features, optimizations, and some Flash Player 10.2 content.
Ad
More Related Content
What's hot (20)
Viewers also liked (7)
Ad
Similar to Introduction to Flex Hero for Mobile Devices (20)
Ad
More from Ryan Stewart (11)
Introduction to Flex Hero for Mobile Devices
- 1. Building Mobile Applications with Flex “Hero”
- 2. Ryan Stewart Developer Evangelist, Adobe [email protected] blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Things I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
- 3. People here smarter than I am
- 4. Agenda Flash on Mobile Devices Introduction to Flex Mobile UI Paradigms with Flex Mobile Optimizing for Flex Mobile Bonus! - Features of Flash Player 10.2
- 6. Flash Player 10.1 In-browser content Games, video Deploy as a SWF, put on the web
- 7. Flash Player 10.1 Adobe AIR In-browser content Mobile applications Games, video Native APIs, extra functionality Deploy as a SWF, put on the web Package to target individual devices
- 8. AIR for Devices .ipa .bar .apk
- 9. AIR for Device Applications are “Native” That means they can be put on app stores NOT that the UI components are native
- 10. So we can use Flex to build native apps
- 11. Issues with Flex on Mobile Devices Complex Components: DataGrids, Charts, Tree Memory Footprint Desktop UI Screen Patterns
- 12. http://designingwebinterfaces.com/ designing-web-interfaces-12- screen-patterns
- 13. Addressing those issues with Flex “Hero”
- 15. What does Mobile Optimized Mean? Rewrote and optimized UIComponent Created a mobile theme which supports: Bigger components CSS Style for enabling touch (Scrollers)
- 16. The Mobile Theme Used automatically when MobileApplication tag is used Includes larger, touch-friendly controls Adds inputMode CSS style for touch
- 17. interactionMode Style mouse touch Fires hover events Creates wider hit area Use scrollbar Hides scrollbar
- 18. interactionMode can in theory be used to swap between devices while keeping the same codebase.
- 19. Mobile UI Patterns in Flex “Hero”
- 20. ViewNavigator The pattern for screens on devices Can define transitions between views Uses push/pop stack to move between views
- 21. ViewNavigator The pattern for screens on devices Can define transitions between views Uses push/pop stack to move between views
- 22. TabNavigator Tab through views Just set up multiple ViewNavigators with the firstView property Can’t use push/pop
- 23. ActionBar navigationContent actionContent titleContent Provides easy access to important features Won’t scroll Can be defined globally or for each view
- 25. Use as Much ActionScript as Possible ItemRenders Skins* Custom Components *In general, a few MXML skins won’t hurt, especially if you use FXG assets
- 26. Graphical Assets In general, the fastest type will be ActionScript and Bitmaps MXML is pretty slow: Don’t use MXML Graphics Don’t use MXML skins with FXG Pre-compiled FXG with AS3 is a pretty good solution
- 27. Use a SplashScreen Flex takes a bit of time to load splashScreenImage is set to be fast and first Provides near-instant user feedback
- 28. View Events Perform data actions AFTER the Transition The View dispatches a CREATION_COMPLETE event before the transition happens Listen for the VIEW_ACTIVATE event, then perform data operations
- 29. View B Added to Display List View A View B Dispatches FlexEvent.ADD View B View B Dispatches FlexEvent.CREATION_COMPLETE View A Dispatches FlexEvent.VIEW_DEACTIVATE Do Transition View A Dispatches FlexEvent.REMOVE View B Dispatches FlexEvent.VIEW_ACTIVATE
- 31. http://labs.adobe.com/downloads/ flashplayer10.html
- 32. New Stuff StageVideo NativeCursor Full Screen Mode for Multiple Monitors Hardware Acceleration for IE9
- 33. StageVideo
- 34. What’s Happening? StageVideo is being hardware accelerated Plus, normally Flash content all runs through the same rendering pipeline StageVideo puts the video on its own layer, so it can’t be transformed, but it performs very well
- 35. Native Cursors http://corlan.org/2010/12/02/working-with- native-custom-cursors-in-flash/
- 36. flash.display.MouseCursor Data Lets you define bitmap sources as native cursors Vastly improved performance over current methods
- 37. Full Screen Mode for Multiple Monitors When something is full screen on one monitor, you can still work on the other without taking it out of fullscreen mode...... The Hulu feature :)
- 38. Hardware acceleration on IE9 We’ve been working with Microsoft to make the Flash/IE9 experience top notch Flash Player 10.2 uses IE9 APIs for hardware acceleration Should see great performance with IE9
- 40. Q&A Ryan Stewart Developer Evangelist, Adobe [email protected] blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart
Editor's Notes
- #2: \n
- #3: http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n