Developing AIR for Mobile with Flash Professional CS5.5
Upcoming SlideShare
Loading in...5

Developing AIR for Mobile with Flash Professional CS5.5



This is a presentation I gave at

This is a presentation I gave at



Total Views
Views on SlideShare
Embed Views



5 Embeds 604 432 161
http://localhost 8 2 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • ComputerBig ScreenPower SupplyConsistent NetworkKeyboardMouseChairDeskMobileSmall ScreenBatteryInconsistent NetworkFingersSensors

Developing AIR for Mobile with Flash Professional CS5.5 Developing AIR for Mobile with Flash Professional CS5.5 Presentation Transcript

  • Developing AIR for Mobileusing Flash Professional CS5.5 @ChrisGriffith
  • DisclaimerThese opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • Mobile is Everywhere
  • Context
  • mobile vs. desktop
  • Orientation
  • Touch44px
  • TouchThe average fingertip is 3x largerthan the hand cursorMake your buttons 3x largerThen make them even larger
  • With fingers, come hands…
  • Ergonomics How will they touch it? • One Thumb? • Two Thumbs? • Pointer Finger?
  • Pixels Per Inch (PPI)Device Resolution PPI PhysicalNexus One/ HTC Incredible 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 / iPhone 4S 960x640 326 3.5’iPad 1024x768 132 9.7’Galaxy Tab 1024x600 170 7’Data based on respective products published technical specifications
  • What is Adobe AIR?Adobe AIR allows designers anddevelopers by providing a consistentand flexible developmentenvironment for the delivery ofapplications across devices andplatforms.It supports Android™, BlackBerryTablet OS, and iOS mobile operating.
  • AIR for Mobile Overview • GeoLocation • Accelerometer • Camera • Multitouch / Gesture Support • Screen Orientation • Microphone • GPU Acceleration • SQLite DB • And more… • No Native Widgets • No Access to Contacts • Limited SMS Support
  • Creating an Android App: Setup Get the Android SDK: ADB – Android Device Debugger installs apps on your device DDMS - Dalvik Debug Monitor for desktop simulation. Download AIR 3.1 sdk Get AIR for Android runtime .apk installed via Android Market
  • Creating an iOS App: Setup Get the iOS SDK: Allows you to create and install apps on your device $99 per year Download AIR 3.1 sdk
  • Updating AIR
  • Development EnvironmentsEmulator Device
  • Accelerometervar accel:Accelerometer = new Accelerometer();accel.addEventListener(AccelerometerEvent.UPDATE, update);function update(e:AccelerometerEvent):void{ e.accelerationX; e.accelerationY; e.accelerationZ;}
  • Gesturescell.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;}
  • Geolocationvar geo: Geolocation;if (Geolocation.isSupported) { geo = new Geolocation(); geo.addEventListener(GeolocationEvent.UPDATE,updateHandler); geo.setRequestedUpdateInterval(10000);} else { log.text = "Geolocation feature not supported";}
  • Hardware Keysstage.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 }}
  • Orientationstage.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
  • StageWebView• You get a browser in your Flash app!• Good solution for – Maps – Facebook Connect – Remote Content
  • StageText
  • StageVideo
  • Captive RuntimeDevelopers now have more flexibility with theirapp packaging options and can automaticallypackage AIR 3 with their Android™, iOS app intoa single installation file that includes the appand a bundled version of the AIR runtime.
  • ANEsUse native code to take advantage of the sameplatform- and device-specific native capabilitiesand APIs available to native apps, with easyintegration into AIR applications.
  • Limitations
  • No Native Controls
  • No Access to Contacts
  • Building Applications
  • Don’t Fear the Timeline
  • Publishing - Android
  • Publishing - Android
  • Publishing - iOS
  • Publishing - iOS
  • To the Market…
  • Development Guidelines
  • Graphics• Consider bitmaps over vectors• Keep bitmaps as small as possible• Minimize number of vectors• Test your animations with different qualities of StageAvoid, 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;
  • GPU Acceleration cacheAsBitmapMatrix property 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 +=
  • Display ObjectsUse 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 MovieclipsAlpha? RemoveChild? Visible?Even when removed from the display list, the movie clip still dispatchesthe 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();}
  • Resources
  • Thanks!