They are both environments to develop rich media applications across platforms. They both use ActionScript.

Flash Player 10.1 runs in the browser. AIR is for desktop and mobile applications and requires packaging, installation and certificate.

The player is dependent on browser security and has very limited access to local files. AIR has access to local storage and system files.

Both include the following improvements:Support for multi-touch and gestures input model, rendering performanceimprovements (bitmaps especially), leverage hardware acceleration of graphics and video, battery and CPU optimization (i.e. framerate drops in sleep mode), better memory utilization, faster start-up time, scripting optimization.

AIR has additional functionality specific to mobile devices...

Is your application a good target for mobile devices?

Is your application a mobile application, web-only content or hybrid application?For optimum use, target complementary applications. Do not just port a desktopapplication to the phone.

Define your application in one single sentence. Aim for simplicity and excellence.The user only opens mobile applications for a few minutes at a time. Tasks shouldbe completed quickly or in incremental steps saved on the device.

Applications are defined by category. Find yours and design it accordingly. Autility app has a narrow focus, simplicity and ease of use. A productivity app may need to focus on data served and network connectivity. An immersive appneeds to discretely display the essential among a large amount of information.

Become familiar and make use of the multi-Touch interface: direct manipulation,responsiveness and immediate feedback are key. Design and functionalityshould be integrated.

Environment and limitations

The screen is smaller than on the desktop butthe pixel density is higher. Limit the number ofitems visible on the screen.

On average, a mobile CPU is a 10th of the speed ofthe desktop processor. RAM is also slower and limited. If memory runs out, the ap-plication is terminated. The program stack is reduced. Some techniques are keep-ing the frame rate low (24), watching resource use, creating objects up front, loading resources lazily and being aware of the garbage collection.

You only have one screen at a time (windows do not exist). Take it into accountin your user interface and navigation design.

Responsiveness should be a particular focus. Events may not fired if there is toomuch going on. Hit targets must be large enough for finger touch (44 x 57).

Your application may quit if you receive a phone call. Plan for termination bylistening to events. Do not use a close or quit button.

What is a SDK?

Each environment has its own Software Development Kit.

If you use AIR to develop for a mobile device, it creates an additional layer ontop of the native code and communicate with it. You do not need to know about it. However reading a little bit about the device may be informative.

AIR takes care of compiling your ActionScript code into native code (Apple OS) or as Runtime. The application format for iPhone and iPad is IPA. The format for Android is APK. You may embed other files (images, XML) as well as a custom icon.

For Android development, the SDK can be found at:http://developer.android.com/sdk/index.html

You do not need the SDK to install your application on the device but itmakes the process much easier including accessing the native debug consoleto see AS traces and device file system.

Open and Close applicationimport flash.desktop.NativeApplication; import flash.events.Event;

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate);

NativeApplication.exit() // Using the back key press event - e.preventDefault();NativeApplication.nativeApplication.dispatchEvent(”exiting”, onExit)import flash.display.StageAlign;import flash.display.StageScaleMode;this.stage.scaleMode = StageScaleMode.NO_SCALE;this.stage.align = StageAlign.TOP_LEFT;

Screen DimmingNativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.NORMAL; NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;

It disables auto-lock and screen dimming so that AIR never goes to sleep for somethinglike a video streaming application. The screen never times out until the application is inthe foreground unless the user enables the “screen timout/auto-lock”.

Saving data on phone using the File System

import flash.filesystem.File;import flash.filesystem.FileMode;import flash.filesystem.FileStream;var location:String = “Documents/yourData.txt”;

function getData():String {var myFile = File.documentsDirectory.resolvePath(location);if (myFile.exists == true) { var fileStream:FileStream = new FileStream(); fileStream.open(myFile, FileMode.READ); var data:String = fileStream.readUTFBytes(myFile.size); fileStream.close(); return data;} else { saveData(“”);}return “”;}

function saveData(data):void {var myFile = File.documentsDirectory.resolvePath(location);var fileStream:FileStream = new FileStream();fileStream.open(myFile, FileMode.WRITE);fileStream.writeUTFBytes(data);fileStream.close();}

Saving data on phone using Local Shared Object

import flash.net.SharedObject;import flash.net.SharedObjectFlushStatus;

var so:SharedObject = SharedObject.getLocal(“myApplication”);so.data.session = “20;50;100”;flushStatus = so.flush(10000);

mySo.addEventListener(NetStatusEvent.NET_STATUS, onFlushStatus);SharedObjectFlushStatus.PENDINGSharedObjectFlushStatus.FLUSHED

event.info.code, SharedObject.Flush.Success, SharedObject.Flush.Faileddelete so.data.session;

Use an interval or timer to save regularly:import flash.utils.setInterval; setInterval(save, 30*1000);

Other methods: SQLite, Encrypted Local Storage (user and password)var conn:SQLConnection = new SQLConnection();var dbFile:File = File.applicationDirectory.resolvePath(“DBSample.db”);

Accelerometer

An accelerometer is a device that measures the acceleration experienced relative tofreefall. It interprets the movement and converts that into three dimensionalmeasurements (x, y and z acceleration). You can change the frequency of updateevents to conserve battery life. The default is the device’s interval.

import flash.sensors.Accelerometer;import flash.events.AccelerometerEvent;

var accelerometer = new Accelerometer();var isSupported:Boolean = Accelerometer.isSupported;

accelerometer .addEventListener(AccelerometerEvent.UPDATE, onMove);accelerometer.setRequestedUpdateInterval(400);

private function onMove(event:AccelerometerEvent):void { ball.x += event.accelerationX *15; // positive from left to right ball.y += (event.accelerationY *15)*-1; // positive from bottom to top ball.scaleX = ball.scaleY = event.accelerationZ*15; // - positive if face moves closer // event.timestamp; // time since beginning of capture}

GeoLocation

flash.events.GeolocationEvent displays updates directly from the device locationsensor. It contains latitude, longitude, altitude, speed and heading (compass).

import flash.sensors.Geolocation;import flash.events.GeolocationEvent;

trace(Geolocation.isSupported);var geo = new Geolocation();geo.setRequestedUpdateInterval(1000);geo.addEventListener(AccelerometerEvent.UPDATE, onTravel);geo.addEventListener(StatusEvent.STATUS, onGeolocationStatus);}

private function onTravel(event:GeolocationEvent):void { // event.latitude, event.longitude; - in degrees // event.heading ; - towards North // event.speed; - meters/second // event.horizontalAccuracy, event.verticalAccuracy; // event.altitute; - in meters // event.timeStamp; - in milliseconds}

Screen Orientation

Your application can be viewed in portrait or landscape orientation or both.You may choose to design for one orientation only and prevents change. Four properties were added to the stage object: autoOrients (default true),deviceOrientation (default landscape), supportsOrientationChange (boolean),orientation (DEFAULT, ROTATED_LEFT, ROTATED_RIGHT, UPSIDE_DOWN, UNKNOWN).

import flash.events.StageOrientationEvent;

trace(Stage.supportsOrientationChange);stage.setOrientation(orientation:String)stage.addEventListener(ORIENTATION_CHANGE, onChanged);stage.addEventListener(ORIENTATION_CHANGING, onChanging);

function onOrientationChanged(event:Event):void { // event.beforeOrientation beforeBounds // event.afterOrientation afterBounds someSprite.width = stage.stageWidth - 20; someSprite.height = stage.stageHeight - 20;}

This.stage.addEventListener(Event.RESIZE, onStageResized);// works and devices and browser

Multi-Touch

Allows you to detect multiple physical touches and moves on the screen. Knowyour repertoire and use the right one for your application.

import flash.ui.MultiTouch;import flash.ui.MultiTouchInputMode;

Detect your device capabilites:trace(Multitouch.supportGestureEvents); // booleantrace(Multitouch.supportsTouchEvents); // booleantrace(Multitouch.supportedGestures); // listtrace(Multitouch.maxTouchPoints); // integer

Multitouch.InputMove.NONE (default) // all interpretated as mouse eventsMultitouch.InputMove.GESTURE;Multitouch.InputMove.TOUCH_POINT;

The device and Operating System interpret the move.The nested element (”target node”) and its parents receive the event.For performance improvement, use event.stopPropagation();

Gesture Event

The Flash platform synthetizes multi-touch events into a single event.

import flash.ui.MultiTouch;import flash.ui.MultiTouchInputMode;import flash.events.TransformGestureEvent;import flash.events.PressAndTapGestureEvent;

Multitouch.inputMode = MultitouchInputMode.GESTURE;

// listener must be an InteractiveObjectstage.addEventListener(TransformGestureEvent.GESTURE_PAN);stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE);stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE);stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM);stage.addEventListener(TransformGestureEvent.GESTURE_TWO_FINGER_TAP);stage.addEventListener(PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP);

event.offsetX & event.offsetY, event.rotation, event.scaleX & event.scaleY,event.tapStageX & event.tapStageY, event.tapLocalX & event.tapLocalY

TouchEventimport flash.ui.MultiTouch;import flash.ui.MultiTouchInputMode;import flash.events.TouchEvent;Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

var dots:Object = {};stage.addEventListener(TouchEvent.TOUCH_BEGIN);var dot:Sprite = new Sprite();dot.startTouchDrag(event.touchPointID, true);dots[e.touchPointID] = dot;

stage.addEventListener(TouchEvent.TOUCH_MOVE);var dot = dots[event.touchPointID];

stage.addEventListener(TouchEvent.TOUCH_END);var dot = dots[event.touchPointID];dot.stopTouchDrag();removeChild(dot);

TOUCH_OVER, TOUCH_ROLL_OVER, TOUCH_ROLL_OUT, TOUCH_TAP, isPrimaryTouch-Point, pressure, sizeX, sizeY

TouchEvents uses more power than MouseEvents (& doesn’t work everywhere).Use appropriately

Art, Vector art and Bitmaps

The new versions of the player and AIR offer improvement on rendering bitmaps.

Some best practices to improve performance:Limit the number of items visible on stage. Each item rendering and compositingis costly. If you don’t need an item temporarily, set its visible to false. Avoidblends, alpha, filters, excessive drawing. Don’t overlay (everything counts). Useclean shapes at edges. Prepare art at final size. Avoid the drawingAPI.

Bitmaps perform well but don’t scale well. Vectors scale but don’t perform.Resize vector art then convert them as bitmap by using cacheAsBitmap so thatit does not need to be recalculated all the time. Remove alpha channelsfrom PNGs (PNG crunch).

You can also use BitmapData.draw() for compositing or real-time conversion.

Flatten the displayList to avoid long event chains.

While playing video, pause all other processes so that video decoding and encodingcan use as much power as needed. Stop timers, intervals and redrawing. Putvideo components below, not on top, of the video.

Frameworks and Components

Flex components are too heavy for mobile development.Adobe is developing a mobile-optimized version of the Flex framework: Sliderto build Flex applications that run across mobile devices

Keith Peters developed the Minimal Components.

Derrick Grigg adapted them to make them skinnable: Skinnable Minimal Components.

Fonts and Text

Font families can add a lot of weight to your application. Take advantage of the newFlash CS5 font management panel to only include what you need.

If you use TLF instead of Classic text, make sure to “merge with code”. The TextFramework is currently heavy. Use the Flash Text Engine for non-editable text.

Device fonts render faster than embedded fonts. These are available for Android:Clockopia.ttf, DroidSerif-Bold.ttf, DroidSans-Bold.ttf, DroidSerif-BoldItalic.ttf,DroidSans.ttf, DroidSerif-Italic.ttf, DroidSansFallback.ttf, DroidSerif-Regular.ttf,DroidSansMono.ttf

Test the virtual keyboard. It is present when the user edits a text field.

Typographic hierarchy is poweful and familiar to categorize the importance ofinformation.

Clicking on an editable text brings up the device keyboard.

Garbage collection

Allocating new blocks of memory is costly. Learn to create objects at the right timeand manage them well.

Garbage collecting is equally expensive and can show a noticeable slowdown in theapplication. To collect unecessary objects, remove all reference and set them to null.Disposing of bitmaps is particularly important. A new function disposeXML() give the equivalent functionality for a XML tree.

Development can now call System.gc() in AIR and the Debug Flash Player. To monitorthe available memory, use trace(System.totalMemory / 1024).

Whenever possible, recycle objects.

ScrollingScrolling through a large list with images, text can be one of the most consuming ren-dering activities. Here are tips to manage this process.

Only make visible the items that are on the screen (or only create enough containers to fit the screen and recycle them)for (var i:int = 0; i < bounds; i++) { var mc = container.getChildAt(i); var pos:Number = (container.y + mc.y); mc.visible = (pos > -38 || pos < sHeight); // set visibility based on position}

Store the delta value on TouchEvent.move and redraw on EnterFramefunction touchBegin(e:TouchEvent):void { stage.addEventListener(Event.ENTER_FRAME, frameEvent, false, 0, true);}function touchMove(e:TouchEvent):void { newY = e.stageY;}function frameEvent(e:Event):void { if (newY != oldY) { container.y += (newY - oldY); oldY = newY; } }

View Manager

It creates the different views and manages them during the life of the application.

ViewManager.init(this);ViewManager.createView(“intro”, new IntroView());ViewManager.createView(“speakers”, new SpeakersView());

static private var viewList:Object = {};

static public function createView(name:String, instance:BaseView):void { viewList[name] = instance;} static private function setCurrentView(object:Object):void { currentView.onHide(); timeline.removeChild(currentView); currentView = viewList[object.destination]; timeline.addChild(currentView); currentView.onShow(); }

Navigation

The viewManager keeps track of the views displayed to create a bread crumb navigation.When pressed the back button, the goBack event is dispatched.

// back buttonfunction onGoBack(me:MouseEvent):void { dispatchEvent(new Event(“goBack”)); }

// current view listening to eventcurrentView.addEventListener(“goBack”, goBack, false, 0, true);

// view managerstatic private var viewStack:Array = [];

viewStack.push(object); // {destination:”session”, id:me.currentTarget.id}setCurrentView(object);

static public function goBack(e:Event):void { viewStack.pop(); setCurrentView(viewStack[viewStack.length - 1]);}

Conclusion

http://www.v-ro.com/fatc.ziptwitter: v3ronique

http://help.adobe.com/en_US/as3/mobile/index.htmlhttp://labs.adobe.com/technologies/flex/mobile/http://blogs.adobe.com/cantrell/http://www.bit-101.com/blog/?p=2601http://www.dgrigg.com/post.cfm/05/12/2010/ Updates-to-Skinnable-Minimal-Componentshttp://pushbuttonengine.com/

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_densityhttp://www.htc.com/us/discover/quietlybrilliant/?intcid=ins100510fileslide

Read on Open Handset AllianceRead on Open Screen Project

Thank you.