2. 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...
3. 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.
4. 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 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 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.
5. 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.
6. 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”.
7. 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();
}
8. 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”);
9. 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
}
10. 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
}
11. 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
12. 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();
13. 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
14. 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
15. 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.
16.
17. 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.
18. 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.
19. 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.
20. Scrolling
Scrolling 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 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;
}
}
21. 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();
}
22. 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]);
}
