13 Replies Latest reply on Jan 28, 2009 8:08 AM by vectorhog2

    How can I set the background color of an Additional Window

    vectorhog2
      I'm using flex 3 to create an AIR app which displays images, video, etc.. These get displayed in an additional window using the mx.Window class. I need this additional window to go full screen and have the background set to black. For some reason it always goes to white.

      Can someone please help me with this?
      The basic code for the window is below:

      <mx:Style>
      Application
      {
      /*make app window transparent*/
      background-color:"#000000";
      background-image:"";
      padding: 0px;
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;
      margin-left: 0;
      }
      </mx:Style>
        • 1. Re: How can I set the background color of an Additional Window
          vectorhog2 Level 1
          sorry,

          this is the code:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Window xmlns:mx=" http://www.adobe.com/2006/mxml"
          backgroundColor="#000000"
          width="1280"
          height="720"

          xmlns:slides="com.vectorhog.slides.*"
          systemChrome = "none"
          creationComplete="onAppComplete()"
          showStatusBar="false"
          showGripper="false"
          showFlexChrome="false"
          resizable = "false"
          paddingLeft="0"
          paddingBottom="0"
          paddingRight="0"
          >
          <mx:Style>

          </mx:Style>
          <mx:Script>
          <![CDATA[

          private function onAppComplete():void{


          }

          private function goFullScreen(widescreen:Boolean):void{
          stage.fullScreenSourceRect = new Rectangle(0,0,stage.width,720);

          stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
          //Application.application.stage.scaleMode = StageScaleMode.NO_BORDER;
          full_button.visible = false


          }



          ]]>
          </mx:Script>
          <mx:Canvas id="canvas" label=" `" horizontalScrollPolicy="off" verticalScrollPolicy="off" left="0" top="0" right="0" bottom="0" backgroundColor="#000000" width="1280" height="720">

          <mx:Button x="374" y="400" label="Go Full Screen" click="goFullScreen(false)" width="199.9" height="37.121212" id="full_button" labelPlacement="top" alpha=".9"/>

          </mx:Canvas>
          </mx:Window>
          • 2. Re: How can I set the background color of an Additional Window
            Joe ... Ward Level 4
            Have you tried setting the style on the window?

            <mx:Style>
            Window
            {
            /*make app window transparent*/
            background-color:"#000000";
            background-image:"";
            padding: 0px;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
            }
            </mx:Style>

            Or directly in the Window tag: <mx:Window backgroundColor="0x000000"...?

            Note that fullscreen transparent windows are performance hogs, especially on MSWindows machines. If it is fullscreen, does it really need to be transparent?
            • 3. Re: How can I set the background color of an Additional Window
              vectorhog2 Level 1
              I've tried it with <mx:Window backgroundColor="0x000000"...
              and it just still comes out as white. It works fine if the window is the initial
              window ie <mx:WindowedApplication backgroundColor="0x000000"...

              any thoughts?
              • 4. Re: How can I set the background color of an Additional Window
                Joe ... Ward Level 4
                I just tried both ways of setting the background color style for a Window component and it worked. So either you're not opening the window you think you are, you have a typo somewhere, something else is setting the style, there's another component filling the window that has a white background, or you've stumbled on a Flex bug.
                • 5. Re: How can I set the background color of an Additional Window
                  vectorhog2 Level 1
                  Joe,

                  are you opening the Window from a WindowedApplication?

                  I really hope its not a flex bug, could you post the code that worked for you?

                  thanks a million
                  • 6. Re: How can I set the background color of an Additional Window
                    Joe ... Ward Level 4
                    Yes. Here's my WindowedApplication mxml file:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml"
                    layout="absolute" applicationComplete="init();" showStatusBar="false" height="400" width="900"
                    title="Window Sampler" backgroundColor="0xbfbe9c">
                    <mx:Style>
                    Window
                    {
                    background-color : #000000;
                    }
                    </mx:Style>
                    <mx:Script>
                    <![CDATA[
                    import flash.display.NativeWindow;
                    import flash.display.NativeWindowInitOptions;
                    import flash.display.NativeWindowType;
                    import flash.display.NativeWindowSystemChrome;
                    import mx.core.Window;

                    //initialize this (launcher) window
                    private function init():void {
                    stage.nativeWindow.x = 0;
                    stage.nativeWindow.y = 0;
                    //exit the application when the main window is closed
                    this.stage.nativeWindow.addEventListener(Event.CLOSE,function(e:Event):void{
                    NativeApplication.nativeApplication.exit();
                    });
                    createNewFlexWindow(new Rectangle(100, 100, 140, 160), "none", "normal", true, "mx:Window");
                    }

                    //create a new Flex (mx:Window) window
                    private function createNewFlexWindow(
                    bounds:Rectangle,
                    chrome:String,
                    type:String,
                    transparent:Boolean,
                    title:String
                    ):void{
                    var newWindow:ShotWindow = new ShotWindow();

                    newWindow.maximizable = true;
                    newWindow.minimizable = true;
                    newWindow.resizable = true;
                    newWindow.transparent = transparent;
                    newWindow.systemChrome = chrome;
                    newWindow.type = type;
                    newWindow.title = title;
                    newWindow.alwaysInFront = true;
                    newWindow.showStatusBar = true;
                    newWindow.layout = "absolute";

                    //create the window
                    newWindow.open(false);

                    //show the window
                    newWindow.activate();
                    newWindow.nativeWindow.x = bounds.x;
                    newWindow.nativeWindow.y = bounds.y;
                    }

                    ]]>
                    </mx:Script>
                    </mx:WindowedApplication>

                    And here's the ShotWindow.mxml (just a bare mx:Window tag):
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Window xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="140" height="160">

                    </mx:Window>
                    • 7. Re: How can I set the background color of an Additional Window
                      vectorhog2 Level 1
                      Joe,

                      thanks for the example. I got it working so that I can set the background color of the ShotWindow. The problem I'm still having is when I take the second window fullscreen with fullScreenSourceRect.

                      When played on a monitor with a different aspect ratio, it should fill in with "bars" the color of the window background. Yet, it's still making the bars white. That's really all I'm trying to do hear - go fullscreen from a second window with black "bars"

                      I've attached some modified code for the ShotWindow.mxml to illustrate what I'm talking about.

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Window xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="1280" height="720">
                      <mx:Script>
                      <![CDATA[

                      private function onAppComplete():void{


                      }

                      private function goFullScreen(widescreen:Boolean):void{
                      stage.fullScreenSourceRect = new Rectangle(0,0,stage.width,720);

                      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                      //Application.application.stage.scaleMode = StageScaleMode.NO_BORDER;
                      full_button.visible = false

                      }


                      ]]>
                      </mx:Script>

                      <mx:Button x="374" y="400" label="Go Full Screen" click="goFullScreen(false)" width="199.9" height="37.121212" id="full_button" labelPlacement="top" alpha=".9"/>

                      </mx:Window>

                      • 8. Re: How can I set the background color of an Additional Window
                        Joe ... Ward Level 4
                        Ah fullscreen -- I should have noticed this earlier. What you are seeing is the default color of the stage, not the background color of the Window object. There is not, ASFAIK, any way to set the stage color. What should work is to insert a black sprite at the bottom of the display list covering the same area as the fullScreenSourceRect.
                        • 9. Re: How can I set the background color of an Additional Window
                          vectorhog2 Level 1
                          Joe,

                          Actually the area I'm concerned with is outside the fullScreenSourceRect. when it's in fullscreen - the letterbox if you will.

                          When I go fullscreen in a WindowedApplication - the letterbox takes on the color of the application background, black in this case. It's weird that this is only so in the initial window and not any additional windows, where the letterbox always appears white no matter the background color.

                          My app has two windows - a viewer and controller. What I think I'll have to do is make the viewer the initial window, and the controller the second window.

                          Thanks for your help.
                          • 10. Re: How can I set the background color of an Additional Window
                            Joe ... Ward Level 4
                            I guess the way to do it is to create the full screen source rectangle at the same aspect ratio as the screen and big enough to just enclose your content. That way the black sprite will fill any area within that rectangle that isn't covered by your content. (In other words work the problem from inside out, instead of outside in.)

                            I think what is happening is that the initial window reads the background color from a tag in the SWF file (Flex Builder must set this value). New windows aren't created from a SWF, so they get the default color.
                            • 11. Re: How can I set the background color of an Additional Window
                              vectorhog2 Level 1
                              Joe,

                              What a brilliant idea! Here's the code that's working for me - I tried the capabilities.screenResolutionX but it only detects the primary monitor and I need to account for multiple displays. I ended up sending it into full screen to detect the monitors aspect ratio, then bringing it back to normal, doing some math and then going back to fullscreen.

                              Here's the code:

                              //take the window full screen to get monitor dimensions
                              stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                              monitorRatio = stage.stageWidth/stage.stageHeight;
                              trace(stage.stageWidth+"x"+ stage.stageHeight);
                              //bring it back down to normal size
                              stage.displayState = StageDisplayState.NORMAL;
                              stage.stageHeight = 720;
                              stage.stageWidth = 1280;

                              // divide the width by the monitor's aspect ratio
                              stage.stageHeight = 1280/monitorRatio;

                              stage.fullScreenSourceRect = new Rectangle(0,0,stage.width,stage.height);

                              stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                              • 12. Re: How can I set the background color of an Additional Window
                                Joe ... Ward Level 4
                                You can use the AIR Screen class to get information about the available Screens, including width and height. Pass a 1-pixel rectangle to the Screen class getScreensForRectangle() function to get screen information for the screen a window is on.
                                • 13. Re: How can I set the background color of an Additional Window
                                  vectorhog2 Level 1
                                  Thanks Joe

                                  I ended up discovering the fullScreenWidth property which gives the width of the screen as if it were going fullscreen right then.

                                  here's the code I used




                                  //get monitor dimensions and ratio


                                  monitorRatio = stage.fullScreenWidth/stage.fullScreenHeight;
                                  trace(stage.fullScreenWidth+"x"+ stage.fullScreenHeight);



                                  // divide the current width by the monitor's aspect ratio
                                  stage.stageHeight = 1280/monitorRatio;

                                  stage.fullScreenSourceRect = new Rectangle(0,0,stage.width,stage.height);

                                  stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;