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

© 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


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


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


AvailableAIR 2.7


AvailableFP 10.1/FP

10.3


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


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


AIR Application Compile & Package

7

ActionScript SWF

Compiling

AIR Application

Packaging


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


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


ProjectTypes

blackberry-tablet.xml

*-app.xml

Tools AppPlatforms

Development Package & Deploy

On Device Debugging

Persist State


Using Capabilities to Develop for Different Devices

Capabilities.screenDPI

Capabilities.screenResolutionX

Capabilities.screenResolutionY

Multitouch.supportedGestures

Multitouch.supportsGestureEvents

Multitouch.supportsTouchEvents

Geolocation.isSupported

Accelerometer.isSupported


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

http://gestureworks.com/


Accelerometer


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


Application Layout Views

15


ViewNavigator

16


TabbedViewNavigator

17


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’


Flash Builder 4.5 Device Configurations & Design View

19


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


Fluid Layouts with Expanded Details

21


Treat Content as Canvas

22


Kailand – Center Focused Content

23


SWF Scaling Options

24


Flex Tweaks for Platform UI Guidelines

26


Flex CSS Queries

http://opensource.adobe.com/wiki/display/flexsdk/CSS+Media+Query


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/



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

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

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


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

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

https://github.com/pwalczyszyn/as3viewnavigator

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

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



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


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

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

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

http://swfhead.com/blog/?p=1145%23more-1145

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

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

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/


Discussion Time

32

Q/AThank you for attending

[email protected]

http://github.com/renaun

@renaun

http://renaun.com/blog

mailto:[email protected]

http://github.com/renaun


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

Technology