Flash Builder and Flex Future - Multiscreen Development

5,323 views
5,117 views

Published on

Mobile development on the Flash Platform. Flex and Flash Builder have some mobile-specific technology and paradigms that make it easy to create cross-vendor, cross-os mobile applications.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,323
On SlideShare
0
From Embeds
0
Number of Embeds
735
Actions
Shares
0
Downloads
77
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/\n\n
  • Flash Builder and Flex Future - Multiscreen Development

    1. 1. Flash Builder and Flex Future:Multiscreen Apps with “Burrito” and “Hero”
    2. 2. Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartBased in SeattleThings I Like: Beer Mountaineering/Hiking/Backpacking Geolocation/Mapping stuff
    3. 3. Mobile Flash Development
    4. 4. Flash Player 10.1In-browser content Games, video Deploy as a SWF, put on the web
    5. 5. Flash Player 10.1 Adobe AIRIn-browser content Mobile applications Games, video Native APIs, extra functionality Deploy as a SWF, put on the web Package to target individual devices
    6. 6. Device Landscape Desktop Netbooks Android RIM PlayBook Apple iOS Google TV Televisions WebOS
    7. 7. AIR for Device Applications are “Native”That means they can be put on app stores NOT that the UI components are native
    8. 8. Building Multiscreen Applications with Flash Builder
    9. 9. Issues with Flex on Mobile Devices Complex Components: DataGrids, Charts, Tree Memory Footprint Desktop UI Screen Patterns
    10. 10. Solving Mobile UI Paradigms with Flex “Hero”
    11. 11. Mobile-Optimized Components
    12. 12. Mobile/Touch Friendly Components Bigger labelsControls fit for fingers 40 px Auto-show Scrollbars to save screen real estate
    13. 13. Pixel-Density Flex creates components that will resize based on how many pixels per inch the device supports
    14. 14. The Mobile ThemeUsed automatically with mobile projectsIncludes larger, touch-friendly controls Adds inputMode CSS style for touch
    15. 15. interactionMode Style mouse touchFires hover events Creates wider hit area Use scrollbar Hides scrollbar
    16. 16. interactionMode can in theory be used to swap between devices while keeping the same codebase.
    17. 17. Mobile UI Patterns in Flex “Hero”
    18. 18. Dealing with Screens
    19. 19. Dealing with Screens
    20. 20. Dealing with Screens
    21. 21. ViewNavigator The pattern for screens on devices for sequential navigation Can define transitions between views Uses push/pop stack to move between views
    22. 22. ViewNavigator The pattern for screens on devices for sequential navigation Can define transitions between views Uses push/pop stack to move between views
    23. 23. Tabbed UI Used for navigationwhen sequence doesn’t matter
    24. 24. TabNavigator Tab through views Just set up multiple ViewNavigators with the firstView property Can’t use push/pop
    25. 25. Global Navigation and “Breadcrumbs”
    26. 26. ActionBarnavigationContent actionContent titleContent Provides easy access to important features Won’t scroll Can be defined globally or for each view
    27. 27. Demo:Flex Mobile in Action
    28. 28. Deploying Mobile Applications With Flash Builder “Burrito”
    29. 29. Mobile Debug Panel Allows you to set up debuggingvia the desktop or debugging via the device Has built-in device profiles for screen resolutionsDevelopers can build their owndevice profiles for resolutions that aren’t supported
    30. 30. DebuggingDebug over USB or Wifi (USB isbetter - with Wifi you have to be on the same network) Use trace statements, set breakpoints, it all works Flash Builder compiles anddeploys a debug version of the app to the phone for you
    31. 31. DeploymentFlash Builder walks you throughthe deployment steps including creating a certificate (forAndroid) and builds a native file (.apk, .bar, etc)Uses the same “Export releasebuild” that Flex developers use today
    32. 32. Optimization Techniques
    33. 33. 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
    34. 34. Graphical Assets In general, the fastest typewill be ActionScript and Bitmaps MXML is pretty slow: Don’t use MXML GraphicsDon’t use MXML skins with FXG Pre-compiled FXG with AS3 is a pretty good solution
    35. 35. Use a SplashScreen Flex takes a bit of time to loadsplashScreenImage is set to be fast and first Provides near-instant user feedback
    36. 36. View EventsPerform data actions AFTER the Transition The View dispatches aCREATION_COMPLETE eventbefore the transition happensListen for the VIEW_ACTIVATE event, then perform data operations
    37. 37. Developing Apps for the
    38. 38. Three Ways to Develop in Flash on the PlayBook ActionScript Projects Tooling support in Builder and Flash Pro Flex Projects Best support for mobile patterns Most robust components Native Projects QNX components used to build core applications
    39. 39. Getting Setup withthe PlayBook SDK
    40. 40. Download the PlayBook AIR SDKDownload the PlayBook Simulator Install the Flash Builder Plug-in
    41. 41. Available as a VMWare ImageHas a Developer mode so you can debugon the deviceTest fonts/features/etc on the device
    42. 42. PlayBook provides the QNX framework and APIs
    43. 43. ComponentsThe native components for the PlayBookInclude base components like buttons, lists, etcAlso include higher level components likeLoginDialogue, MediaPlayer, etc
    44. 44. Demo:Deploying an application to the PlayBook
    45. 45. Native PlayBook APIs
    46. 46. qnx.system.* qnx.system.Device Device information (hardwareID, vendorID) Battery information (state, level,etc) qnx.system.QNXApplication Swipe events for OS
    47. 47. qnx.media.*qnx.media.StageWebView Webkit component for PlayBook Display HTML in Flash-based PlayBook appsqnx.media.MediaPlayer Supports hardware accelerated media Includes support for extra codecs
    48. 48. Bringing it all together
    49. 49. Conclusion Mobile development means new design tricksCritical to be able to deploy to multiple platforms Leverage device specific features Think mobile first
    50. 50. Q&ARyan StewartDeveloper Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart

    ×