7 Replies Latest reply on Aug 26, 2007 2:22 PM by RGracia

    liquid layouts not quite working... help!

    RGracia Level 1
      Hi Guys,

      I am hoping one of you will be able to help.

      I have finished reading some books on AS3 and started working on a liquid transition animation using actionscript 3.0 (see attached .fla). Basically, I am setting the stage scaling to NO_SCALE and playing with a 4:3 aspect photograph as a background. I have setup an event listener to detect stage resizing so that the background image is tweened to the correct aspect ratio. There are two dynamic text fields keeping track of the stage dimensions for debugging purposes.

      The if statements in the listener function basically detects if the width of the stage is larger than the height. Based on that calculation the dimensions of the background image are in turn recalculated. So if the stage width is larger than the stage height, then the image will be tweened to have its height .75 of the stage width amount; in the case of a stage height being larger than the stage width, then the bg image width will be 1.33 times the stage height.

      Technically, the code works, but when you start playing around with resizing, the stage dimensions registered on the text fields don't really match what you see on the screen and I am unsure if it's a bug or if the stage is trully that size. Sometimes when I resize the screen I am positive the height of the stage is larger than the width but the text fields state otherwise and the code is behaving based on what the text fields register, which is what is supposed to be doing, but the image doesn't crop correctly.

      I need one of you actionscript gurus to look at the code and tell me what you think mught be happening. I really appreciate it.
        • 1. Re: liquid layouts not quite working... help!
          breez11 Level 1
          Stage.width;
          Stage.height;
          • 2. Re: liquid layouts not quite working... help!
            breez11 Level 1
            check out how I do it

            • 3. Re: liquid layouts not quite working... help!
              RGracia Level 1
              Thanks breez11 but if I do what you suggest, the bg photo will eventually distort when the user resizes the stage to anything other than a 4:3 aspect ratio. I need ActionScript that will make sure the aspect ratio of the bg mc always remains correct while making sure there are no white areas on the screen, so always covered by the bg mc.
              • 4. Re: liquid layouts not quite working... help!
                RGracia Level 1
                I think a more complex issue here is that pixel based measurements when dealing with 4:3 aspect images is not as easily translated on the screen. I am sure the screen resolution is playing a big part in the way the player detects the stage size.
                • 5. Re: liquid layouts not quite working... help!
                  Rothrock Level 5
                  first breez1 – in AS2 you are correct, that is how to get properties of the Stage object. In AS3, it has changed.

                  Next for RGracia, here is a neat trick that will make your code a bit easier to read and follow – at least it made things easier for me. It is called the ternary operator and it allows you to do a conditional and then assignments all in one step. So you can do something like:

                  bg.width = (sw > sh) ? sw : sh * 1.33

                  That basically reads as, if sw is larger than sh assign the value sw to bg.width otherwise assign sh times 1.33 to bg.width. Basically if the part in parens is true then the value before the colon is assigned and if the part in parens is not true then the part after parens. Neat, huh?

                  Over all the basic set up here seems more or less correct. I'm wondering if the problem comes from the tweens? I don't see anyplace where you are stopping and deleting the old tweens. Remember the RESIZE event happens a bunch of times when you resize the window. Not just at the end of the movement – at least I think that is what happens. So you might be assigning crazy multiple tweens? Just a thought, you might just want to try it without the tweens first to get it jumping to size, then try and make the tweening work.

                  I don't think screen resolution is playing any part in the the way the player detects the stage size. The stage size is the size it is. I do remember when I was doing something like this using AS2 and there was a bug with the way Firefox (or was it Safari) sent the resizing events when I would change just the height of the browser window. If I was just adjusting the height of the window, no event was fired. As soon as a I adjusted the width, BANG, they would both jump to the correct values. Perhaps that is what you are experiencing?

                  Can you provide a link to the page?

                  • 6. liquid layouts not quite working... help!
                    RGracia Level 1
                    I think you are right:
                    I should try removing the tweens to see what behavior I get.
                    [ Over all the basic set up here seems more or less correct. I'm wondering if the problem comes from the tweens? I don't see anyplace where you are stopping and deleting the old tweens. Remember the RESIZE event happens a bunch of times when you resize the window. Not just at the end of the movement – at least I think that is what happens. So you might be assigning crazy multiple tweens? Just a thought, you might just want to try it without the tweens first to get it jumping to size, then try and make the tweening work.]

                    Here's a link to the test file I am working with. Make sure you resize at least once to see the effect:
                    http://rgracia.com/liquid/
                    • 7. liquid layouts not quite working... help!
                      RGracia Level 1
                      Well here's how I ended up fixing it. This is the AS3 version.