Handling Auto-Orient AIR Mobile App using Flash CS5.5

Unlike desktop app, a user may rotate their handheld mobile device as they interact with the mobile app. In the case of AIR mobile app, this can be handled quite easily in both Flash or Flash Builder. This post is focused on Flash althought the Actionscript is the same in Flex.

When publish an AIR for Android or iOS app, simply select “Auto orientation” and the app will respond to device rotation event: StageOrientationEvent.ORIENTATION_CHANGE

To reflow the content from portrait to landscape or vice versa as the device is rotated, simply use the timeline and add keyframes: one keyframe (@frame 1) for content to be display in portrait mode and another keyframe (@frame6) to display content in landscape mode. Then add in the following codes:

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, fl_OrientationChange);

function fl_OrientationChange(event:StageOrientationEvent):void
{
switch (stage.deviceOrientation)
{
case StageOrientation.DEFAULT:
{
// Re-orient display objects on default (right-side up) orientation.
gotoAndStop(1);
break;
}
case StageOrientation.ROTATED_RIGHT:
{
// Re-orient display objects based on right-hand orientation.
gotoAndStop(6)
break;
}
case StageOrientation.ROTATED_LEFT:
{
// Re-orient display objects based on left-hand orientation.
gotoAndStop(6);
break;
}
case StageOrientation.UPSIDE_DOWN:
{
// Re-orient display objects based on upside-down orientation.
gotoAndStop(1);
break;
}
}
}

stop();

 

Advertisement

~ by brianchau on August 2, 2011.