Posts Tagged: AIR 3

Blog — Comments Off
1
Dec 11

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;
            }
        }
    }
}
Blog — Comments Off
19
Oct 11

GPU accelerated rendering with Starling

A note to myself: I need to experiment with GPU accelerated rendering. Really…

With the new GPU rendering capabilities of Flash player 11 and AIR 3, which go under the name Stage3D (formerly known as MoleHill) performance should be greatly improved in … some, all(?) cases. Since it has been a long time I did anything with actual 3D modeling, the logical place to start is 2D. Dreading the complexity of the Stage3D API’s I will focus on the Starling framework. There is a nice example of what complexity Starling hides from you on the Adobe devnet pages. The following links will be my first information providers while experimenting I guess.

Of course the Starling API documentation.

Also: Lee Brimelow has two video tutorials on his gotoAndLearn site. One introducing the Starling framework and one explaining how to use particles in the Starling framework with one by one design’s particle editor. Lee will also host a workshop at Flash in the Can Amsterdam 2012.

The framework was written by the Austrian Gamua, also responsible for the sparrow framework for objective-C (another thing which desperately needs being looked in to) which in it’s turn is loosly based on the Flash display list API.

If you wonder why a separate library is needed in stead of using the standard display list, the following article explains why Starling is a good idea for 2D GPU rendered content.