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