9 Replies Latest reply on May 22, 2009 8:57 AM by Michael Borbor

    Scaling my Flex app? (visually, at the web-browser)

    Lopo Nopo Level 1



      I want to have my SWF shown on a regular HTML page and I resize it to a smaller dimensions.

      Now the problem is that the movie renders in full size which means that part of it is hidden.

      Tried to mess around with the HTML but in contrary to Flash, it seems that Flex's applications are stubborn (:

      How do I tell the SWF to scale to it's size and not render in it's original dimensions?



        • 1. Re: Scaling my Flex app? (visually, at the web-browser)
          _Natasha_ Level 4


          you should set dimention in % (percentWidth and percentHeight or in mxml values for width and height with %) and all will be scaled for visible area.

          • 2. Re: Scaling my Flex app? (visually, at the web-browser)
            Gregory Lafrance Level 6

            There are several ways to achieve your goal. You can use constraint based layout, where the controls are anchored to the sides of the app using the style properties left, right, top, bottom, and also horizontalCenter and verticalCenter.


            You can use auto-layout, and use width and height of 100%.


            See these links for more info:



            http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based -layout/



            If this post answers your question or helps, please mark it as such.

            • 3. Re: Scaling my Flex app? (visually, at the web-browser)
              Flex harUI Adobe Employee

              See the ScaleMode post on my blog


              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Scaling my Flex app? (visually, at the web-browser)
                kid electric Level 1

                I didn't check the links provided by these guys, so I don't know if your question has been answered yet or not, but since I am doing this exact thing you are describing in my current site.  Ironically, the way to do this relative layout/scaling was to NOT use relative layouts;  ie. I used a Canvas container to allow absolute (x, y) positioning.



                By doing this, you can easily manipulate x, y, width, and height instead of relying on things like spacers and percentWidth...


                so, for example, since I wanted a button to show up 1/2 way down the screen and 2/3 of the way over (regardless of the screen dimensions), I set this as:




                <mx:Canvas id="cMain" width="100%" height="100%">
                     <mx:Button id="myButton" x="{2/3*cMain.width}" y="{1/2*cMain.height}" />


                By setting the Canvas container first with percent height/width, it grabs the dimensions of the browser window which you can then access from Canvas.width or Canvas.height.   Be sure you use the braces { } around your values to assign them as inline script.  You can make somewhat complex algorithms this way, to ensure that your objects don't overlap or bump into each other. For example, if you want a header or banner or menu at the top of the screen, and then you want the button halfway down, you could write it as:


                y="{myBanner.height + 1/2(cMain.height - myBanner.height) }"    [obviously, you can streamline the math operations a bit, but I'm trying to make it obvious how the formula is being set up here]



                In fact, in my app I go one step further to combine relative positioning along with scaling of objects, like so:



                <mx:Canvas id="cMain" width="100%" height="100%">
                     <mx:Label text="Here are some words" id="myLabel" fontSize="{cMain.width/36}" />
                     <mx:Button id="myButton" width="{cMain.width/6.2}" height="{cMain.width/20.5}" x="{2/3*cMain.width}" y="{1/2*cMain.height}" />



                In this way, you can use 100% width/height for you main container, which will set an absolute width/height of that container (in pixels), which you can then use in formulas to define font sizes, and children (containers or objects, such as images and buttons) in relative terms by using decimel multipliers/dividers  [as you can see, I based mine on overall width of the browser]


                I also set new states for moving and resizing objects by using SetProperty and, once again, basing locations as a function of cMain.width / height



                Some people naysay this idea and act like you should just use a set size and absolute layout, but I think that's ridiculous.  Those are people who don't seem to recognize the WIDE array of devices used to browse the web these days... from handheld mobile devices, to tiny "netbook" laptops (eee, anyone?) to ginormous monitors that are laughable when your 800x600 app shows up as barely a speck on their screen.

                • 5. Re: Scaling my Flex app? (visually, at the web-browser)
                  Lopo Nopo Level 1

                  Hi all and thanks for trying but it seems none was helpful.

                  I believe I didn't explain myself very well, although Alex's solution was very close to what I intend.


                  In simple terms let me rephrase the subject:

                  I got a 500x500 Application.

                  I want to have 10 instances of it on 1 HTML page.

                  All those 10 instances should resize to a smaller size, say 50x50, in order to fit in.


                  Another side-effect done by Flex's HTML code is that there are no scroll-bars at the web page the represents the app.




                  If you're asking why I need it:

                  Made some very complicated application (TCP client/server) and I use some automation to test it's behaviour.




                  So, if none can come up with an idea, I have a way around this problem:

                  Made a simple HTML page at Dreamweaver.

                  I put the SWF on that page and copy/paste it 9 more times (after I resized it, on Dreamweaver).

                  Thankfully Dreamweaver's code did it.


                  One very important note: You still have to let the Flex app that it should resize ("show all").

                  That's where Alex's code comes handy:


                  I put that on the main application's properties and that's it. I've got what I wanted.


                  Thank you all again for at least putting some effort!

                  • 6. Re: Scaling my Flex app? (visually, at the web-browser)
                    Gregory Lafrance Level 6

                    I'm surprised you can't just put it all in a VBox.

                    • 7. Re: Scaling my Flex app? (visually, at the web-browser)
                      Lopo Nopo Level 1

                      Maybe I can but I think it's better to stay "independent", from the client app's point of view.

                      .. errors get to be detected separately etc'..

                      • 8. Re: Scaling my Flex app? (visually, at the web-browser)
                        Gregory Lafrance Level 6

                        I'm not exactly sure I understand what you are saying.

                        • 9. Re: Scaling my Flex app? (visually, at the web-browser)
                          Michael Borbor Level 4

                          Probably you'll end-up using javascript to make the apps resize.