Android Mobile Development &                   e Flash Platform
      Mihai Corlan | Developer Evangelist | h p://corlan.org




© 2011 Adobe Systems Incorporated.
About Me

  §    Adobe Worldwide Developer Evangelist (since 2008)
  §    Flash Builder Engineer 2006-2008
  §    Web Developer 2000 - 2006
  §    Blog: h p://corlan.org
  §    Twi er: h p://twi er.com/mcorlan
  §    Email: mihai.corlan@adobe.com




© 2011 Adobe Systems Incorporated.
   2
Agenda

  §    Adobe Flash Platform and mobile devices
  §    Examples of Android Apps created using AIR
  §    Code and Work ows – Flex and AIR




© 2011 Adobe Systems Incorporated.
What’s Multi-Screen Revolution Anyway?




                                     Internet




© 2011 Adobe Systems Incorporated.
Multi-screen and Adobe AIR




              Native                 Native   Native   Native   Native   Native
              App                    App      App      App      App      App




© 2011 Adobe Systems Incorporated.
Multi-screen and Adobe AIR



           Flex / ActionScript




            Adobe AIR




© 2011 Adobe Systems Incorporated.
Android




© 2011 Adobe Systems Incorporated.
AIR apps for Android

  §    RIA / Connected Apps / Video
  §    Enterprise Apps
  §    Remote Controls Apps for Desktop Apps
  §    Games




  More than 1,000 apps built using Adobe AIR are available on Android Market:
  h p://www.appbrain.com/apps/popular/adobe-air/

© 2011 Adobe Systems Incorporated.
Examples of AIR for Android Applications




© 2011 Adobe Systems Incorporated.
e Flash Platform

       Applications, Content and Video




          Tools to Design and Develop                     Framework        Clients            Services                Servers




        Adobe® Flash® CS5 Adobe® Flash® Builder™          Adobe® Flex ®   Adobe® AIR®        Adobe® Flash®        Adobe® Flash® Media
          Professional         “Burrito”                     “Hero”          2.6           Platform Services         Server Family




                             Adobe® Flash®                                Adobe® Flash®    Adobe® LiveCycle®       Adobe® LiveCycle®
                               Catalyst™                                     Player       Collaboration Service      Data Services
                               “Panini”                                       10.2


                                                             Integrating with
                                                           the Flash Platform
           Creative Suite 5          ColdFusion Builder
© 2011 Adobe Systems Incorporated.
How do you build AIR Apps for Android?




                       Adobe AIR SDK                             Flex “Hero”




     LiveCycle                                                                 LiveCycle
    Collaboration                                                                 Data
       Service                                                                  Services
                                       Flash Builder “Burrito”

© 2011 Adobe Systems Incorporated.
e Flex “Hero” 4.5 framework and ActionScript

§    An open source framework of ActionScript classes
§    Rich library of UI components
§    Other “utilities” that speed up app development
      (services, validators, data binding, layout managers, …)
§    MXML – a declarative language for quickly layout your app




                                                                  Flex “Hero”




 © 2011 Adobe Systems Incorporated.
Tools – Flash Builder “Burrito” 4.5

  §    Eclipse based IDE for Flex and ActionScript development
  §    Support for design view and local testing
  §    Support for packaging the app as an APK le
  §    Deploy the app to connected Android devices
  §    Debugging the app on the device or desktop simulator




                                                                  Flash Builder


  Download from h p://labs.adobe.com
  Free for educational / 60-day trial period

© 2011 Adobe Systems Incorporated.
AIR APIs on Android

  §    Camera and Microphone access
  §    Accelerometer
  §    GPS
  §    Multitouch/Gestures
  §    Screen Orientation / Fullscreen
  §    Phone/SMS/Email/Browser/Android Market
  §    Camera (Including Camera Roll Support) & Mic
  §    StageWebView
                                                       Adobe AIR
  §    Session Cache Support – Restore App State
  §    Hardware Bu ons Support
  §    Local database (SQLite)
  §    …
© 2011 Adobe Systems Incorporated.
Live Coding – a simple AIR App for Android




© 2011 Adobe Systems Incorporated.
Se ing Android Permissions




© 2011 Adobe Systems Incorporated.
Se ing Android Permissions

   Use Application Descriptor File -> AndroidManifest.xml le



                         <android><manifestAdditions><![CDATA[

                                      <manifest android:installLocation="auto">
                                      <uses-permission android:name="android.permission.INTERNET"/>

                                      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

                                      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

                                      <uses-permission android:name="android.permission.WAKE_LOCK" />

                                      <uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>

                         </manifest>]]></manifestAdditions>

                         </android>




© 2011 Adobe Systems Incorporated.
Options for Building Mobile AIR Apps using Burrito

  §    ActionScript Mobile Project (no MXML)
  §    Flex Mobile Project:
        §    Blank – s:Application
        §    Mobile Project - s:MobileApplication
        §    Mobile Project – s:TabbedMobileApplication




© 2011 Adobe Systems Incorporated.
MobileApplication vs. TabbedMobileApplication




© 2011 Adobe Systems Incorporated.
Flex Mobile Components

  Screen Metaphor

                             Application First Screen   Second Screen




© 2011 Adobe Systems Incorporated.
Flex Mobile Components - ViewNavigator

  Using Flex’s s:MobileApplication or s:TabbedMobileApplication you get screen
  management for free


  §    navigator.push(NewScreen, data)    - add new screen
  §    navigator.popView()                - go to previous screen
  §    navigator. popToFirstView()        - go to rst view
  §    navigator.activeView               - retrieve active view




© 2011 Adobe Systems Incorporated.
Architecture of Flex Mobile App


                                     MobileApplication
 Support for
 screen navigation;
                                     ViewNavigator
 Application persistence
 between sessions
                                       ActionBar




                                          View


   Application UI:
   - screens/lists/bu ons/titles



© 2011 Adobe Systems Incorporated.
View Lifecycle



                                                        ?

                                     Another           Data
        View
                                      View


                                                     Destroyed
              Created
             Destroyed                Destroyed
                                       Created


                                                  data = yourData;
                                                  destructionPolicy =”none"




© 2011 Adobe Systems Incorporated.
View and ActionBar Components

                                     Hide the Action Bar:
                                     actionBarVisible = false;

                                     Overlay the Action Bar:
                                     overlayControls = true;




© 2011 Adobe Systems Incorporated.
Mobile Components

   §    Bu on                       Touch Enabled
   §    CheckBox                    Mobile Skins: ActionScript
   §    RadioBu on                  based skins and FXG
   §    TextInput                   Other components will come
   §    TextArea
   §    List
   §    ScrollBar




© 2011 Adobe Systems Incorporated.
Lists and Item Renderers




   MobileItemRenderer                     MobileIconItemRenderer


   <s:MobileItemRenderer label="Beer"/>   <s:MobileIconItemRenderer
                                             labelField="label"
                                             messageField="message"
                                             iconField="icon"
                                             decoratorClass="phoneIcon"/>




© 2011 Adobe Systems Incorporated.
Splash Screen




          <s:MobileApplication
                  splashScreenImage="@Embed(source='assets/splash-screen.png')"

© 2011 Adobe Systems Incorporated.
Helper Apps for Mobile Development

         Tour de Mobile Flex           Adobe AIR Launchpad




            Android AIR App            AIR app for Desktop



© 2011 Adobe Systems Incorporated.
What’s Next?

  §    3D APIs GPU Accelerated for Flash Player & AIR on desktop and mobiles
        (Direct3D 9 and OpenGL ES)
  §    Native extensions for AIR for Android
  §    Extending Flex “Hero” to iOS and BlackBerry Tablet OS




© 2011 Adobe Systems Incorporated.
Resources

  §    MP3 Remote Control for Android:
        h p://corlan.org/2010/07/02/creating-multi-screen-apps-for-android-and-desktop-
        using-air/
  §    LiveCycle Collaboration Service showcase for Android tablets:
        h p://www.riagora.com/2011/03/lccs-showcase-on-your-tablet/
  §    Mobile development with Flash Builder Burrito and Hero:
        h p://www.adobe.com/devnet/ ex/articles/mobile_development_hero_burrito.html
  §    Ge ing Flash Builder “Burrito”:
        h p://labs.adobe.com
  §    Tour de Mobile Flex:
        h p:// ex.org/tourmobile
  §    MAX 2010 Sessions Recordings (Channels > MAX 2010):
        h p://tv.adobe.com




© 2011 Adobe Systems Incorporated.
ank You!
                                        h p://corlan.org
                                     mihai.corlan@adobe.com




© 2011 Adobe Systems Incorporated.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, the Adobe PDF logo, AIR, ColdFusion, ColdFusion Builder, Flash, Flash Builder, the Flash logo, Flex, LiveCycle, and Reader are eithe
                        registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.
                        © 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 9102xxxx 3/10


Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, ActionScript, AIR, Flash, Flash Builder, Flash Catalyst, the Flash logo, Flex, and LiveCycle are either registered trademarks or trademarks of Adobe
Systems Incorporated in the United States and/or other countries. Microso and Windows are either registered trademarks or trademarks of Microso Corporation in the United States and/or other
countries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the property of their respective owners.
Printed in the USA. 91023957 3/10

© 2011 Adobe Systems Incorporated.
Agenda



                                     Flash Platform




                                                      Mobile
                                                      Apps




© 2011 Adobe Systems Incorporated.

Android Development with Flash Platform

  • 1.
    Android Mobile Development& e Flash Platform Mihai Corlan | Developer Evangelist | h p://corlan.org © 2011 Adobe Systems Incorporated.
  • 2.
    About Me §  Adobe Worldwide Developer Evangelist (since 2008) §  Flash Builder Engineer 2006-2008 §  Web Developer 2000 - 2006 §  Blog: h p://corlan.org §  Twi er: h p://twi er.com/mcorlan §  Email: mihai.corlan@adobe.com © 2011 Adobe Systems Incorporated. 2
  • 3.
    Agenda §  Adobe Flash Platform and mobile devices §  Examples of Android Apps created using AIR §  Code and Work ows – Flex and AIR © 2011 Adobe Systems Incorporated.
  • 4.
    What’s Multi-Screen RevolutionAnyway? Internet © 2011 Adobe Systems Incorporated.
  • 5.
    Multi-screen and AdobeAIR Native Native Native Native Native Native App App App App App App © 2011 Adobe Systems Incorporated.
  • 6.
    Multi-screen and AdobeAIR Flex / ActionScript Adobe AIR © 2011 Adobe Systems Incorporated.
  • 7.
    Android © 2011 AdobeSystems Incorporated.
  • 8.
    AIR apps forAndroid §  RIA / Connected Apps / Video §  Enterprise Apps §  Remote Controls Apps for Desktop Apps §  Games More than 1,000 apps built using Adobe AIR are available on Android Market: h p://www.appbrain.com/apps/popular/adobe-air/ © 2011 Adobe Systems Incorporated.
  • 9.
    Examples of AIRfor Android Applications © 2011 Adobe Systems Incorporated.
  • 10.
    e Flash Platform Applications, Content and Video Tools to Design and Develop Framework Clients Services Servers Adobe® Flash® CS5 Adobe® Flash® Builder™ Adobe® Flex ® Adobe® AIR® Adobe® Flash® Adobe® Flash® Media Professional “Burrito” “Hero” 2.6 Platform Services Server Family Adobe® Flash® Adobe® Flash® Adobe® LiveCycle® Adobe® LiveCycle® Catalyst™ Player Collaboration Service Data Services “Panini” 10.2 Integrating with the Flash Platform Creative Suite 5 ColdFusion Builder © 2011 Adobe Systems Incorporated.
  • 11.
    How do youbuild AIR Apps for Android? Adobe AIR SDK Flex “Hero” LiveCycle LiveCycle Collaboration Data Service Services Flash Builder “Burrito” © 2011 Adobe Systems Incorporated.
  • 12.
    e Flex “Hero”4.5 framework and ActionScript §  An open source framework of ActionScript classes §  Rich library of UI components §  Other “utilities” that speed up app development (services, validators, data binding, layout managers, …) §  MXML – a declarative language for quickly layout your app Flex “Hero” © 2011 Adobe Systems Incorporated.
  • 13.
    Tools – FlashBuilder “Burrito” 4.5 §  Eclipse based IDE for Flex and ActionScript development §  Support for design view and local testing §  Support for packaging the app as an APK le §  Deploy the app to connected Android devices §  Debugging the app on the device or desktop simulator Flash Builder Download from h p://labs.adobe.com Free for educational / 60-day trial period © 2011 Adobe Systems Incorporated.
  • 14.
    AIR APIs onAndroid §  Camera and Microphone access §  Accelerometer §  GPS §  Multitouch/Gestures §  Screen Orientation / Fullscreen §  Phone/SMS/Email/Browser/Android Market §  Camera (Including Camera Roll Support) & Mic §  StageWebView Adobe AIR §  Session Cache Support – Restore App State §  Hardware Bu ons Support §  Local database (SQLite) §  … © 2011 Adobe Systems Incorporated.
  • 15.
    Live Coding –a simple AIR App for Android © 2011 Adobe Systems Incorporated.
  • 16.
    Se ing AndroidPermissions © 2011 Adobe Systems Incorporated.
  • 17.
    Se ing AndroidPermissions Use Application Descriptor File -> AndroidManifest.xml le <android><manifestAdditions><![CDATA[ <manifest android:installLocation="auto"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="android.permission.DISABLE_KEYGUARD"/> </manifest>]]></manifestAdditions> </android> © 2011 Adobe Systems Incorporated.
  • 18.
    Options for BuildingMobile AIR Apps using Burrito §  ActionScript Mobile Project (no MXML) §  Flex Mobile Project: §  Blank – s:Application §  Mobile Project - s:MobileApplication §  Mobile Project – s:TabbedMobileApplication © 2011 Adobe Systems Incorporated.
  • 19.
    MobileApplication vs. TabbedMobileApplication ©2011 Adobe Systems Incorporated.
  • 20.
    Flex Mobile Components Screen Metaphor Application First Screen Second Screen © 2011 Adobe Systems Incorporated.
  • 21.
    Flex Mobile Components- ViewNavigator Using Flex’s s:MobileApplication or s:TabbedMobileApplication you get screen management for free §  navigator.push(NewScreen, data) - add new screen §  navigator.popView() - go to previous screen §  navigator. popToFirstView() - go to rst view §  navigator.activeView - retrieve active view © 2011 Adobe Systems Incorporated.
  • 22.
    Architecture of FlexMobile App MobileApplication Support for screen navigation; ViewNavigator Application persistence between sessions ActionBar View Application UI: - screens/lists/bu ons/titles © 2011 Adobe Systems Incorporated.
  • 23.
    View Lifecycle ? Another Data View View Destroyed Created Destroyed Destroyed Created data = yourData; destructionPolicy =”none" © 2011 Adobe Systems Incorporated.
  • 24.
    View and ActionBarComponents Hide the Action Bar: actionBarVisible = false; Overlay the Action Bar: overlayControls = true; © 2011 Adobe Systems Incorporated.
  • 25.
    Mobile Components §  Bu on Touch Enabled §  CheckBox Mobile Skins: ActionScript §  RadioBu on based skins and FXG §  TextInput Other components will come §  TextArea §  List §  ScrollBar © 2011 Adobe Systems Incorporated.
  • 26.
    Lists and ItemRenderers MobileItemRenderer MobileIconItemRenderer <s:MobileItemRenderer label="Beer"/> <s:MobileIconItemRenderer labelField="label" messageField="message" iconField="icon" decoratorClass="phoneIcon"/> © 2011 Adobe Systems Incorporated.
  • 27.
    Splash Screen <s:MobileApplication splashScreenImage="@Embed(source='assets/splash-screen.png')" © 2011 Adobe Systems Incorporated.
  • 28.
    Helper Apps forMobile Development Tour de Mobile Flex Adobe AIR Launchpad Android AIR App AIR app for Desktop © 2011 Adobe Systems Incorporated.
  • 29.
    What’s Next? §  3D APIs GPU Accelerated for Flash Player & AIR on desktop and mobiles (Direct3D 9 and OpenGL ES) §  Native extensions for AIR for Android §  Extending Flex “Hero” to iOS and BlackBerry Tablet OS © 2011 Adobe Systems Incorporated.
  • 30.
    Resources §  MP3 Remote Control for Android: h p://corlan.org/2010/07/02/creating-multi-screen-apps-for-android-and-desktop- using-air/ §  LiveCycle Collaboration Service showcase for Android tablets: h p://www.riagora.com/2011/03/lccs-showcase-on-your-tablet/ §  Mobile development with Flash Builder Burrito and Hero: h p://www.adobe.com/devnet/ ex/articles/mobile_development_hero_burrito.html §  Ge ing Flash Builder “Burrito”: h p://labs.adobe.com §  Tour de Mobile Flex: h p:// ex.org/tourmobile §  MAX 2010 Sessions Recordings (Channels > MAX 2010): h p://tv.adobe.com © 2011 Adobe Systems Incorporated.
  • 31.
    ank You! h p://corlan.org mihai.corlan@adobe.com © 2011 Adobe Systems Incorporated.
  • 32.
    © 2010 AdobeSystems Incorporated. All Rights Reserved. Adobe Con dential.
  • 33.
    Adobe, the Adobelogo, Adobe AIR, the Adobe AIR logo, the Adobe PDF logo, AIR, ColdFusion, ColdFusion Builder, Flash, Flash Builder, the Flash logo, Flex, LiveCycle, and Reader are eithe registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. © 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 9102xxxx 3/10 Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, ActionScript, AIR, Flash, Flash Builder, Flash Catalyst, the Flash logo, Flex, and LiveCycle are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microso and Windows are either registered trademarks or trademarks of Microso Corporation in the United States and/or other countries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the property of their respective owners. Printed in the USA. 91023957 3/10 © 2011 Adobe Systems Incorporated.
  • 34.
    Agenda Flash Platform Mobile Apps © 2011 Adobe Systems Incorporated.