Android Flash Development

An Introduction to Flash and AIR Development on Android

Stephen ChinTwitter: @steveonjavahttp://flash.steveonjava.com/

Oswald CampesatoTwitter: @ocampesatohttp://book2-web.com/

Flash and AIR on Android

Adobe Flash

Adobe AIR

Available on Android Phones Today

Works in the Browser Limited Access to Device APIs Runs on most smart phones

(but not iPhone)

AIR 2.5 released with Android Support

Deploys as an Android Market Application

Gives Full Access to Device APIs Runs on most smart phones

including Android and iPhone

Latest Version: AIR 2.6

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

Device Central Device library and runtime emulation environment.

N/A Downloaded Profiles

Flash Professional CS5

Flash Capability Reporterimport flash.system.Capabilities;import flash.ui.Multitouch; capabilityScroller.capabilities.text = "Manufacturer: " + Capabilities.manufacturer + "\n" + "OS: " + Capabilities.os + "\n" + "Pixel Aspect Ratio: " + Capabilities.pixelAspectRatio + "\n" + "Player Type: " + Capabilities.playerType + "\n" + "Screen Color: " + Capabilities.screenColor + "\n" + "Screen DPI: " + Capabilities.screenDPI + "\n" + "Screen Resolution: " + Capabilities.screenResolutionX + "x" +

Capabilities.screenResolutionY + "\n" + "Touch Screen Type: " + Capabilities.touchscreenType + "\n" + "Version: " + Capabilities.version + "\n" + "Supports Gesture Events: " + Multitouch.supportsGestureEvents + "\n" + "Supports Touch Events: " + Multitouch.supportsTouchEvents + "\n" + "Input Mode: " + Multitouch.inputMode + "\n" + "Max Touch Points: " + Multitouch.maxTouchPoints + "\n" + "Supported Gestures: " + Multitouch.supportedGestures;

Flash Professional CS5

Flash Capability Reporter

Android Devices

Device Screen CharacteristicsDevice Name Manufactur

erResolution

Size Density

Type

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

HTC Hero 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

Xperia X10 Sony Ericsson

480x854 4" 245ppi FWVGA

HTC Evo 4G HTC 480x800 4.3" 217ppi WVGA

Droid X Motorola 480x854 4.3" 228ppi FWVGA

Motorola Atrix Motorola 540x960 4" 275ppi qHD

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

Density Explorer Application

<fx:Script> <![CDATA[ [Bindable] protected var applicationDPI:String; [Bindable] public var dpi:int; ]]></fx:Script><s:VGroup paddingTop="20" paddingLeft="15" paddingRight="15" paddingBottom="15" gap="20" width="100%" height="100%"> <s:Label text="Author Density:"/> <s:HGroup gap="15"> <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: {dpi}"/> <s:HSlider id="dpiSlider" minimum="130" maximum="320" value="@{dpi}" width="100%"/></s:VGroup>

Author Density Settings

160ppi 240ppi 320ppi

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

Screen Orientation

Stage Event Listener stage.addEventListener(

StageOrientationEvent.ORIENTATION_CHANGE, <function callback>);

StageOrientation Values DEFAULT ROTATED_LEFT ROTATED_RIGHT UPSIDE_DOWN UNKNOWN

Screen Orientation Exampleimport flash.display.StageOrientation;import flash.events.StageOrientationEvent;

stop();

stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGE,

onChanged);

function onChanged(event:StageOrientationEvent):void {play();

}

Portrait/Landscape Switching

Portrait/Landscape Switching

Mulititouch

GESTURES

Two 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

Touch Point API

Touch Constant Event Name Description

TOUCH_BEGIN touchBegin Event dispatched when the user initially touches the object (finger down)

TOUCH_END touchEnd Event dispatched when the user removes contact with the object (finger up)

TOUCH_MOVE touchMove Event dispatched when the user drags across the object (finger slide)

TOUCH_OVER touchOver Event dispatched when the user drags into the object or any of its children. This event may get fired multiple times and is equivalent to a MOUSE_OVER event.

TOUCH_OUT touchOut Event dispatched when the user drags out of the object or any of its children. This event may get fired multiple times and is equivalent to a MOUSE_OUT event.

TOUCH_ROLL_OVER touchRollOver Event dispatched when the user drags into the combined bounds of the object and all its children. This event does not propagate upwards and is equivalent to a mouse ROLL_OVER event.

TOUCH_ROLL_OUT touchRollOut Event dispatched when the user drags out of the combined bounds of the object and all its children. This event does not propagate upwards and is equivalent to a mouse ROLL_OUT event.

TOUCH_TAP touchTap Event dispatched after the user finishes a gesture that involves touching and removing contact with the object. A high tolerance of movement in the middle is allowed as long as it is within the bounds of the object.

Snake Generator Sample

Flex Mobile Views/Controls

ViewNavigatorApplication Views ViewNavigator Splash Screen Components:

ActionBar Text Components List, Scroller, and Touch Gestures

For more info see: http://opensource.adobe.com/wiki/display/flexsdk/Hero

Future Device Support

Blackberry Playbook Android Tablets iPhone/iPad Television

http://www.youtube.com/watch?v=zyJVNK7aSW4

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

Other Tablet Flash Devices Cisco Cius ("see us")

"enterprise ready" device Samsung Galaxy Tab

"enterprise ready" device 7" screen features: http://

www.youtube.com/watch?v=v1PO3_iqbQ8

Toshiba 100 Folio (Android) http://

www.youtube.com/watch?v=qfVurbT1ytA

WP7 Based Tablets

Acer Asus (Eee PC T101MT) Cosmos Dell Fujitsu Lenovo (Ideapad S10-3t) Motion Computing (J3500) Samsung (Gloria) Toshiba (Libretto W100)

Upcoming TV Flash Devices Google TV

Open Source Flash 10.1 Support Limited Tests Conducted View Web Apps Partnership with Sony, Intel, Logitech

Adobe TV http://tv.adobe.com/ http://www.youtube.com/watch?v=U_B7-wWnY0Y

"People of Lava" Android TV (Sweden): First Android-based TV(?) http://www.youtube.com/watch?v=NQEMkXJ1Hbg

Google TV – Logitech Revue Specs:

Atom CE4150 Processor 1GB RAM HDMI port

Features 12 bundled applications Local file media player Search capabilities (local/web) Bookmark capability

Limitations no file download capability no screenshot capability

And An Android Car?

Android Car (China Only) Made Available in April, 2010 $10,250 – $19,000 USD Android 2.1 Features:

Real-time Traffic Directions Internet On-line Chat

http://www.youtube.com/watch?v=76gTWZKSAI8

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/

James Ward http://www.jamesward.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, and Dean Iverson

Will Include: UI Controls Media Support Mobile Flex APIs Android Market

Deployment Extensive ExamplesComing in Spring 2011

Presentation will be posted at: http://flash.steveonjava.com/