Using AIR for Mobile Development

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 performance improvements (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 desktop application 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 should be completed quickly or in incremental steps saved on the device. Applications are defined by category. Find yours and design it accordingly. A utility 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 app needs 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 functionality should be integrated.

Environment and limitations The screen is smaller than on the desktop but the pixel density is higher. Limit the number of items visible on the screen. On average, a mobile CPU is a 10th of the speed of the desktop processor. RAM is also slower and limited. If memory runs out, the application 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 account in your user interface and navigation design. Responsiveness should be a particular focus. Events may not fired if there is too much 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 by listening 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 on top 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 it makes the process much easier including accessing the native debug console to see AS traces and device file system.

Open and Close application import 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 Dimming NativeApplication.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 something like a video streaming application. The screen never times out until the application is in the 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(“”); } function saveData(data):void { return “”; 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.PENDING SharedObjectFlushStatus.FLUSHED event.info.code, SharedObject.Flush.Success, SharedObject.Flush.Failed delete 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 to freefall. It interprets the movement and converts that into three dimensional measurements (x, y and z acceleration). You can change the frequency of update events 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 location sensor. 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. Know your repertoire and use the right one for your application. import flash.ui.MultiTouch; import flash.ui.MultiTouchInputMode; Detect your device capabilites: trace(Multitouch.supportGestureEvents); // boolean trace(Multitouch.supportsTouchEvents); // boolean trace(Multitouch.supportedGestures); // list trace(Multitouch.maxTouchPoints); // integer Multitouch.InputMove.NONE (default) // all interpretated as mouse events Multitouch.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 InteractiveObject stage.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

TouchEvent import 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 compositing is costly. If you don’t need an item temporarily, set its visible to false. Avoid blends, alpha, filters, excessive drawing. Don’t overlay (everything counts). Use clean 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 that it does not need to be recalculated all the time. Remove alpha channels from 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 encoding can use as much power as needed. Stop timers, intervals and redrawing. Put video 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: Slider to 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 new Flash 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 Text Framework 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 of information. 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 time and manage them well. Garbage collecting is equally expensive and can show a noticeable slowdown in the application. 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 monitor the available memory, use trace(System.totalMemory / 1024). Whenever possible, recycle objects.

Scrolling Scrolling through a large list with images, text can be one of the most consuming rendering 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 EnterFrame function 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 button function onGoBack(me:MouseEvent):void { dispatchEvent(new Event(“goBack”)); } // current view listening to event currentView.addEventListener(“goBack”, goBack, false, 0, true); // view manager static 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.zip twitter: v3ronique http://help.adobe.com/en_US/as3/mobile/index.html http://labs.adobe.com/technologies/flex/mobile/ http://blogs.adobe.com/cantrell/ http://www.bit-101.com/blog/?p=2601 http://www.dgrigg.com/post.cfm/05/12/2010/ Updates-to-Skinnable-Minimal-Components http://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_density http://www.htc.com/us/discover/quietlybrilliant/?intcid=ins100510fileslide Read on Open Handset Alliance Read on Open Screen Project Thank you.

http://www.slideshare.net	171
http://ar-ui.blogspot.com	44
http://www.jordimir.com	24
http://www.francescoflorio.info	13
http://facebook.slideshare.com	3
http://ar-ui.blogspot.co.il	2
url_unknown	1

Using AIR for Mobile Development

by Veronique Brossier

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 258

Statistics

Using AIR for Mobile Development Presentation Transcript