AIR Mobile Application Development:Package, Building, Design, & Skinning<br />Renaun Erickson – Last updated 2011.06.15<br />
App<br />Platforms<br />Tools<br />Package<br />Deploy<br />Project<br />Types<br />*-app.xml<br />blackberry-tablet.xml<b...
Device Landscape for Adobe Runtimes<br />Desktop<br />Netbooks<br />Android<br />RIM Playbook<br />Apple iOS<br />Google T...
Tons of OS & Chipsets
No single control of runtime releases
Abstracting as much of device fragmentation as possible
Remember early stages of device OS and runtimes, constant change</li></ul>3<br />
Snapshot of Current Hardware<br />Samsung Smart TV<br />Sony Google TV<br />Logitech Revue<br />Android Phones<br />RIM Pl...
Platform Hardware and Runtimes<br />Notes<br /><ul><li>iOS is a captive runtime
Flash Builder 4.5.1 update will support AIR 2.7 for iOS
RIM AIR update coming soon</li></ul>Android Phones<br />Android Tablets<br />iOS Devices<br />RIM PlayBook<br />Available<...
AIR Profiles<br />Capabilities<br />“mobileDevice” Profile<br />“desktop” Profile<br />NativeWindow<br />PDF, Printing<br ...
AIR Application Compile & Package<br />7<br />Compiling<br />Packaging<br />ActionScript<br />AIR Application<br />SWF<br />
AIR Current Packagers<br />8<br />Compiling<br />Packagers<br />adt – Desktop, Android, TV, & iOS<br />Creates: .air, .exe...
How Packaging AIR apps for iOS Works<br />ADT<br />.ipa<br />SWF<br />Assets<br />Runtime is cross compiled down to ARM in...
App<br />Platforms<br />Tools<br />Development<br />Package & Deploy<br />On Device <br />Debugging<br />Project<br />Type...
Using Capabilities to Develop for Different Devices<br />Capabilities.screenDPI<br />Capabilities.screenResolutionX<br />C...
Using Multitouch and Gestures<br />MultitouchInputMode.GESTURES – Gestures<br />Multitouch.supportedGestures<br />Multitou...
Accelerometer<br />
Device Discoverability<br />14<br />RTMFP – multicast over a local network<br /><ul><li>No internet needed, just router wi...
AS3 only
A lot like mDNS (Bonjour) and UPnP discovery part</li></ul>Configuration<br /><ul><li>NetConnection’s connectionstring con...
IP in the multicast range - 224.0.0.0 to 239.255.255.255 with 224.0.0.0/225 for special use (http://www.iana.org/assignmen...
Port – any valid port
GroupSpecifier name – allows for multiple groups/apps on same ip/port – group management</li></li></ul><li>Application Lay...
ViewNavigator<br />16<br />
TabbedViewNavigator<br />17<br />
Physical Size / Pixels Per Inch<br />Screen Resolutions are Independent of Physical Screen Size<br />
Flash Builder 4.5 Device Configurations & Design View<br />19<br />
Approaches<br /><ul><li>Scale content to same physical size using PPI.
Use PPI and screen physical size to scale only certain devices.
Upcoming SlideShare
Loading in...5
×

AIR Mobile Application Development: Package, Building, Design & Skinning

3,463

Published on

Overview of the latest AIR runtime and Flash Builder 4.5 / Flex 4.5 workflow for developing AIR applications.

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

No Downloads
Views
Total Views
3,463
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Here are a lot list of the different uses of Digital Home
  • Renaun
  • Here are a lot list of the different uses of Digital Home
  • Renaun Border the images and
  • AIR Mobile Application Development: Package, Building, Design & Skinning

    1. 1. AIR Mobile Application Development:Package, Building, Design, & Skinning<br />Renaun Erickson – Last updated 2011.06.15<br />
    2. 2. App<br />Platforms<br />Tools<br />Package<br />Deploy<br />Project<br />Types<br />*-app.xml<br />blackberry-tablet.xml<br />2<br />
    3. 3. Device Landscape for Adobe Runtimes<br />Desktop<br />Netbooks<br />Android<br />RIM Playbook<br />Apple iOS<br />Google TV<br />Televisions<br />WebOS<br /><ul><li>Open Screen Project
    4. 4. Tons of OS & Chipsets
    5. 5. No single control of runtime releases
    6. 6. Abstracting as much of device fragmentation as possible
    7. 7. Remember early stages of device OS and runtimes, constant change</li></ul>3<br />
    8. 8. Snapshot of Current Hardware<br />Samsung Smart TV<br />Sony Google TV<br />Logitech Revue<br />Android Phones<br />RIM PlayBook<br />Apple iPad2/iPhone4<br />Android Tablets<br />Palm Pre 2<br />2011<br />AIR 2.5<br />Available<br />FP 10.1<br />Available<br />FP 10.1<br />Available<br />FP 10.3/AIR 2.7<br />Available<br />FP 10.1/AIR 2.5<br />Available<br />AIR 2.7<br />Available<br />FP 10.3/AIR 2.7<br />Available<br />FP 10.1/FP 10.3<br />4<br />
    9. 9. Platform Hardware and Runtimes<br />Notes<br /><ul><li>iOS is a captive runtime
    10. 10. Flash Builder 4.5.1 update will support AIR 2.7 for iOS
    11. 11. RIM AIR update coming soon</li></ul>Android Phones<br />Android Tablets<br />iOS Devices<br />RIM PlayBook<br />Available<br />AIR 2.7 - runtime<br />Available<br />AIR 2.7 - runtime<br />Available<br />AIR 2.7* - captive<br />Available<br />AIR 2.5* - runtime<br />5<br />
    12. 12. AIR Profiles<br />Capabilities<br />“mobileDevice” Profile<br />“desktop” Profile<br />NativeWindow<br />PDF, Printing<br />Context Menu<br />Notification<br />AS2 VM<br />DRM<br />WebKit<br />renderMode=GPU Accelerometer<br />cacheAsBitmapMatrix<br /> Orientation<br />SystemIdleMode<br /> Camera Roll<br />SQLite<br />Fullscreen Mode<br />File System<br />Networking*<br />TLF Rendering<br />Camera/Microphone*<br />DRM<br />AS2 VM<br />http://bit.ly/aOlHQ3<br />“tv” Profile<br />* May be present<br />
    13. 13. AIR Application Compile & Package<br />7<br />Compiling<br />Packaging<br />ActionScript<br />AIR Application<br />SWF<br />
    14. 14. AIR Current Packagers<br />8<br />Compiling<br />Packagers<br />adt – Desktop, Android, TV, & iOS<br />Creates: .air, .exe, .dmg, .apk, .ipa<br />pfi - iDevice uses Packager for iPhone<br />Creates: .ipa Now part of adt(since AIR 2.6)<br />blackberry-airpackager– PlayBook<br />Creates: .bar<br />
    15. 15. How Packaging AIR apps for iOS Works<br />ADT<br />.ipa<br />SWF<br />Assets<br />Runtime is cross compiled down to ARM instructions and is part of each application.<br />ActionScript<br />Captive runtime – Application includes runtime (compiled in)<br />This is a highly requested feature for Android.<br />
    16. 16. App<br />Platforms<br />Tools<br />Development<br />Package & Deploy<br />On Device <br />Debugging<br />Project<br />Types<br />*-app.xml<br />Persist State<br />blackberry-tablet.xml<br />10<br />
    17. 17. Using Capabilities to Develop for Different Devices<br />Capabilities.screenDPI<br />Capabilities.screenResolutionX<br />Capabilities.screenResolutionY <br />Multitouch.supportedGestures <br />Multitouch.supportsGestureEvents <br />Multitouch.supportsTouchEvents <br />Geolocation.isSupported <br />Accelerometer.isSupported<br />
    18. 18. Using Multitouch and Gestures<br />MultitouchInputMode.GESTURES – Gestures<br />Multitouch.supportedGestures<br />Multitouch.supportedGestureEvents<br />MultitouchInputMode.TOUCH_POINT - Raw Touch Point<br />Multitouch.supportedTouchEvents<br />Can build your own gesture library with raw data points?<br />http://gestureworks.com/ - Commercial Product<br />
    19. 19. Accelerometer<br />
    20. 20. Device Discoverability<br />14<br />RTMFP – multicast over a local network<br /><ul><li>No internet needed, just router with broadcast enabled (typical home router setup)
    21. 21. AS3 only
    22. 22. A lot like mDNS (Bonjour) and UPnP discovery part</li></ul>Configuration<br /><ul><li>NetConnection’s connectionstring conn.connect(“rtmfp:”)
    23. 23. IP in the multicast range - 224.0.0.0 to 239.255.255.255 with 224.0.0.0/225 for special use (http://www.iana.org/assignments/multicast-addresses/multicast-addresses.xml)
    24. 24. Port – any valid port
    25. 25. GroupSpecifier name – allows for multiple groups/apps on same ip/port – group management</li></li></ul><li>Application Layout Views<br />15<br />
    26. 26. ViewNavigator<br />16<br />
    27. 27. TabbedViewNavigator<br />17<br />
    28. 28. Physical Size / Pixels Per Inch<br />Screen Resolutions are Independent of Physical Screen Size<br />
    29. 29. Flash Builder 4.5 Device Configurations & Design View<br />19<br />
    30. 30. Approaches<br /><ul><li>Scale content to same physical size using PPI.
    31. 31. Use PPI and screen physical size to scale only certain devices.
    32. 32. Create different view/layoutbased on screen resolution and physical size (tablet vs smartphone).
    33. 33. Different view/layout for each device.
    34. 34. Dynamic layouts to fill up space.</li></ul> MOST LIKELY WHAT YOU WILL DO<br /><ul><li>Hybrid of the above approaches</li></li></ul><li>Fluid Layouts with Expanded Details<br />21<br />
    35. 35. Treat Content as Canvas<br />22<br />
    36. 36. Kailand – Center Focused Content<br />23<br />
    37. 37. SWF Scaling Options<br />24<br />
    38. 38. How much UI guidelines is platform specific?<br />Debate on Platform specific UI vs same look and feel across devices<br />AIR Current Work<br />Native text inputs<br />More virtual keyboard control<br />Current Limitations<br />Components or Skins addressing all the UI paradigms<br />Mix and Match<br />Address Android Back button vs other platforms that have no back button<br />Each little UI component specific guideline might not make sense.<br />Content and Branding big drivers <br />25<br />
    39. 39. Flex Tweaks for Platform UI Guidelines<br />26<br />
    40. 40. Text in Mobile<br />StyleableTextField in Flex 4.5 mobile theme extends TextField<br />Non-TLF/FTE<br />TextField with supporting styles:<br />textAlign, fontFamily, fontWeight, fontStyle, color, fontSize, textDecoration, textIndent, leading, letterSpacing<br />Mobile apps are discouraged from using RichText or RichEditableText<br />Spark Label uses TLF, so if you are embedding fonts you either have to embed twice (embedAsCFF=true embedAsCFF=false)<br />Or use TextInput and TextArea, takes some tweaking of a skin to make it just display text and lined up right.<br />27<br />
    41. 41. Flex CSS Queries<br />28<br />http://opensource.adobe.com/wiki/display/flexsdk/CSS+Media+Query<br />
    42. 42. Packaging Links<br />29<br /><ul><li>Icons and Marketplace Images
    43. 43. http://savagelook.com/blog/android/mobile-developers-icon-image-checklist
    44. 44. iOSversionNumber post
    45. 45. http://renaun.com/blog/2011/03/tips-for-ios-air-development/
    46. 46. Using Flash Builder 4.5 for packaging any SWF
    47. 47. http://renaun.com/blog/2011/05/using-flash-builder-4-5-to-package-arbitrary-swfs-for-ios-android-and-playbook/
    48. 48. Mobile section on ADC
    49. 49. http://www.adobe.com/devnet/devices.html
    50. 50. PlayBook AIR 2.5 override when using Flash Builder 4.5/Flex 4.5
    51. 51. http://blogs.adobe.com/jasonsj/2011/05/flex45_air25_playbook.html
    52. 52. http://deleteaso.com/developing-for-playbook-with-the-air-2-6-sdk/</li></li></ul><li>Building Links<br />30<br /><ul><li>Mobile App Development section on ADC
    53. 53. http://www.adobe.com/devnet/devices/mobile-apps.html
    54. 54. as3viewnavigator
    55. 55. https://github.com/pwalczyszyn/as3viewnavigator
    56. 56. Android DPI issues
    57. 57. http://renaun.com/blog/2011/03/air-2-6-capabilities-screendpi-on-devices/
    58. 58. Using QNX with MXML (Flex and non-Flex)
    59. 59. http://renaun.com/blog/2010/12/using-mxml-with-qnx-ui-components-for-the-playbook/
    60. 60. Developing Mobile Applications with Flash Builder and Flex
    61. 61. http://help.adobe.com/en_US/flex/mobileapps/index.html
    62. 62. Digital Fun in the Digital Home: TV, Tablets, & Smartphones
    63. 63. http://www.slideshare.net/renaun/digital-fun-for-the-digital-home</li></li></ul><li>Design & Skinning Links<br />31<br /><ul><li>Mobile App Development section on ADC
    64. 64. http://www.adobe.com/devnet/devices/mobile-apps.html
    65. 65. Design tips for creating mobile RIAs
    66. 66. http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html
    67. 67. Designing Great Mobile Icons
    68. 68. http://swfhead.com/blog/?p=1145#more-1145
    69. 69. Flex Skinning Links:
    70. 70. http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html
    71. 71. http://www.asfusion.com/blog/entry/mobile-itemrenderer-in-actionscript-part-1
    72. 72. http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html
    73. 73. http://blogs.adobe.com/jasonsj/2011/05/comparing-css-media-queries-vs-application-scaling.html
    74. 74. Mobile UI Components Platform Tweaks
    75. 75. https://github.com/renaun/FlexExamples
    76. 76. https://github.com/olsonjj
    77. 77. http://madskool.wordpress.com/2011/05/27/madcomponents-sans-xml/
    78. 78. http://www.riagora.com/2011/05/dynamic-ui-patterns/
    79. 79. http://www.riagora.com/2011/05/pull-down-to-refresh/
    80. 80. Contextual Applications
    81. 81. http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/flashplatform/pdfs/afp_design_guidelines.pdf</li></li></ul><li>Discussion Time<br />32<br />Q/A<br />Thank you for attending<br />renaun@adobe.com<br />http://github.com/renaun<br />@renaun<br />http://renaun.com/blog<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×