Cross-Platform App Development with Flex Mobile

An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry

Stephen ChinChief Agile Methodologist at GXSTwitter: @steveonjavahttp://flash.steveonjava.com/

Oswald CampesatoHTML5 Canvas/CSS3 Graphics PrimerTwitter: @ocampesato

Flash and AIR on Android, iOS, and Blackberry

Adobe Flash

Adobe AIR

Available on Android and Blackberry Phones and Tablets

Does not run on iPhone or iPad Works in the Browser Limited Access to Device APIs

Available on Android, Blackberry, and iOS Works on Smart Phones and Tablets Deploys as a Native Application Gives Full Access to Device APIs

Flash Tooling

Tool Name Description Supports Android Deployment

Adobe Flash CS5.5 Visual design tool for building Flash applications with some Actionscript.

Actionscript Direct to Device

Adobe Flash Builder 4.5

Professional Flex and Actionscript development environment.

Flex/MXML, Actionscript

Direct to Device

Flex 4.5 SDK Stand-alone development toolkit. Flex, Actionscript

Build Script

Adobe Flash Catalyst 1.5

Rapid Development Platform for building Flex user interfaces.

Flex, Actionscript

Via Flash Builder

Hello Flash on 3 Platforms…

BlackBerry Playbook Specs

“Enterprise Ready" Device 7" Screen (9.7mm Thick) HTML5 and FULL Flash 10.1 Hardware Accelerated Video Supports HDMI (TV output) Displays PPT and Documents Front and Rear Cameras 1 GHZ core and 1GB RAM Q1/Q2 of 2011

BlackBerry Deployment

Register for Blackberry App World Account Free, but requires ID verification (driver's license)

Request code signing certificates Takes 1-2 business days for a response

Install Blackberry SDK Integrates with Flash Builder 4.5

Install Plug-in Update Manual process right now

Setup device in Flash Builder Turn on device debugging Enable via USB or Wifi

Setup Flash Builder with 2 certificate files

Difficult Rating:Moderate

Android Tablet Flash Devices

Samsung Galaxy Tab "enterprise ready" device 7" screen

Motorola Xoom First HoneyComb (3.1 device)

Samsung Galaxy Tab 10.1 Dual-core Tegra processor 10.1", 1280x800 screen

Sony Tablet P (not yet available)

Dual 5.5" screens

Deploying to Android

Turn on Device Debugging Plug in via USB

And install necessary drivers Deploy!

Difficult Rating:Easy!

iOS Devices

iPhone 3/3GS 320x480 Display

iPhone 4/4S 640x960 Retina Display A4/A5 Processor

iPad 1/2 1024/768 Display A5 Processor

Deploying to iOS

Sign up for Apple's developer program This costs $$$

Buy a Mac computer (or borrow a friend's) Go through Apple's deployment process to create a certificate

Involves cert generation and other annoyances Install in Keychain and export as a P12 Create an application profile and export it Install cert and app profile in Flash Builder Build app packaging in Flash Builder

Debug mode is quick (but slower performance) Manually install via iTunes (install and sync to device)

Remember to uninstall previous app versions Repeat process for each app you develop

Difficult Rating:Painful

Device Screen CharacteristicsDevice Name Manufacturer Resolution Size Density Type

T-Mobile G1 HTC 320x480 3.2" 180ppi HVGA

Motorola Droid Motorola 480x854 3.7" 265ppi FWVGA

Google Nexus One HTC 480x800 3.7" 252ppi WVGA

Xperia X10 Mini Sony Ericsson 240x320 2.55" 157ppi QVGA

HTC EVO/Thunderbolt HTC 480x800 4.3" 217ppi WVGA

Droid X Motorola 480x854 4.3" 228ppi FWVGA

Motorola Atrix Motorola 540x960 4" 275ppi qHD

iPhone 4 Apple 640x960 3.5" 326ppi DVGA

Droid Bionic Motorola 540x960 4.3 256ppi qHD

iPad Apple 768x1024 9.7" 132ppi

Screen Resolution vs. Density

Density in Flex Applications

Density DPI Mapped Range

Medium Density (mdpi)

160 Below 200

High Density (hdpi)

240 200 to 280

Extra High Density (xhdpi)

320 Above 280

1 2

34

5

Density Explorer Application

<fx:Script> <![CDATA[ [Bindable] protected var applicationDPI:Number; [Bindable] public var deviceDPI:Number; ]]></fx:Script><s:VGroup paddingTop="20" paddingLeft="15" paddingRight="15" paddingBottom="15" gap="20" width="100%" height="100%"> <s:Label text="Application DPI:"/> <s:HGroup gap="30"> <s:RadioButton id="ad160" content="160"click="applicationDPI = 160"/> <s:RadioButton id="ad240" content="240" click="applicationDPI = 240"/> <s:RadioButton id="ad320" content="320" click="applicationDPI = 320"/> </s:HGroup> <s:Label text="Device DPI: {deviceDPI}"/> <s:HSlider id="dpiSlider" minimum="130" maximum="320" value="@{deviceDPI}" width="100%"/></s:VGroup>

Automatic Resizing

160ppi 240ppi 320ppi

Detecting Orientation

Can be done via: Event Callback▪ stage.addEventListener(

StageOrientationEvent.ORIENTATION_CHANGE, <function callback>);

States StageOrientation Values

DEFAULT ROTATED_LEFT ROTATED_RIGHT UPSIDE_DOWN UNKNOWN

Flash/AIR Mobile APIs

Screen Orientation * Multitouch * Gestures * Accelerometer Camera CameraRoll GPS Microphone Audio

Video* REST JSON/XML ViewNavigator* CSS Etc.

* APIs we will show examples of today

Mulititouch

GESTURES

Two Finger Tap

Pan

Zoom

Rotate

Swipe

Illustrations provided by Gestureworks (www.gestureworks.com)

Gestures via addEventListener

public class MultitouchImage extends Image { public function MultitouchImage() { addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotateListener); addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomListener); Multitouch.inputMode = MultitouchInputMode.GESTURE; } protected function rotateListener(e:TransformGestureEvent):void { rotation += e.rotation; } protected function zoomListener(e:TransformGestureEvent):void { scaleX *= e.scaleX; scaleY *= e.scaleY;}}}

Gestures via Events

protected function swipe(e:TransformGestureEvent):void {

page = (page + e.offsetX + pages.numElements) % pages.numElements; updateVisibility(); } <s:VGroup gestureSwipe="swipe(event)”/>

Android Scrapbook Example

Sketch Example

Flex Mobile Views/Controls

ViewNavigatorApplication Views ViewNavigator Splash Screen Components:

ActionBar Text Components List, Scroller, and Touch Gestures

Flex Mobile Controls Demo

Video Example

Development Links

Android SDK http://developer.android.com/sdk/index.html

AIR 2.5 http://labs.adobe.com/technologies/air2/android/

Flex Builder 4.5 (Burrito) http://labs.adobe.com/technologies/flashbuilder_burrito/

Flex Catalyst 5.5 (Panini) http://labs.adobe.com/technologies/flashcatalyst_panini/

Flex 4.5 SDK (Hero) http://labs.adobe.com/technologies/flexsdk_hero/

iPhone Packager http://labs.adobe.com/technologies/packagerforiphone/

Blogs to Read

Stephen Chin http://flash.steveonjava.com/

Duane Nickull http://technoracle.blogspot.com/

Christian Cantrell http://blogs.adobe.com/cantrell/

Christophe Coenraets http://coenraets.org/blog/

Serge Jespers http://www.webkitchen.be/

Lee Brimelow (The Flash Blog) http://blog.theflashblog.com/

Mark Doherty (FlashMobileBlog) http://www.flashmobileblog.com/

Pro Android FlashStephen Chin, Oswald Campesato, Dean Iverson, and Paul Trani

Includes: UI Controls Media Support Mobile Flex APIs Android Market Deployment Extensive Examples

Available Now!

http://steveonjava.com/