developing air for android with flash professional cs5
Post on 15-Jan-2015
3.426 Views
Preview:
DESCRIPTION
TRANSCRIPT
Developing AIR for Android using Flash CS5
Chris Griffith
These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
Disclaimer
Who has built for mobile?
Who uses what?
Native?
Web?
Other?
Flash/Flex?
My Mobile App Portfolio
Mobile is Everywhere
Designing for Mobile
Context
mobile vs. desktop
Orientation
Touch
44px
Touch
The average fingertip is 3x larger than the hand cursor
Make your buttons 3x larger
Then make them even larger
With fingers, come hands…
Ergonomics
How will they touch it?• One Thumb?• Two Thumbs?• Pointer Finger?
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)
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.
• 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
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
Emulator Device
Development Environments
Accelerometer
var accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);
function update(e:AccelerometerEvent):void{
e.accelerationX;e.accelerationY;e.accelerationZ;
}
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;}
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"; }
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 }}
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();
}
SQLite Support
http://www.dehats.com/drupal/?q=node/58
StageWebView
• You get a browser in your Flash app!
• Good solution for– Maps– Facebook Connect– Remote Content
Limitations
No Native Controls
http://blog.kevinhoyt.com/2010/05/some-flash-android-components/
No Access to Contacts
Building Applications
Don’t Fear the Timeline
Publishing
Publishing
To the Market…
.ipa
.air
.air
.apk
.exe
.dmg
AIR Packaging & Distribution Workflow
Development Guidelines
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
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
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();
Text
Use opaque background over transparency
Avoid TLF Test different anti-aliasing techniques
(animation, bitmap text...) Avoid frequently-updated text Use appendText vs. text +=
Horizontal? Vertical? Both?
• Content should dictate orientation, but don’t forget about the keyboard.• Consider adjusting content based on layout:
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
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();
}
Flex for Mobile - HERO
http://labs.adobe.com/technologies/flexsdk_hero/
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
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
Resources
Thanks!
Email: chris.griffith@gmail.com
Twitter: @chrisgriffith
Blog: http://chrisgriffith.wordpress.com/
top related