6 Replies Latest reply on Aug 17, 2010 12:52 AM by Yue_Hong

    Fullscreen Content

    Yue_Hong Level 1

      How is it possible to have flex air application to run in fullscreen mode with the content to be automatically enlarge to fill and fit users monitor screen? I do know how to get flex run in fullscreen, but the trouble is to have the content to be maximize to fit users monitor screen just like Adobe Flash projects. How to achieve that?

       

      Thanks.

        • 1. Re: Fullscreen Content
          Subeesh Arakkan Level 4

          Hi,

           

          It should not be a problem if you set 100% height and width to your main containers.

          • 2. Re: Fullscreen Content
            Yue_Hong Level 1

            Thanks for your reply. But I have several component in the display such as label, swfloader, moviedisplay and etc....How can I have it all automatically scale up and display in proper location in fullscreen?

            • 3. Re: Fullscreen Content
              Subeesh Arakkan Level 4

              Hi,

               

              Set percentage height and width to the controls you want to be scaled. The following is a useful link on positioning and laying out controls

               

              http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7e4c.html

              • 4. Re: Fullscreen Content
                Yue_Hong Level 1

                Thanks for your reply. I have tried to do it, it works when I enlarge the windows. However, when I try to drag and resize the window to smaller scale, the image does not resize scale down to fit the window size.

                 

                Here is my code:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                       xmlns:s="library://ns.adobe.com/flex/spark"
                                       xmlns:mx="library://ns.adobe.com/flex/mx" width="1280" height="720" backgroundColor="#000000" showStatusBar="false">

                 

                    <fx:Script>
                        <![CDATA[
                           
                            protected function disBtn_clickHandler(event:MouseEvent):void
                            {
                                var sWidth:Number = stage.width - 1;
                                var sHeight:Number = stage.height - 1;
                               
                                // stage height is larger / taller than 16:9
                                if (sHeight/sWidth > 0.5625){
                                    backImage.width = sWidth;
                                    backImage.height = backImage.width * 0.5625;
                                }
                                // stage width is larger / taller than 16:9
                                if (sHeight/sWidth < 0.5625){
                                    backImage.height = sHeight;
                                    backImage.width = backImage.height / 0.5625;
                                }
                                // stage size is 16:9
                                if (sHeight/sWidth == 0.5625){
                                    backImage.height = sHeight;
                                    backImage.width = backImage.height / 0.5625;
                                }
                               
                                stext.text= stage.width.toString() + " Image Width =" + backImage.width;
                            }
                        ]]>
                    </fx:Script>

                 

                    <mx:Image id="backImage" source="assets/background.jpg" smoothBitmapContent="true" maintainAspectRatio="true" horizontalCenter="0" verticalCenter="0"/>


                    <s:Label id="stext" color="#FFFFFF" text="Display size text" fontSize="20" horizontalCenter="0" verticalCenter="0"/>
                    <s:Button id="disBtn" label="Update Size" click="disBtn_clickHandler(event)"/>
                </s:WindowedApplication>

                 

                 

                How should I fix it?

                • 5. Re: Fullscreen Content
                  Subeesh Arakkan Level 4

                  Hi,

                   

                  Try setting a maxWidth and maxHeight to the Image control

                   

                  <mx:Image id="backImage" 
                       source="assets/background.jpg" 
                       smoothBitmapContent="true" 
                       maintainAspectRatio="true" 
                       horizontalCenter="0" verticalCenter="0"
                       maxWidth="{width - 20}" maxHeight="{height - 20}"
                       />
                  

                  • 6. Re: Fullscreen Content
                    Yue_Hong Level 1

                    Thanks a lot for your help. I have just figured out the solution. That is by changing stage.width to this.width will solve the problem.

                     

                    Now I have to work out some formula for all the components to be displayed properly on resize. It would be nice if Flex has container that can group all the components and automatically scale up and down components on resize of the container.