Limit orientation on devices with ActionScript and the application descriptor

A short one…

To limit orientation of the stage on devices you don’t need much. In this example I want the application to only be displayed in landscape mode.

Loop up the aspectRatio and autoOrients tags in the application descriptor file, and make sure it looks like the following:

1
2
3
4
5
<initialWindow>
    ...
    <aspectRatio>landscape</aspectRatio>
    <autoOrients>true</autoOrients>
</initialWindow>

Then, in the application code, check if the stage is set to auto orient, and if so, listen to the ORIENTATION_CHANGING event:

1
2
if( stage.autoOrients )
    stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGING, autoOrient );

In the eventlistener, check what the futute orientation will be, it is stored in the event parameter as it’s afterOrientation property. If that orientation is NOT what you would like it to be, call the event’s preventDefault() method. The stage will not orient itself.

Below you see the two orientations defining the portrait orientation, StageOrientation.DEFAULT and StageOrientation.UPSIDE_DOWN. The other two, StageOrientation.ROTATED_RIGHT and StageOrientation.ROTATED_LEFT represent the landscape orientation. Since the latter are what I want, the first are prevented.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Rotate only to landscape orientations
 * @param event
 *
 */    
protected function autoOrient(event:StageOrientationEvent):void
{
    switch( event.afterOrientation )
    {
        case StageOrientation.DEFAULT:
        case StageOrientation.UPSIDE_DOWN:                 
            event.preventDefault();
            break;
    }
}

You can find more options at: Adobe’s website

(It turned out to be much easier than reading out the accelerometer and rotating the stage yourself…)

Folowing code is a more complete example in case you want to test some code. It is the main (and only) class from a Flash Builder project (uses AIR 3 and Keith Peters (AKA Bit-101) his minimalcomps):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package
{
    import com.bit101.components.CheckBox;
    import com.bit101.components.TextArea;
   
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageOrientation;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.events.StageOrientationEvent;
   
    [SWF( width="1024", height="768" )]
    public class RotationResearch extends Sprite
    {

        private var noRotationCheckBox:CheckBox;
        private var noPortraitCheckBox:CheckBox;
        private var noLandscapeCheckBox:CheckBox;

        private var noRotation:Boolean;
        private var noPortrait:Boolean;
        private var noLandscape:Boolean;

        private var textArea:TextArea;
       
        private var scaleModifier:int = 3;
       
        public function RotationResearch()
        {
            super();
           
            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
       
            if( stage.autoOrients )
                stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGING, handleOrientation );
           
            stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGE, onOrientation );
           
            buildUI();
        }
       
        /**
         * Create User interface
         *
         */    
        private function buildUI():void
        {
            noRotationCheckBox = new CheckBox( this, 40, 40, "Stop all rotation", allRotationCheckboxHandler );
            noRotationCheckBox.scaleX = noRotationCheckBox.scaleY = scaleModifier;
           
            noPortraitCheckBox = new CheckBox( this, 40, this.height + 40, "Stop portrait orientation", portraitRotationCheckboxHandler );
            noPortraitCheckBox.scaleX = noPortraitCheckBox.scaleY = scaleModifier;
           
            noLandscapeCheckBox = new CheckBox( this, 40, this.height + 40, "Stop landscape orientation", landscapeRotationCheckboxHandler );
            noLandscapeCheckBox.scaleX = noLandscapeCheckBox.scaleY = scaleModifier;
           
            textArea = new TextArea( this, 40, this.height + 40 );
            textArea.scaleX = textArea.scaleY = scaleModifier;
        }
       
        /*
         * Checkbox eventhandlers
         *
         */
        private function allRotationCheckboxHandler( event:MouseEvent ):void
        {  
            noRotation = noRotationCheckBox.selected;
        }
        private function portraitRotationCheckboxHandler( event:MouseEvent ):void
        {
            noPortrait = noPortraitCheckBox.selected;
        }
        private function landscapeRotationCheckboxHandler( event:MouseEvent ):void
        {
            noLandscape = noLandscapeCheckBox.selected;
        }
       
        /**
         * Output of last rotation after the fact
         *  
         * @param event
         *
         */    
        protected function onOrientation( event:StageOrientationEvent ):void
        {
            textArea.text = "orientation was: " + event.beforeOrientation + "\norientation is: " + event.afterOrientation
        }
       
        /**
         * Triggered before rotaion takes place.
         *
         * Checks which orientations are allowed based on the checkboxes
         *
         * @param event
         *
         */    
        protected function handleOrientation(event:StageOrientationEvent):void
        {
            if( noRotation )
            {
                event.preventDefault();
                return;
            }
           
            switch( event.afterOrientation )
            {
                case StageOrientation.DEFAULT:
                    if( noPortrait )
                        event.preventDefault();
                    break;
                case StageOrientation.UPSIDE_DOWN:
                    if( noPortrait )
                        event.preventDefault();
                    break;
               
                case StageOrientation.ROTATED_LEFT:
                    if( noLandscape )
                        event.preventDefault();
                    break;
                case StageOrientation.ROTATED_RIGHT:
                    if( noLandscape )
                        event.preventDefault();
                    break;
            }
        }
    }
}

Tags: , ,

This entry was posted on Thursday, December 1st, 2011 at 9:25 pm and is filed under Blog. You can follow any comments to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.