Skip to content

ScreenManager: expand your AIR application (to multiple monitors)

Never wondered how cool it would be when your AIR application runs on 2 or more monitors at the same time?

Adobe AIR supports multi-screen by offering the developer a Screen-class.
This class makes it possible to detect screens, get some info, and that’s it.
To open a window on a screen, you’ll have to do some calculations yourself.

To make positioning screens, moving screens, … easier , I quickly build a ScreenManager that takes care of your NativeWindow(s).
Make an instance of the nativewindow and send it throught the manager.
Like this:

var nw:NativeWindow=new NativeWindow(new NativeWindowInitOptions());
var mc:MovieClip=new MovieClip(); //movieclip with content

The ScreenManager is a static class.
It allow the developer to control a NativeWindow through the following methods:
(incorrect signatures)

  • ScreenManager.centerWindowOnScreen()
  • ScreenManager.getActualScreenBounds()
  • ScreenManager.getScreenColorDepth()
  • ScreenManager.getVisibleScreenBounds()
  • ScreenManager.moveWindow()
  • ScreenManager.openWindowCenteredOnScreen()
  • ScreenManager.openWindowOnScreen()
  • ScreenManager.stretchWindowToAllScreens()
  • ScreenManager.stretchWindowOnScreen()
  • ScreenManager.openWindowFullScreenOn()
  • ScreenManager.setWindowFullScreenOn()
  • ScreenManager.moveWindowToCorner()
  • ScreenManager.openWindowInCorner()

and the following properties:

  • ScreenManager.mainScreenIndex
  • ScreenManager.numScreens
  • ScreenManager.maximumAvailableResolution

The ScreenManager can be downloaded here .

Posted in AIR, AS3, Flash, Flex.

Tagged with , , , .

25 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. chris says

    nice one! I was trying to figure out the Screen stuff myself but this class will do just fine…



  2. Jeremy says

    Sweet! Thanks for breaking it down and making a nicely written class.

  3. Majakovskij says

    nice! really.

  4. Steve Karpik says

    I’m getting a strange compilation error., Line 166 1047:Parameter unknow or is not a compile-time contstant., Line 184 1047:Parameter unknow or is not a compile-time contstant.

    I’m guessing that it is complaining about the displayState:String=StageDisplayState.FULL_SCREEN_INTERACTIVE in the argument list of openWindowFullScreenOn.

    I’m compiling the code as an AIR application using Flash CS4.

  5. Joris Timmerman says

    Hi Steve,

    That displaystate is included in the AIR api, so I don’t know why it won’t compile.
    You sure you’re compiling to an AIR app? What version of AIR are you compiling to?
    Maybe you can use it’s value – ‘fullScreenInteractive’ instead of ‘StageDisplayState.FULL_SCREEN_INTERACTIVE’. If your authoring environment uses Flash Player or higher it’ll work.
    And should this not work, just change it to StageDisplayState.FULL_SCREEN.

  6. Moris says

    Hi, i was reading your interesting article about the screen manager. I wounder if you could give some more details about the all procedure or if you could point me somewhere i could find some more information about it. Sorry for the hassle, I am new to adobe air and applications. Where do you include the code above described? Do I require Flex as well? I am trying to build a flash file to play and control on multiple screens. I am so sorry to disturb you and hope to hear from you soon. Many thanks in advanced!

  7. Brett says

    I think I’m missing something but how do you call an custom component to be in the new window?

    so I changed:
    var mc:MovieClip=new MovieClip();

    var mc:FlashContainer=new FlashContainer(); //my custom component I made in flex 3

    I’m I missing something?

    I always get a white window no matter what I try.

  8. William says

    Great class!

    I am running into a slight hiccup though. I’m trying to get a single native window in an AIR app to maximize across two screens simultaneously, and I can’t seem to expand a window beyond the bounds of the screen that it is on.

    So for example the top monitor has a height of 768, and the bottom monitor has a height of 800. But when I try setting the height of the app/native window/stage to anything bigger than 800, it just maximizes to the screen that it is on. It doesn’t stretch across both screens (and stretchWindowToAllScreens() has the same behaviour).

    If this is something you’ve run in to before, any guidance you could pass on would be great. Otherwise, thanks for the class!

  9. Joris Timmerman says

    Hi William,

    This maybe a limitation of your OS.
    I noticed when building this class that on my Mac, the window cannot be bigger then a certain resolution (I think it was something like 1000×1000).
    It stretched on multiple screens, but not fully.
    I’m guessing your on Windows, and it wouldn’t surprise me a window can only be as big as the screen resolution.
    The only option is that you open 2 windows and simulate the dual screen functionality.

  10. William says

    Hi Joris,

    Actually, I happen to be working on a Mac as well. There is documentation for AIR that says the window will maximize on the screen (and thus the monitor) it is currently being displayed on. I’m just hoping that there is some way to get a single window to stretch across multiple monitors.

    I’ve actually taken the approach you suggested about opening two windows and trying to simulate the dual screen functionality, but unfortunately certain items on the screen need to appear to be moving back and forth between monitors, which I haven’t been able to really replicate smoothly.

  11. Joris Timmerman says

    Hey William, If you maximize(), only one screen will be filled, that’s the OS’s doing, so don’t do that. 😉
    stretchWindowToAllScreens can theoratically stretch a window over all screens, but I noticed when developing that ScreenManager class that stretchWindowToAllScreens only goes up to a certain width & height, probably something like when width * height = 0xFFFFFF, same issue with images and BitmapData in the FP.
    Good luck anyway!

  12. jose says

    Thanks very useful

  13. Poopypants says

    Would this work in FLEX, by any chance?

  14. Joris Timmerman says

    Yup, this will work in Flash and Flex as long as you target AIR using AS3.
    Doesn’t mather which version.

  15. FlawlessDog says

    I wonder if you have a real simple sample.
    I need to make an air app that will put one thing on one screen, and another thing on the second screen.
    Both will need to be full screen.

  16. FlawlessDog says

    as to the sample on the top of the page:
    var nw:NativeWindow=new NativeWindow(new NativeWindowInitOptions());
    var mc:MovieClip=new MovieClip(); //movieclip with content

    This last line^ (nw,2)
    is 2 the second screen?

  17. Joris Timmerman says

    You can find a simple example at the top of the post. 🙂

  18. Joris Timmerman says

    Yes, as described in the comments, the first parameter is always the windows instance and the second is the 1-based screen index.
    So 2 is indeed the second screen.

  19. FlawlessDog says

    Thanks for the reply.
    sorry I missed that before making the first post ;o)

    I am getting the same errors as Steve up there.

    /Desktop/AIRScreenManager/be/boulevart/air/utils/, Line 166 1047: Parameter initializer unknown or is not a compile-time constant.

    /Desktop/AIRScreenManager/be/boulevart/air/utils/, Line 184 1047: Parameter initializer unknown or is not a compile-time constant.

    I tried your solutions listed below that post…
    so far not working…and don’t understand what it is I could be missing…

    Adobe AIR2
    Flash CS5
    working on a I-mac

  20. FlawlessDog says

    also, while we wait, I wanted to be clear…
    I am working with a sample on my end.
    Got a mc in my library with an image in it.

    To put one mc on the 1st screen, and one mc on the 2nd screen, my code might look something like this? (or am I wrong?)

    import be.boulevart.air.utils.ScreenManager;
    var nw1:NativeWindow=new NativeWindow(new NativeWindowInitOptions());
    var mc1:MovieClip=new mc_1(); //movieclip with content
    var nw2:NativeWindow=new NativeWindow(new NativeWindowInitOptions());
    var mc2:MovieClip=new new mc_1(); //movieclip with content

  21. JT says

    I am trying to add the same movie clip to two different Native Windows. Basically I’m duplicating the DISPLAY on two different monitors. Only the last added to stage seems to work and the first one displays white blank screen.
    Here’s what I’m doing:

    var nw : NativeWindow = new NativeWindow(new NativeWindowInitOptions());
    var nw2 : NativeWindow = new NativeWindow(new NativeWindowInitOptions());
    var mClip : MovieClip = new MovieClip();

    ScreenManager.openWindowFullScreenOn(nw, 1);
    ScreenManager.openWindowFullScreenOn(nw2, 2);

    nw2 is playing the content..but nw1 displays blank screen..Your comments on this are really appreciated.. Thanks

  22. Chortle says

    …/, Line 166 1047: Parameter initializer unknown or is not a compile-time constant.

    I’m getting the following error when trying to use: ScreenManager.openWindowCenteredOnScreen(nw,2);

  23. Charles says

    Great class man, you’ll save me tons of time. Problem I have the same error that Steve had on 01/07/10:, Line 166 1047:Parameter unknow or is not a compile-time contstant., Line 184 1047:Parameter unknow or is not a compile-time contstant.

    StageDisplayState is in the API but for some reason that error appears. Any ideas?

    I have an Adobe Air 2.0 app using Flash CS5.

  24. Tim John says

    Love it! Helped me get a dual-fullscreen Flex app up and running in no time. Thanks!

Continuing the Discussion

  1. Multiple Screens for your AIR app « Red Code Monkey linked to this post on July 29, 2010

    […] ScreenManager: expand your AIR application (to multiple monitors)   […]

Some HTML is OK

or, reply to this post via trackback.