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

1. AIR Mobile Application Development:Package, Building, Design, & Skinning Renaun Erickson – Last updated 2011.06.15

2. App Platforms Tools Package Deploy Project Types *-app.xml blackberry-tablet.xml 2

4. Tons of OS & Chipsets

5. No single control of runtime releases

6. Abstracting as much of device fragmentation as possible

7. Remember early stages of device OS and runtimes, constant change3

8. Snapshot of Current Hardware Samsung Smart TV Sony Google TV Logitech Revue Android Phones RIM PlayBook Apple iPad2/iPhone4 Android Tablets Palm Pre 2 2011 AIR 2.5 Available FP 10.1 Available FP 10.1 Available FP 10.3/AIR 2.7 Available FP 10.1/AIR 2.5 Available AIR 2.7 Available FP 10.3/AIR 2.7 Available FP 10.1/FP 10.3 4

10. Flash Builder 4.5.1 update will support AIR 2.7 for iOS

11. RIM AIR update coming soonAndroid Phones Android Tablets iOS Devices RIM PlayBook Available AIR 2.7 - runtime Available AIR 2.7 - runtime Available AIR 2.7* - captive Available AIR 2.5* - runtime 5

12. AIR Profiles Capabilities “mobileDevice” Profile “desktop” Profile NativeWindow PDF, Printing Context Menu Notification AS2 VM DRM WebKit renderMode=GPU Accelerometer cacheAsBitmapMatrix Orientation SystemIdleMode Camera Roll SQLite Fullscreen Mode File System Networking* TLF Rendering Camera/Microphone* DRM AS2 VM http://bit.ly/aOlHQ3 “tv” Profile * May be present

13. AIR Application Compile & Package 7 Compiling Packaging ActionScript AIR Application SWF

14. AIR Current Packagers 8 Compiling Packagers adt – Desktop, Android, TV, & iOS Creates: .air, .exe, .dmg, .apk, .ipa pfi - iDevice uses Packager for iPhone Creates: .ipa Now part of adt(since AIR 2.6) blackberry-airpackager– PlayBook Creates: .bar

15. How Packaging AIR apps for iOS Works ADT .ipa SWF Assets Runtime is cross compiled down to ARM instructions and is part of each application. ActionScript Captive runtime – Application includes runtime (compiled in) This is a highly requested feature for Android.

16. App Platforms Tools Development Package & Deploy On Device Debugging Project Types *-app.xml Persist State blackberry-tablet.xml 10

17. Using Capabilities to Develop for Different Devices Capabilities.screenDPI Capabilities.screenResolutionX Capabilities.screenResolutionY Multitouch.supportedGestures Multitouch.supportsGestureEvents Multitouch.supportsTouchEvents Geolocation.isSupported Accelerometer.isSupported

18. Using Multitouch and Gestures MultitouchInputMode.GESTURES – Gestures Multitouch.supportedGestures Multitouch.supportedGestureEvents MultitouchInputMode.TOUCH_POINT - Raw Touch Point Multitouch.supportedTouchEvents Can build your own gesture library with raw data points? http://gestureworks.com/ - Commercial Product

19. Accelerometer

21. AS3 only

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. Port – any valid port

26. ViewNavigator 16

27. TabbedViewNavigator 17

28. Physical Size / Pixels Per Inch Screen Resolutions are Independent of Physical Screen Size

29. Flash Builder 4.5 Device Configurations & Design View 19

31. Use PPI and screen physical size to scale only certain devices.

32. Create different view/layoutbased on screen resolution and physical size (tablet vs smartphone).

33. Different view/layout for each device.

35. Treat Content as Canvas 22

36. Kailand – Center Focused Content 23

37. SWF Scaling Options 24

38. How much UI guidelines is platform specific? Debate on Platform specific UI vs same look and feel across devices AIR Current Work Native text inputs More virtual keyboard control Current Limitations Components or Skins addressing all the UI paradigms Mix and Match Address Android Back button vs other platforms that have no back button Each little UI component specific guideline might not make sense. Content and Branding big drivers 25

39. Flex Tweaks for Platform UI Guidelines 26

40. Text in Mobile StyleableTextField in Flex 4.5 mobile theme extends TextField Non-TLF/FTE TextField with supporting styles: textAlign, fontFamily, fontWeight, fontStyle, color, fontSize, textDecoration, textIndent, leading, letterSpacing Mobile apps are discouraged from using RichText or RichEditableText Spark Label uses TLF, so if you are embedding fonts you either have to embed twice (embedAsCFF=true embedAsCFF=false) Or use TextInput and TextArea, takes some tweaking of a skin to make it just display text and lined up right. 27

41. Flex CSS Queries 28 http://opensource.adobe.com/wiki/display/flexsdk/CSS+Media+Query

43. http://savagelook.com/blog/android/mobile-developers-icon-image-checklist

44. iOSversionNumber post

45. http://renaun.com/blog/2011/03/tips-for-ios-air-development/

46. Using Flash Builder 4.5 for packaging any SWF

47. http://renaun.com/blog/2011/05/using-flash-builder-4-5-to-package-arbitrary-swfs-for-ios-android-and-playbook/

48. Mobile section on ADC

49. http://www.adobe.com/devnet/devices.html

50. PlayBook AIR 2.5 override when using Flash Builder 4.5/Flex 4.5

51. http://blogs.adobe.com/jasonsj/2011/05/flex45_air25_playbook.html

53. http://www.adobe.com/devnet/devices/mobile-apps.html

54. as3viewnavigator

55. https://github.com/pwalczyszyn/as3viewnavigator

56. Android DPI issues

57. http://renaun.com/blog/2011/03/air-2-6-capabilities-screendpi-on-devices/

58. Using QNX with MXML (Flex and non-Flex)

59. http://renaun.com/blog/2010/12/using-mxml-with-qnx-ui-components-for-the-playbook/

60. Developing Mobile Applications with Flash Builder and Flex

61. http://help.adobe.com/en_US/flex/mobileapps/index.html

62. Digital Fun in the Digital Home: TV, Tablets, & Smartphones

64. http://www.adobe.com/devnet/devices/mobile-apps.html

65. Design tips for creating mobile RIAs

66. http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html

67. Designing Great Mobile Icons

68. http://swfhead.com/blog/?p=1145#more-1145

69. Flex Skinning Links:

70. http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html

71. http://www.asfusion.com/blog/entry/mobile-itemrenderer-in-actionscript-part-1

72. http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html

73. http://blogs.adobe.com/jasonsj/2011/05/comparing-css-media-queries-vs-application-scaling.html

74. Mobile UI Components Platform Tweaks

75. https://github.com/renaun/FlexExamples

76. https://github.com/olsonjj

77. http://madskool.wordpress.com/2011/05/27/madcomponents-sans-xml/

78. http://www.riagora.com/2011/05/dynamic-ui-patterns/

79. http://www.riagora.com/2011/05/pull-down-to-refresh/

80. Contextual Applications