© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Renaun Erickson – Last updated 2011.06.15
AIR Mobile Application Development:Package, Building, Design, & Skinning
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
Tools
ProjectTypes
AppPlatformsPackage
blackberry-tablet.xml
*-app.xml
Deploy
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Device Landscape for Adobe Runtimes
3
Desktop
Netbooks
Android
RIM Playbook
Apple iOS
Google TV
Televisions
WebOS
Open Screen Project 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Snapshot of Current Hardware
4
Samsung Smart TV
Sony Google TV
Logitech Revue
Android Phones
RIM PlayBook
Apple iPad2/iPhone4
Android Tablets
Palm Pre 2
2011AIR 2.5
AvailableFP 10.1
AvailableFP 10.1
AvailableFP 10.3/AIR 2.7
AvailableFP 10.1/AIR 2.5
AvailableAIR 2.7
AvailableFP 10.3/AIR 2.7
AvailableFP 10.1/FP
10.3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Platform Hardware and Runtimes
5
Android Phones
Android Tablets
iOS Devices
RIM PlayBook
Notes iOS is a captive runtime Flash Builder 4.5.1
update will support AIR 2.7 for iOS
RIM AIR update coming soon
AvailableAIR 2.7 -
runtime
AvailableAIR 2.7 -
runtime
AvailableAIR 2.7* -
captive
AvailableAIR 2.5* -
runtime
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AIR Profiles
* May be present
“desktop” Profile “mobileDevice” ProfileCapabilities
“tv” Profile
SQLiteFullscreen Mode
File SystemNetworking*
TLF RenderingCamera/
Microphone*
NativeWindowPDF, PrintingContext MenuNotification
AS2 VMDRM
WebKit
renderMode=GPU Accelerometer cacheAsBitmapMatrix Orientation SystemIdleMode Camera Roll
DRMAS2 VM
http://bit.ly/aOlHQ3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AIR Application Compile & Package
7
ActionScript SWF
Compiling
AIR Application
Packaging
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AIR Current Packagers
8
Compiling
adt – Desktop, Android, TV, & iOSCreates: .air, .exe, .dmg, .apk, .ipa
Packagers
pfi - iDevice uses Packager for iPhoneCreates: .ipa Now part of adt (since AIR 2.6)
blackberry-airpackager – PlayBookCreates: .bar
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
How Packaging AIR apps for iOS Works
.ipa
Runtime is cross compiled down to ARM instructions and is part
of each application.
ADT
SWFAsset
s
Captive runtime – Application includes runtime (compiled in)This is a highly requested feature for Android.
ActionScript
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
ProjectTypes
blackberry-tablet.xml
*-app.xml
Tools AppPlatforms
Development Package & Deploy
On Device Debugging
Persist State
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using Capabilities to Develop for Different Devices
Capabilities.screenDPI
Capabilities.screenResolutionX
Capabilities.screenResolutionY
Multitouch.supportedGestures
Multitouch.supportsGestureEvents
Multitouch.supportsTouchEvents
Geolocation.isSupported
Accelerometer.isSupported
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Accelerometer
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Device Discoverability
14
RTMFP – multicast over a local network No internet needed, just router with broadcast enabled (typical home
router setup)
AS3 only
A lot like mDNS (Bonjour) and UPnP discovery part
Configuration NetConnection’s connection string conn.connect(“rtmfp:”)
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)
Port – any valid port
GroupSpecifier name – allows for multiple groups/apps on same ip/port – group management
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Application Layout Views
15
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ViewNavigator
16
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
TabbedViewNavigator
17
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Physical Size / Pixels Per Inch
Screen Resolutions are Independent of Physical Screen Size
Device Resolution PPI Physical
Nexus One / Droid Incredible / HTC Desire
800x480 254 3.7’
HTC Evo 4G / HTC Desire HD 800x480 217 4.3’
Droid / Droid 2 854x480 265 3.7’
Droid X 854x480 228 4.3’
Samsung Galaxy S Vibrant 800x480 232 4.0’
iPhone 3GS and lower 480x320 163 3.5’
iPhone 4 960x640 326 3.5’
iPad 1024x768 132 9.7’
Galaxy Tab/PlayBook 1024x600 170 7’
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Builder 4.5 Device Configurations & Design View
19
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Approaches
Scale content to same physical size using PPI.
Use PPI and screen physical size to scale only certain devices.
Create different view/layout based on screen resolution and physical size (tablet vs smartphone).
Different view/layout for each device.
Dynamic layouts to fill up space.
MOST LIKELY WHAT YOU WILL DO
Hybrid of the above approaches
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Fluid Layouts with Expanded Details
21
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Treat Content as Canvas
22
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Kailand – Center Focused Content
23
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SWF Scaling Options
24
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex Tweaks for Platform UI Guidelines
26
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
Flex CSS Queries
http://opensource.adobe.com/wiki/display/flexsdk/CSS+Media+Query
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Packaging Links
29
Icons and Marketplace Images http://savagelook.com/blog/android/mobile-developers-icon-
image-checklist iOS versionNumber post
http://renaun.com/blog/2011/03/tips-for-ios-air-development/ Using Flash Builder 4.5 for packaging any SWF
http://renaun.com/blog/2011/05/using-flash-builder-4-5-to-package-arbitrary-swfs-for-ios-android-and-playbook/
Mobile section on ADC http://www.adobe.com/devnet/devices.html
PlayBook AIR 2.5 override when using Flash Builder 4.5/Flex 4.5 http://blogs.adobe.com/jasonsj/2011/05/flex45_air25_playbook.ht
ml http://deleteaso.com/developing-for-playbook-with-the-air-2-6-
sdk/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Building Links
30
Mobile App Development section on ADC http://www.adobe.com/devnet/devices/mobile-apps.html
as3viewnavigator https://github.com/pwalczyszyn/as3viewnavigator
Android DPI issues http://renaun.com/blog/2011/03/air-2-6-capabilities-screendpi-on-
devices/ Using QNX with MXML (Flex and non-Flex)
http://renaun.com/blog/2010/12/using-mxml-with-qnx-ui-components-for-the-playbook/
Developing Mobile Applications with Flash Builder and Flex http://help.adobe.com/en_US/flex/mobileapps/index.html
Digital Fun in the Digital Home: TV, Tablets, & Smartphones http://www.slideshare.net/renaun/digital-fun-for-the-digital-home
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Design & Skinning Links
31
Mobile App Development section on ADC http://www.adobe.com/devnet/devices/mobile-apps.html
Design tips for creating mobile RIAs http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html
Designing Great Mobile Icons http://swfhead.com/blog/?p=1145#more-1145
Flex Skinning Links: http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html http://www.asfusion.com/blog/entry/mobile-itemrenderer-in-actionscript-part-1 http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html http://blogs.adobe.com/jasonsj/2011/05/comparing-css-media-queries-vs-application-
scaling.html Mobile UI Components Platform Tweaks
https://github.com/renaun/FlexExamples https://github.com/olsonjj http://madskool.wordpress.com/2011/05/27/madcomponents-sans-xml/ http://www.riagora.com/2011/05/dynamic-ui-patterns/ http://www.riagora.com/2011/05/pull-down-to-refresh/
Contextual Applications http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/
flashplatform/pdfs/afp_design_guidelines.pdf
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Discussion Time
32
Q/AThank you for attending
http://github.com/renaun
@renaun
http://renaun.com/blog
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.