An Introduction to Flash and AIR Development on Android

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

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

STEPHENCHIN

OSWALDCAMPESATO

+ = ?

WE ARE NOT AFFILIATED WITH ADOBE CORPORATION AND DO NOT

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.5.1

Tool Name Description Supports Android

Deployment

Adobe Flash

CS5.5

Visual design tool for building Flash

applications with some Actionscript.

Actionscript Via Plug-in

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

import 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;

Device Name Manufacturer Resolution 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

Density DPI Mapped

Range

Medium

Density

(mdpi)

160 Below 200

High Density

(hdpi)

240 200 to 280

Extra High

Density

(xhdpi)

320 Above 280

<fx:Script><![CDATA[[Bindable]protected var authorDensity: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="ad160ppi" content="160ppi"

click="authorDensity = '160ppi'"/><s:RadioButton id="ad240ppi" content="240ppi"

click="authorDensity = '240ppi'"/><s:RadioButton id="ad320ppi" content="320ppi"

click="authorDensity = '320ppi'"/></s:HGroup><s:Label text="Device DPI: {dpi}"/><s:HSlider id="dpiSlider" minimum="130" maximum="320"

value="@{dpi}" width="100%"/></s:VGroup>

160ppi 240ppi 320ppi

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

Video REST JSON/XML ViewNavigator CSS Etc.

* APIs we will show examples of today

Stage Event Listener stage.addEventListener(

StageOrientationEvent.ORIENTATION_CHANGE,<function callback>);

StageOrientation Values DEFAULT

ROTATED_LEFT

ROTATED_RIGHT

UPSIDE_DOWN

UNKNOWN

import flash.display.StageOrientation;

import flash.events.StageOrientationEvent;

stop();

stage.addEventListener(

StageOrientationEvent.ORIENTATION_CHANGE, onChanged);

function onChanged(event:StageOrientationEvent):void {

play();

}

GESTURES

Two Finger Tap

Pan

Zoom

Rotate

Swipe

Illustrations provided by Gestureworks (www.gestureworks.com)

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;

}}}

protected function swipe(e:TransformGestureEvent):void {

page = (page + e.offsetX + pages.numElements) % pages.numElements;

updateVisibility();}

<s:VGroup gestureSwipe="swipe(event)”/>

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.

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

Blackberry Playbook Android Tablets iPhone/iPad Television

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

“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

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

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

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

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

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

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/

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/

Stephen 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/