• Choose a category
• All
• Classic-Fiction

stage.addEventListener(Event.RESIZE, onResize);

stage.dispatchEvent(new Event(Event.RESIZE);

function onResize(event:Event):void {

trace(stage.stageWidth, stage.stageHeight);

}

The event is fired when your application first initializes, and then again when the device changes orientation. If you create an application to be deployed on the desktop, the event fires when the browser window is resized.

Another API is available for orientation changes. It uses StageOrientationEvent and detects changes in many directions. It is not as universal as RESIZE, but it does provide information on the orientation before and after the event.

The default orientation is up and right:

import flash.events.StageOrientationEvent;

if (stage.supportsOrientationChange) {

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE,

onChange);

}

function onChange(event:StageOrientationEvent):void {

trace(event.beforeOrientation);

trace(event.afterOrientation);

// default

// rotatedLeft

// rotatedRight

}

The goal is to use this information to position and perhaps resize your assets as needed. We will discuss this next.

Creating Content for Multiple Screens

To make your application universal, create the core code once and write the environment detection and presentation-specific code on top.

Android 1.6 and later provide support for multiple screens and resolutions. Even though AIR does not have access to Android compatibility features, it is insightful to understand this approach.

The platform divides screen sizes and resolutions into three general sizes: large, normal, and small. Applications provide images or layouts and the sizes they support as part of the manifest file. Android stores the files in folders named drawable and uses the appropriate size based on the device dimension and dpi. If a size is missing, it uses what is available and scales it up or down as needed. If the manifest file declares that multiple screen support is not available, the platform may display the application at medium size on a black background.

For more information, review the Android documentation provided at http://developer.android.com/guide/practices/screens_support.html and http://developer.android.com/guide/topics/resources/index.html.

Flash Builder provides dynamic layout capabilities to manage pixel-level differences in screen resolution and orientation. It offers a scaling mechanism to handle different pixel densities across devices. Existing components have new skins and functionality designed for mobile form factors. New components are added to support mobile-specific UI patterns. The entire application is scaled automatically, and its font size adjusted, if the application property authorDensity is set to true. More information on this is available at http://labs.adobe.com/technologies/flexsdk_hero/samples/.

Asset Scaling and Positioning

You can scale and position your assets dynamically once you have collected the device’s capabilities and current state. As a general rule, do not use absolute or hardcoded values.

Use the screenDPI property to convert inches to pixels, the unit needed for assets:

function toPixels(inches:Number):int {

return Math.round(Capabilities.screenDPI*inches);

}

Here is the same function using the metric system to convert millimeters to pixels, which is easier for those educated outside the United States:

function toPixels(mm:Number):int {

return Math.round(Capabilities.screenDPI*(mm/25.4));

}

Shift your thinking to inches to determine the dimension you want. Then use it to convert your asset to pixels. The following creates a sprite of 10×10 inches, or 100×100 pixels:

var box:Sprite = new Sprite();

box.graphics.beginFill(0x999999);

var pos:int = toPixels(10);

box.graphics.drawRect(0, 0, pos, pos);

box.graphics.endFill();

addChild(box);

Dynamic positioning

Once the art is created at the right size, position it dynamically.

In this example, the sprite is positioned in the center of the screen. Adjust the position to offset it in relation to the registration point