3 Replies Latest reply on Jul 14, 2010 7:50 AM by VirtualCoder

    Application resize Aspect Ratio

    VirtualCoder

      This Flex stuff is not so intuitive or at least not for noobs.

       

      All I am looking for is how to maintain my application in a 4:3 aspect ration, when a browser window gets resized.

        • 1. Re: Application resize Aspect Ratio
          VirtualCoder Level 1

          I have tried using the application "resize" event but it's not firing consistently.

           

          Surely, there must be a simple solution for such a simple and obviously required task ?!?

          • 2. Re: Application resize Aspect Ratio
            Matt Le Fevre Level 4

            maths

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black" >

                <mx:Canvas id="backCanvas" x="0" y="0" height="90%"
                    width="90%" backgroundColor="black" verticalScrollPolicy="off"
                    horizontalScrollPolicy="off" bottom="50" top="50" left="50" right="50">
                    <mx:Canvas id="mainCanvas" x="0" y="0" height="{(backCanvas.width / (4/3))}" width="{(backCanvas.height * (4/3))}" backgroundColor="white"/>
                </mx:Canvas>
               
            </mx:Application>

            1 person found this helpful
            • 3. Re: Application resize Aspect Ratio
              VirtualCoder Level 1

              Thanks Matt ... I need 2 areas - left, which takes 20% of space and right with 80%.  Placing 2 Groups onto the mainCanvas seemed to be an intuitive thing to do.  However, Canvas is not paying attention to horizontal layout.

               

              I get similar results if I replace the 2 canvases with groups.

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application name="app"
                                xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"                  
                                minWidth="64" minHeight="48"
                                maxWidth="1024" maxHeight="768"
                                >
                   <s:layout>
                        <s:HorizontalLayout/>
                   </s:layout>
                   <mx:Canvas id="backCanvas" x="0" y="0" height="90%" 
                                width="90%" backgroundColor="black" verticalScrollPolicy="off" 
                                horizontalScrollPolicy="off" bottom="10" top="10" left="10" right="10">
                        <mx:Canvas id="mainCanvas" x="0" y="0" backgroundColor="white"
                                     height="{(backCanvas.width / (4/3))}" width="{(backCanvas.height * (4/3))}">
                                  
                             <s:Group width="20%" height="100%">
                                  <s:Button  left="10" top="10" bottom="10" right="5"/>
                             </s:Group>
                             <s:Group width="80%" height="100%">
                                  <s:Button  left="5" top="10" bottom="10" right="10"/>
                             </s:Group>
                             
                        </mx:Canvas>
                   </mx:Canvas>
              </s:Application>