How to fit a Flex Air application to Full Screen?

Question

I have an Air Application in Flex designed for 1280x800 which I would like to stretch to work full screen on a 1920x1200 monitor.

I've read this article: http://blogs.adobe.com/aharui/2008/01/flex_and_scalemodes.html and tried it, but it only zooms the upper left corner (as mentioned in the article).

I work with a WindowedApplication (shown below) which holds a View (called MasterView) that contains all different lay-out elements.

Any suggestions?

My application (in brief) looks like this:

<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="100%" height="100%"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
    clipContent="false" 
    windowComplete="goFullscreen()" 
    >

private function goFullscreen():void
{                                   
    Mouse.hide();       

    this.stage.scaleMode = StageScaleMode.EXACT_FIT;
    this.stage.align = StageAlign.TOP_LEFT;
    this.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

    try
    {   
        showStatusBar = false;
        removeChild(statusBar);
    }
    catch (err:Error)
    { }

    root.stage.addEventListener(KeyboardEvent.KEY_DOWN, switchFullScreen)               
}

</mx:WindowedApplication>

Thanks, Gab

Solution 1

Finally we found out the best solution is to manually set the scaling ratio. So by determining the width of the screen/viewport and finding out how that scales to the size of our application we resolved this issue.

Solution 2

Are you wanting to go full screen or just maximize the window? You can do the latter by calling:

this.nativeWindow.maximize();

And doing something in full screen mode you shouldn't need all of the rest of what you've got there. You should just have to call

  this.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

To do what you want. Is that not working? What does the screen look like when you call that API?

=Ryan

Solution 3

I also found that this works.

public function goFullScreen($fullScreen:Boolean){
        if($fullScreen){
            myStage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
            myStage.scaleMode = StageScaleMode.EXACT_FIT;               
        } else {
            myStage.displayState = StageDisplayState.NORMAL;
        }

    }

Comments

[Gabriël]

I want both, fullscreen & zoomed to fit. But as I mention in my question, the problem is that only a part (upper-left) gets zoomed as mentioned on the article I linked too. So that's the issue, it won't zoom all but only the upper left 500x375 pixels.