In a previous post, I explained how to create separate fullscreen windows on multiple monitors. In this post, I will explain how you can create a single window that spans multiple monitors. This is useful when you want your stage to spread on more than one physical output.

While doing that is relatively easy, there is a catch. You might be tempted to set the stage’s displayState to FULL_SCREEN_INTERACTIVE by doing this:

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

However, if you do that your window will fill one and only one screen no matter its size. This is usually how fullscreen works on Windows and Mac OS. What we want, is for the window to fully fill all screens without triggering “fullscreen” mode. Here’s how to do it:

var screens:Array = Screen.screens;
var rect:Rectangle = new Rectangle();
 
for (var i:uint; i < screens.length; i++) {
    rect = rect.union(screens[i].bounds);
}
 
stage.nativeWindow.bounds = rect;
 
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.color = 0xC02A2A; // red

The Screen.screens array contains a list of all available screens. We loop through all of them and merge their bounds rectangles to obtain one larger rectangle that encompasses all screens. We then set our window to be the size of that computed rectangle.

As usually done when going full screen, we set the stage’s align and scaleMode properties to TOP_LEFT and NO_SCALE, respectively.

Obvsiously, you will also want to turn off any system chrome. In Flash Pro, you can do that in the “AIR for Desktop” settings. In Flash Builder you can do the same by modifying the xxx-app.xml configuration file of your project. Simply set systemChrome to none:

<systemChrome>none</systemChrome>

Folks on Windows are now done and happy. Folks on Mac, not so much. Why? Because on Mac OS X, the menu bar remains. Our window is actually pushed below the menu bar even it we set its position to x=0 and y=0. Damn!

This means that, if you are on Mac, you will have to use some external trickery to hide the menu bar. In theory, you should be able to do that easily by editing the LSUIPresentationMode property of the info.plist file (in the application bundle). However, as documented in a long standing bug (orphaned link), this is not supported in Adobe AIR. This leaves you with alternatives such as MenuEclipse that will black out the menu (the space cannot be reclaimed however). There used to be other options (MenuFella, MegaZoomer, MenuShade, MenuAndDockless) but they seem to have been discontinued or have not been updated for recent OS versions… An alternative to those solutions, depending on your needs, might be to deselect the “Displays have separate Spaces” checkbox in the Mission Control preference pane (suggested by a reader).

That’s it! Hope this helps.