Fullscreen with masks not added to stage

Just so anyone else won’t waste any time on this…

Situation

You want a Flash file allowing fullscreen playback in the browser. Next to this you have a DisplayObject somewhere on the stage with a mask applied to it by script.

Problem

The mask does not work properly in fullscreen mode. When going fullscreen, the content scales as it should but the mask shows only a portion of what it showed before.

Solution

If you dit not add the mask to the stage (which you don’t really need to do if nothing is about to scale), the mask does not scale with the rest of the content when the StageDisplayState goes FULL_SCREEN. Because of this it reveals the same area in square pixels (w x h), but since all the rest is scaled up, this is only a small surface compared to what it revealed before.

So, the lesson to be learned: If you’re gonna allow fullscreen mode in your application and use masks, add them to the display list. Maybe just add them to the display list, period. The few times not having to type the line:

1
addChild( theMask )

probably saved less time than I had to spend hunting this error. Below an example showing the error (above) and the proper result (below).

Get Adobe Flash player

 Get Adobe Flash player

Code

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
131
132
133
134
135
136
package  
{
    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import flash.events.Event;
    import flash.geom.Point;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;
    import flash.geom.Matrix;
    import flash.display.SpreadMethod;
    import flash.display.GradientType;
   
    /**
     * Class to demonstrate a mask needs to be added to stage
     * in order to function properly and scale up along with the rest
     * when stuff goes fullscreen
     *
     */
    public class AddedMask extends Sprite
    {
        // the mask
        private var m:Sprite;
       
        /**
         * build some interface and animation to make clear what is going on
         *
         */
        public function AddedMask()
        {
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
           
            drawText();
           
            var fsButton = new FSButton();
            addChild( fsButton );
           
            drawBackground()
           
            drawMask();
        }
       
        /**
         * Funciton which draws the mask (in this case across the whole stage)
         *
         * More or less what it's all about
         */
        private function drawMask():void
        {
            // the mask
            m = new Sprite();
            m.graphics.beginFill( 0x000000 );
            m.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
            m.graphics.endFill();
           
            // make sure the mask is added to the display list...
            addChild( m );
           
            mask = m;
        }
       
        /**
         * function to fill the background
         *
         */
        private function drawBackground():void
        {
            var matr:Matrix = new Matrix();
            matr.createGradientBox(50, 50, 0, 0, 0);
            var spreadMethod:String = SpreadMethod.REFLECT;
            graphics.beginGradientFill( GradientType.LINEAR, [ 0x666666, 0xCCCCCC ], [1, 1], [ 0x00, 0xFF ], matr, spreadMethod );
            graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
            graphics.endFill();
        }
       
        /**
         * some text
         *
         */
        private function drawText():void
        {
            var tf:TextField = new TextField();
            var tfm:TextFormat = new TextFormat( null, 24, 0, true, false, false, null, null, TextFormatAlign.CENTER );
            tf.autoSize = TextFieldAutoSize.CENTER;
            tf.defaultTextFormat = tfm;
            tf.text = "See if you can still read this \n after going FullScreen";
            tf.x = (stage.stageWidth - tf.width) / 2;
            tf.y = (stage.stageHeight - tf.height) / 2;
            addChild( tf );
        }
    }
}

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.StageDisplayState;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;

class FSButton extends Sprite
{
    function FSButton():void
    {
        graphics.beginFill( 0x6666FF );
        graphics.drawRect( 0, 0, 50, 50 );
        graphics.endFill();
       
        // some text
        var tf:TextField = new TextField();
        var tfm:TextFormat = new TextFormat( null, 12, 0, true, false, false, null, null, TextFormatAlign.CENTER );
        tf.defaultTextFormat = tfm;
        tf.autoSize = TextFieldAutoSize.LEFT;
        tf.text = "Press\nme";
        tf.x = (width - tf.width) / 2;
        tf.y = (height - tf.height) / 2;
        tf.selectable = false;
        tf.mouseEnabled = false;
        addChild( tf );
       
        buttonMode = true;
        addEventListener( MouseEvent.CLICK, fs );
    }
   
    private function fs( event:MouseEvent ):void
    {
        if ( stage.displayState != StageDisplayState.FULL_SCREEN )
            stage.displayState = StageDisplayState.FULL_SCREEN;
        else
            stage.displayState = StageDisplayState.NORMAL;
    }
}

Tags: , , , ,

This entry was posted on Friday, March 11th, 2011 at 6:20 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.