![Page 1: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/1.jpg)
Developing AIR for Android using Flash CS5
Chris Griffith
![Page 2: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/2.jpg)
These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
Disclaimer
![Page 3: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/3.jpg)
Who has built for mobile?
![Page 4: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/4.jpg)
Who uses what?
Native?
Web?
Other?
Flash/Flex?
![Page 5: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/5.jpg)
![Page 6: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/6.jpg)
My Mobile App Portfolio
![Page 7: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/7.jpg)
Mobile is Everywhere
![Page 8: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/8.jpg)
Designing for Mobile
![Page 9: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/9.jpg)
Context
![Page 10: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/10.jpg)
mobile vs. desktop
![Page 11: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/11.jpg)
Orientation
![Page 12: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/12.jpg)
Touch
44px
![Page 13: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/13.jpg)
Touch
The average fingertip is 3x larger than the hand cursor
Make your buttons 3x larger
Then make them even larger
![Page 14: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/14.jpg)
With fingers, come hands…
![Page 15: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/15.jpg)
Ergonomics
How will they touch it?• One Thumb?• Two Thumbs?• Pointer Finger?
![Page 16: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/16.jpg)
![Page 17: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/17.jpg)
Device Resolution PPI Physical
Nexus One/ HTC Incredible/ HTC Desire
800x480 254 3.7’
HTC EVO/ HTC Desire HD 800x480 217 4.3’
Droid/ Droid 2 854x480 265 3.7’
Droid X 854x480 240 4.3’
Samsung Galaxy S Vibrant 800x480 232 4.0’
iPhone 3GS and lower 480x320 163 3.5’
iPhone 4 960x640 326 3.5’
iPad 1024x768 132 9.7’
Galaxy Tab 1024x600 170 7’
Data based on respective products published technical specifications
Pixels Per Inch (PPI)
![Page 18: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/18.jpg)
The Adobe® AIR® 2.6 runtime enables developers to use HTML, JavaScript, and ActionScript® to build web applications that run as standalone client applications without the constraints of a browser. Adobe AIR allows designers and developers by providing a consistent and flexible development environment for the delivery of applications across devices and platforms. Support for Android™, BlackBerry Tablet OS,* and iOS mobile operating systems and televisions is now available.
![Page 19: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/19.jpg)
• GeoLocation• Accelerometer• Camera• Multitouch / Gesture Support• Screen Orientation• Microphone• GPU Acceleration• SQLite DB• StageWebView
• No Native Widgets• No Multiple Camera Support• No Access to Contacts• Limited SMS Support
AIR for Android Overview
![Page 20: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/20.jpg)
Get the Android SDK: http://developer.android.com/sdk
Allows you to create and install apps on your device
Android - SDK Manager to install packages etc.
ADB – Android Device Debugger installs apps on your device
DDMS - Dalvik Debug Monitor for desktop simulation.
Download AIR 2.6 http://www.adobe.com/products/air/
Get AIR for Android runtime .apk installed
Creating an Android App: Setup
![Page 21: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/21.jpg)
Emulator Device
Development Environments
![Page 22: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/22.jpg)
Accelerometer
var accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);
function update(e:AccelerometerEvent):void{
e.accelerationX;e.accelerationY;e.accelerationZ;
}
![Page 23: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/23.jpg)
Gestures
cell.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);function onZoom(e:TransformGestureEvent):void{
cell.scaleX *= e.scaleX;cell.scaleY = cell.scaleX;
}
cell.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);function onRotate(e:TransformGestureEvent):void{
cell.rotation += e.rotation;}
![Page 24: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/24.jpg)
Geolocation
var geo: Geolocation;
if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE, updateHandler); geo.setRequestedUpdateInterval(10000);} else { log.text = "Geolocation feature not supported"; }
![Page 25: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/25.jpg)
Hardware Keys
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown, false, 0, true);
function onKeyDown(event:KeyboardEvent):void { //Back Key if (event.keyCode == Keyboard.BACK) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }
//Menu Key if (event.keyCode == Keyboard.MENU) { event.preventDefault(); // to kill event from running default behavior //do your own back stuff }}
![Page 26: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/26.jpg)
Orientation
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
function setPosition():void
{
vidHolder.x = stageWidth/2 - vidHolder.width/2;
vidHolder.y = stageHeight/2 - vidHolder.height/2;
//If the layout is vertical
if (stage.stageWidth < stage.stageHeight)
{
//Adjust graphics
}
}
setPosition();
stage.addEventListener(Event.RESIZE, resizeLayout);
function resizeLayout(e:Event):void
{
setPosition();
}
![Page 27: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/27.jpg)
SQLite Support
http://www.dehats.com/drupal/?q=node/58
![Page 28: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/28.jpg)
StageWebView
• You get a browser in your Flash app!
• Good solution for– Maps– Facebook Connect– Remote Content
![Page 29: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/29.jpg)
Limitations
![Page 30: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/30.jpg)
No Native Controls
http://blog.kevinhoyt.com/2010/05/some-flash-android-components/
![Page 31: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/31.jpg)
No Access to Contacts
![Page 32: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/32.jpg)
Building Applications
![Page 33: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/33.jpg)
Don’t Fear the Timeline
![Page 34: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/34.jpg)
Publishing
![Page 35: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/35.jpg)
Publishing
![Page 36: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/36.jpg)
To the Market…
![Page 37: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/37.jpg)
.ipa
.air
.air
.apk
.exe
.dmg
AIR Packaging & Distribution Workflow
![Page 38: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/38.jpg)
Development Guidelines
![Page 39: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/39.jpg)
Graphics
• Consider bitmaps over vectors• Keep bitmaps as small as possible• Minimize number of vectors• Test your animations with different qualities of Stage
Avoid, if possible:• Filters• Blend modes• Transparency• Perspective distortion
![Page 40: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/40.jpg)
GPU Acceleration
Set rendering mode to GPU
Make sure cacheAsBitmap is set to true on your DisplayObject like this:square.cacheAsBitmap = true;
http://blogs.adobe.com/cantrell/archives/2010/10/gpu-rendering-in-adobe-air-for-android.html
![Page 41: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/41.jpg)
GPU Acceleration
cacheAsBitmapMatrix property
http://blog.theflashblog.com/?p=2386
Make sure to assign a Matrix to the cacheAsBitmapMatrix property on your DisplayObject like this:square.cacheAsBitmapMatrix = new Matrix();
![Page 42: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/42.jpg)
Text
Use opaque background over transparency
Avoid TLF Test different anti-aliasing techniques
(animation, bitmap text...) Avoid frequently-updated text Use appendText vs. text +=
![Page 43: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/43.jpg)
Horizontal? Vertical? Both?
• Content should dictate orientation, but don’t forget about the keyboard.• Consider adjusting content based on layout:
![Page 44: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/44.jpg)
Display Objects
Use the appropriate type of display object
Objects that aren’t interactive, use Shape();trace(getSize(new Shape()));// output: 216
Interactive but no timeline? Use Sprite();trace(getSize(new Sprite()));// output: 396
Need animation? Use Movieclip();trace(getSize(new MovieClip()));// output: 416
![Page 45: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/45.jpg)
Freeing Movieclips
Alpha? RemoveChild? Visible?
Even when removed from the display list, the movie clip still dispatches the Event.ENTER_FRAME event.
runningBoy.addEventListener(Event.REMOVED_FROM_STAGE, deactivate);function deactivate(e:Event):void{
e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement);
e.currentTarget.stop();
}
![Page 46: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/46.jpg)
Flex for Mobile - HERO
http://labs.adobe.com/technologies/flexsdk_hero/
![Page 47: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/47.jpg)
Hero in a Nutshell: Mobile Application Development
Allow developers to create a single mobile project that will run on multiple mobile environments
• UI components supporting touchscreen interaction
• Application framework fitted with common mobile UI patterns
• Interactive performance tuned for mobile devices
![Page 48: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/48.jpg)
Resources
Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.
https://market.android.com/details?id=air.adobe.flex.TourDeMobileFlex
![Page 49: Developing AIR for Android with Flash Professional CS5](https://reader038.vdocuments.us/reader038/viewer/2022102900/54b6dfce4a7959e5348b45d9/html5/thumbnails/49.jpg)
Resources