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 ToolingTool 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 TypeT-Mobile G1 HTC 320x480 3.2" 180ppi HVGAMotorola Droid Motorola 480x854 3.7" 265ppi FWVGAGoogle Nexus One HTC 480x800 3.7" 252ppi WVGAXperia 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 FWVGAMotorola Atrix Motorola 540x960 4" 275ppi qHDiPhone 4 Apple 640x960 3.5" 326ppi DVGADroid Bionic Motorola 540x960 4.3 256ppi qHDiPad Apple 768x1024 9.7" 132ppi

Screen Resolution vs. Density

Density in Flex ApplicationsDensity 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 Resizing160ppi 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

GESTURESTwo Finger Tap

Pan

Zoom

Rotate

Swipe

Illustrations provided by Gestureworks (www.gestureworks.com)

Gestures via addEventListenerpublic 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/