Developing for Mobile with Adobe AIR


Published on

This presentation was for Sheridan College's Mobile Summit of May 2011. Some of the material in this presentation is now quite dated.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • How many designers out there? How many developers? How many Flex developers? Developers familiar with Flex 4?
  • supports hardware keys currently only back button, but looks like support for menu button is coming in a later release orientation support keeps track of the device orientation as a Flex state you can create a UI that changes with orientation or you can give it a completely different view provides API to save data between application sessions & phone calls note the data that is saved is not encrypted best not use this for any sensitive data, unless you add your own encryption
  • Developing for Mobile with Adobe AIR

    1. 1. Sheridan Mobile Summit 2011Developing for Mobile with Adobe AIR By Matthew Fabb
    2. 2. Who Am I?Education Sheridans System Analyst/Computer Programmer in 2000 Sheridans Interactive Mulitmedia in 2002I am currently a developer at StickerYouI was a technical editor on Wrox’s Professional Flex 3Authored by: Joseph Balderson, Andrew Trice, Peter Ent, Joe Berkovitz, Tom Sugden, Todd Prekaski, David Hassoun, and Jun Heider.
    3. 3. Adobe & mobileDreamweaver CS5.5 jQuery Mobile integration Allows you to create Android & iOS apps with PhoneGap using HTML, JS & CSSAdobe “Wallaby” Converts Flash into HTML5 content Very basic animations, good for banner ads WebKit only & optimized for iOSAdobe “Edge” prototype HTML5 animation tool Uses jQuery
    4. 4. Adobe & MobileDigital Publishing Suite Creates digital magazines for iOS, Android & PlayBook (possibly for WebOS in the future)Photoshop Touch SDKFlash CS5.5 CS5 targeted iOS & now CS5.5 adds Android & PlaybookFlash Builder 4.5 Includes Flex SDK 4.5 that has components targeted for mobile
    5. 5. Flash & AIR - Reach
    6. 6. Xoom, Galaxy Tab, Droid2, iPod Touch, iPad and in the browser.
    7. 7. What is Flex?Flex is an Adobe open source framework to create Flash applicationsMXML, an XML-based mark up language is used to layout the interface of the applicationActionScript is used with the MXML for interactivityCSS can be used to style the applicationMXML, CSS & ActionScript is compiled into generated ActionScript which is then compiled into a SWF file
    8. 8. Adobe AIRAIR for desktop .AIR file for Mac, Linux, PCAIR for mobile .IPA file for iOS .APK file for Android .BAR file for PlayBook
    9. 9. What is Flex?The Flex compiler is free & open sourceDevelopers can create Flex applications via: Adobes Flash Builder 3rd party tools such as FlashDevelop or FDT Any text editor & the Flex compiler
    10. 10. Flex 4.5Next version of the Flex SDK is 4.5, code named Flex HeroAdditional features were added to regular Flex applications, but the main focus was mobile
    11. 11. Mobile ApplicationSupports hardware keysOrientation supportProvides API to save data between application sessions & interruptions (such as phone calls)Has 2 methods of dealing with multiple DPIs on different devices
    12. 12. 480x320 800x480 854x480 960x640 1024x600 1024x768160 DPI 240 DPI 240 DPI 326 DPI 170 DPI 120 DPI
    13. 13. Goals of Flex 4.5Heros 3 main goals of Flex 4.5 Spark Maturation Flex 4 Spark components still lag behind MX components Likely not to catch up completely in 4.5 Large-Application Development Better RSLs You can no use RSLs with monkey patching More spark componets: DataGrid, Form, PopUpContainer Text Layout Framework 2.0 integration Multi-Screen Development Mobile
    14. 14. What Flex 4.5 Mobile is made up of?Mobile themeMobile ApplicationView & ViewNavigatorMobile Application Components ActionBar Text Components List, Scroller and Touch GesturesMobile Splash ScreenMobile View Menu – For Android menu settings hardware buttonFunctionality to deal with different DPISoft keyboard support
    15. 15. Flex 4.5 app breakdownActionBar can appear above or bellow the view or bothActionBar is consistent while the View changes from screen to screen
    16. 16. Mobile themeSet of skins that are quite different from the regular Spark skinsDesigned and optimized for mobile devicesFor performance reasons all graphics are FXG and interaction is pure ActionScriptMobile skins in the preview for the following regular spark components: Button CheckBox RadioButton TextInput TextArea List Scrollbar More to come before final release
    17. 17. View & ViewNavigatorThe basis of how Flex Hero mobile worksThe main area is a stack where views are popped on and offOnly one view is visible at a timeWhen leaving a view the UI objects are destroyed, but data object persists, keeping the memory footprint smallYou can override the destruction of the UI, if its an expensive UI to build and destroy (detailed chart with lots of visible data)A history is maintained and when the back button is pressed it cycles through the historyTransitions can be easily added from one screen to another
    18. 18. ActionBarTheres 3 areas of the ActionBar navigationContent, titleContent and actionContentAll are optional just like the ActionBar itselfTitleContent default has a label displaying the view title Can be disabled to just have the title of the app or something else similarCan be used with view transitions to animated in-sync with the view
    19. 19. Mobile text componentsOptimized for mobileTLF (Text Layout Framework) is not used and discouraged for mobile A mobile version of TLF is in the works but is not ready yetFlex mobile text components use old school TextField which has better performance over the new FTE (Flash Text Engine)
    20. 20. Additional componentsMobile List, Scroller Similar to regular list, but optimized using MobileItemRenderer & responds to touch eventsSplash screen A graphic or animation to show as your application starts up and initializesMobile View Menu Not in the latest build, but in the specification and is a menu that appears when the physical menu button on Android devices is pressed
    21. 21. Dealing with multiple DPIsFlex Hero has multiple ways displaying content at different DPIsIn dealing with different DPIs, Flex Hero divides it into 3 sections: 160 dpi < 200 240 dpi >= 200 < 280 320 dpi <= 280
    22. 22. Dealing with multiple DPIsApplicaitonDPI Get the app working on one DPI, set that DPI and have the app scale up or down for other DPIsMultiDPIBitmapSource <s:MultiDPIBitmapSource source160dpi="logo.png" source240dpi="logo240.png" source320dpi="logo320.png" />CSS that deals with multiple DPIs