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();

 

Advertisements

~ by brianchau on August 2, 2011.

3 Responses to “Handling Auto-Orient AIR Mobile App using Flash CS5.5”

  1. […] Handling Auto-Orient AIR Mobile App using Flash CS5.5 Brian ChauAug 2, 2011 Handling Auto-Orient AIR Mobile App using Flash CS5.5. Unlike desktop app, a user may rotate their […]

  2. what if i want multiple rotations

  3. Can you please help me with something? I am new to flash (CS5).
    I want to create a re-orientate flash, but I keep getting this error:

    Scene 1, Layer ‘Actions’, Frame 1, Line 19 1046: Type was not found or was not a compile-time constant: StageOrientationEvent.

    here is the actual code of the object ->

    /* Re-orient Objects on Device Rotation
    Re-orient object(s) when device is rotated.
    Specific objects can be oriented differently from the rest of the application.
    This can be used to make an object stay at its current rotation or to rotate it independently of the application.

    Instructions:
    1. Turn on the “Auto orientation” option in File -> AIR for Android Settings.
    */

    import flash.display.MovieClip;
    import StageOrientationEvent;

    var fl_initialRotation_3 = movieClip.rotation; // Save the initial rotation value

    stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, fl_OrientationChange_3);

    function fl_OrientationChange_3(event:StageOrientationEvent):void
    {
    switch (stage.deviceOrientation)
    {
    case StageOrientation.DEFAULT:
    {
    // Re-orient display objects on default (right-side up) orientation.
    movieClip.rotation = fl_initialRotation_3; // Restore the initial rotation value
    break;
    }
    case StageOrientation.ROTATED_RIGHT:
    {
    // Re-orient display objects based on right-hand orientation.
    movieClip.rotation += 90;
    break;
    }
    case StageOrientation.ROTATED_LEFT:
    {
    // Re-orient display objects based on left-hand orientation.
    movieClip.rotation -= 90;
    break;
    }
    case StageOrientation.UPSIDE_DOWN:
    {
    // Re-orient display objects based on upside-down orientation.
    movieClip.rotation += 180;
    break;
    }
    }
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: