17 Replies Latest reply on Jan 16, 2008 3:20 AM by scrfix

    Liquid Layouts - Weird Effects??

    scrfix Level 1
      I am a beginner in AS3.
      I am looking to have a liquid layout in my flash. I have the AS already written now and it is working however I am getting some very weird effects so I must have something done incorrectly.

      The effect that I am going for is
      If someone resizes the browser window, I want all of the instances on the flash to resize properly as well.
      When different resolutions look at the flash header everything increases or decreases as necessary so that the header looks good and goes all the way across the screen.

      Like the following website:
      http://www.senocular.com/demo/Layout/examples/StageResize.html

      Can someone help me with what I am doing wrong?

      I believe the following two lines are incorrect.
      call_mc.scaleX = stage.width * .5;
      call_mc.scaleY = stage.height * .5;



      [code]
      public class NoScale extends MovieClip
      {
      public function NoScale()
      {
      stage.addEventListener(Event.RESIZE,onResize);
      stage.align = "TL"; // Top left align the stage
      stage.scaleMode = "noScale"; // items do not stretch to fit
      }
      public function onResize(event:Event)
      {
      // In the event call a method to move the items
      // or, call each item here to be sized
      //call_mc.x = stage.width/2;
      //call_mc.y = stage.height/2;
      call_mc.scaleX = stage.width * .5;
      call_mc.scaleY = stage.height * .5;
      //call_mc is just 1 movie instance on I have the stage. There are around 20 more.

      // ... etc
      }
      }
      }
      [/code]

      Thanks,
      Wayne
        • 1. Re: Liquid Layouts - Weird Effects??
          kglad Adobe Community Professional & MVP
          i'll say. scaleX and scaleY vary between 0 and 1 and it's pretty unlikely stage.width and stage.height are going to vary between 0 and 2. fix that.
          • 2. Re: Liquid Layouts - Weird Effects??
            scrfix Level 1
            KGlad,

            Where do you see that it is going to vary between 0 & 2?
            What should it be?

            Wayne
            • 3. Re: Liquid Layouts - Weird Effects??
              kglad Adobe Community Professional & MVP
              it's NOT likely to vary between 0 and 2 and that means your scaleX and scaleY properties are likely to be out of range.

              but i can't give you specifics without knowing between what numbers you want call_mc to scale and between what numbers you allow the stage dimensions to scale.
              • 4. Re: Liquid Layouts - Weird Effects??
                abeall Level 3
                He's saying that this line:
                call_mc.scaleX = stage.width * .5
                is going to result in a value larger than 1 if the stage is wider than 2 pixels, and a value greater than 1 is not valid for scaleX, as the scale properties range between 0 and 1.

                I'm going to guess that what you are trying to do in this case is make the width of the call_mc to be half the width of the stage? In that case, use call_mc.width instead of scaleX.
                • 5. Re: Liquid Layouts - Weird Effects??
                  kglad Adobe Community Professional & MVP
                  no, you can scale more than 1. but your movieclip will then be larger than original size.

                  so, if you scaleX is 2, your movieclip's width will double. if stage.width is 500, your movieclip's width will be 250 times its original width. and that's probably not what you want.
                  • 6. Re: Liquid Layouts - Weird Effects??
                    scrfix Level 1
                    So the proper way to do this would be to:

                    1. Dynamically resize the stage according to the browser window.
                    2. Figure out exactly what floating percentage each MC is in accordance to the stage.
                    3. Write each MC individually with its own percentage.

                    Is th at correct.

                    Kglad, here is a link to a zip file that contains the fla, as, and php file. The AS file has all of the code as above in it and the fla file will show you all of the settings. Is that what you need in order to answer your question?

                    http://www.spectacularstuff.com/php-test/inprogress/ButtonFades.zip

                    Wayne
                    • 7. Re: Liquid Layouts - Weird Effects??
                      kglad Adobe Community Professional & MVP
                      1. probably.
                      2. probably.
                      3. probably.

                      if you want each of your display object's width and height divided by your original stage's width and height, resp. to stay the same no matter how the browser window is resized and you want your stage to be the same width and height as the browser window, then calculate how the stage's width and height have changed with the resize and apply that change to your display object's scaleX and scaleY properties.

                      be sure to check if you really want to use stage.stageWidth and stage.stageHeight, instead of stage.width and stage.height.
                      • 8. Re: Liquid Layouts - Weird Effects??
                        abeall Level 3
                        > no, you can scale more than 1
                        Sorry, had a brain fart. I was thinking it's not what you would want.

                        > 1. Dynamically resize the stage according to the browser window.

                        The stage itself will resize automatically if you set the scaleMode to "noScale." Then if you set the width and height of your HTML embedded Flash movie to 100%, it will stretch to match the browser automatically as well. It looks that's what you're currently doing.

                        > 2. Figure out exactly what floating percentage each MC is in accordance to the
                        > stage.

                        You should figure out positions *before* the stage resizes, otherwise your positions won't be correct.

                        > 3. Write each MC individually with its own percentage.

                        For liquid layouts, rather than thinking in percentages, you would normally think in absolutes. For instance, in the example you posted, all the objects are essentially anchored at certain points: the boxes are anchored to be ~10px from the sides, and the horizontal/vertical stretching bars act like they have two sides anchored, which causes them to stretch.

                        So basically, if you wanted something to always be 10px from the bottom right, you could put in your onResize event (assuming the MC's registration point is in its top left):

                        call_mc.x = stage.stageWidth - call_mc.width - 10;
                        call_mc.y = stage.stageHeight - call_mc.height - 10;

                        BTW, senocular has a really powerful layout manager that does all this for you in a sense:
                        http://senocular.com/flash/actionscript.php?file=ActionScript_3.0/com/senocular/display/La yout.as

                        And I made a really simple/easy to use one awhile ago:
                        http://abeall.com/files/flash/tests/ActionScript3/Layout.as
                        http://abeall.com/files/flash/tests/ActionScript3/Layout.fla

                        But it's better to understand how it all works, of course.
                        • 9. Re: Liquid Layouts - Weird Effects??
                          scrfix Level 1
                          Kglad, Abeall,

                          Thanks. I will look those over. We are starting to get in season here and work is going off the charts. I will look those over as soon as I get a chance.

                          Wayne
                          • 10. Re: Liquid Layouts - Weird Effects??
                            scrfix Level 1
                            Abeall,

                            There is nothing where that FLA file is. I receive a really cool really small flash script that states Nothing Here, What were you hoping for.

                            Wayne
                            • 11. Re: Liquid Layouts - Weird Effects??
                              abeall Level 3
                              yeah, got your message through the 404 page/What were you hoping for. My bad, the correct URL is:
                              http://abeall.com/files/flash/tests/ActionScript3/layout.fla
                              (lowercase L)
                              • 12. Liquid Layouts - Weird Effects??
                                scrfix Level 1
                                Abeall,

                                I am just now able to get some time away to look at this once more. I have been reviewing your files. Thank you very much for sharing those files. This will help out a lot.

                                http://www.spectacularstuff.com/php-test/inprogress/home.php
                                is our test webpage for development. This whole thing is a header. Currently I do not have anything in element format.

                                I am guessing that the proper course of action would be to:
                                1. Create a layout like you have.
                                2. Make everything that I have as elements by adding an instance name to everything.

                                Is that correct?

                                I am having a little difficulty reading this:

                                // defining the header layout elements
                                var header_lay = new Layout(header_mc); // Creating the variable and storing the layout in it.
                                // not sure if that is an array below this or not.
                                header_lay.elements = {
                                bg_mc:{left:true,right:true,top:true,bottom:true}, // not sure what this is doing.
                                bg2_mc:{left:true,right:true,top:true,bottom:true},
                                lefty_mc:{left:true},
                                righty_mc:{right:true},
                                red_mc:{top:true,left:true,right:true}
                                }
                                header_lay.constrain(header_mc.width,header_mc.height); // not sure what this is doing.

                                Wayne
                                • 13. Liquid Layouts - Weird Effects??
                                  scrfix Level 1
                                  Aaron,

                                  I think I understand what some of that is. I just discovered that if you highlight the keyword in flash and press F1, it brings you directly to the description (as much help as that can be) for that keyword.

                                  I did discover something however that I don't understand. Without the Layout.as the layout.fla doesn't function properly however I can find no reference to the layout.as file. How did you accomplish this? I only know how to add a name to the document link area but there is no name there and nothing in actionscript that I can find linking the layout.as file to the layout.fla file??

                                  Wayne
                                  • 14. Liquid Layouts - Weird Effects??
                                    abeall Level 3
                                    [Sorry for the late response]

                                    > I just discovered that if you highlight the keyword in flash and press F1
                                    This is probably the most important thing you've learned so far. :) Congrats, and live by it.

                                    > I did discover something however that I don't understand. Without the
                                    > Layout.as the layout.fla doesn't function properly however I can find no
                                    > reference to the layout.as file.

                                    The Layout.as file is a class. You create instances of classes. In the Flash IDE, when you call for the creation of an instance of a class, it will basically automatically include it if it is a built in class or if it falls inside your custom classpath (which by default is the same dir as the .fla, I believe) -- so in other words, by creating an instance of the Layout class in my ActionScipt Flash knows to include the file. It's basically automatically calling an "import" statement on the class when I do "new Layout()".

                                    My Layout class may be a bit overkill for what you want. In fact, AS3 may be overkill, but it won't hurt you to learn it.

                                    The example .fla is more complex than you probably need, it uses several nested Layouts. You're header probably only needs 1 top level Layout instance. So you'd probably do something like this:

                                    1) Think about how you want the layout to resize. By looking at the link you posted, I'd say you want:
                                    a) Logo, title, phone number at top, and icons on the right all should be center aligned and not scale
                                    b) The background keyboard should be right aligned
                                    c) The nav buttons should all be centered as a group
                                    Now, put all those elements in individual container MovieClips. So basically you only have 3 MovieClips to worry about, perhaps: content_mc, keyboard_mc, and nav_mc

                                    var layout = new Layout(containerDisplayObject);
                                    layout.elements = {
                                    content_mc:{center:true},
                                    nav_mc:{center:true},
                                    keyboard_mc:{right:true}
                                    };
                                    layout.constrain(stage.stageWidth,stage.stageHeight);

                                    Now those 3 elements are locked to the layout, 2 elements centered, and the keyboard right aligned. So, you don't need the animation routine I'm using, you can simply resize the Layout when the stage resizes using a simple stage resize event:
                                    function stageResize(evt){
                                    layout.resize(stage.stageWidth,stage.stageHeight);
                                    }
                                    stage.addEventListener(Event.RESIZE,stageResize);

                                    And it should be set. You can play with the different anchors; there is left, right, top, bottom, center (horizontal), and middle (vertical). If you anchor opposing sides, such as left and right, the element will have to scale between the two to keep anchored.

                                    Basically all the Layout class does is a little basic math to determine where the elements should be. It's nice to have it all automatic when you have a lot of elements, and nested elements, but for something simple like your header it may be better to just do it by hand. Basically, you would just set up a stage resize listener like I showed above, but instead of using the Layout class, you tell each element where to be based on the new stageWidth and stageHeight:
                                    function stageResize(evt){
                                    content_mc.x = stage.stageWidth/2; // this will center if the MC has a centered registration point
                                    keyboard_mc.x = stage.stageWidth - keyboard_mc.width; // registration point would have to be on the left
                                    nav_mc.x = stage.stageWidth/2;
                                    }
                                    stage.addEventListener(Event.RESIZE,stageResize);

                                    HTH
                                    • 15. Re: Liquid Layouts - Weird Effects??
                                      scrfix Level 1
                                      Aaron,

                                      I have attempted the resize script before. That doesn't work for what we are interested in. It doesn't take into account the different resolutions out there when it resizes nor does it scale down or up each individual item in order to keep the integrity of where they are on the page.

                                      Your element script was the closest thing that I have found to doing what I was looking for. I just cannot get it to work for me in numerous ways.

                                      Perhaps if I show you the fla file you can see what I am doing (either correctly or incorrectly)
                                      http://www.spectacularstuff.com/php-test/inprogress/rescale.zip

                                      There is actionscript in two places.
                                      1. On the main stage. This is where everything gets resized
                                      2. If you doubleclick on the SCRFix Logo, this will bring you to where all of the MCs are placed on the stage. There is also actionscript in there as well.

                                      Thanks for any insight,

                                      Wayne
                                      • 16. Liquid Layouts - Weird Effects??
                                        abeall Level 3
                                        Wayne,

                                        I took a look at your source. Here are my thoughts:

                                        1) You have everything in one container header MovieClip. That's fine, but by repositioning that you are basically shifting the whole thing, because the children elements will be moved relative to that container, but then you are also moving the container, so things will effectively be "moved twice" which will put them off screen. I think the reason you tried to rig this container is because you noticed that resizing the window/stage did not keep the header anchored. To do that, you simply set the stage.align property to "TL" for Top Left.

                                        2) There were a number of elements and you were centering them all, resulting in overlap because they all were being put in the center over top of each other. For instance, the 5 nav buttons at the bottom. If you put them in one container and simply center the container, it will work how you want it.

                                        I made those adjustments, and I think this does more like what you are looking for:
                                        http://abeall.com/files/temp/fadingbutton3.fla

                                        I also put the code you have for the bg gradient drawing in a function, and I call that function when the stage resizes so it also stretches to match screen size -- I also changed the drawing width/height parameters to be set to the stage.stageWidth and stage.stageHeight rather than hard coded, so it's dynamic to match the stage size.

                                        I did notice that the header is very wide, 1149 wide. For people with smaller screens, although the stuff should be anchored and centered correctly now, they will start to overlap, so you may want to resize the whole thing to be a little smaller.

                                        Hope that helps.
                                        - aaron
                                        • 17. Liquid Layouts - Weird Effects??
                                          scrfix Level 1
                                          Hi Aaron,

                                          Thanks for the reply. I am just now able to get back to this.

                                          one header
                                          I originally had everything in its own separate layer with no container and I was attempting to get everything to work together. This is the only reason you see 1 container.
                                          ( 1st newbie question: Is a layer a container or are you referring to the fact that I have a mc called header and I contain all of the items within that mc?
                                          2nd newbie question:
                                          When I create a main_mc and I store another different_mc within that mc, does this mean that different_mc is now a child of main_mc?)

                                          Centering of the elements:
                                          This has been a beginner project in AS3 for me. I need a header for this website I am working on in my spare time. I can imagine that a lot of stuff I have on here is incorrect or a working progress :).

                                          Gradient Resize
                                          I was wondering how to accomplish this. Inside the gradient tutorial from adobe, they have it set to a certain size in the code. I could not change this to a percentage otherwise the code wouldn't work and I couldn't find anything out there to tell me what to do from that point on. That was a sore spot. I knew there had to be a way to accomplish this. Thank You.

                                          Wide Header
                                          Yes, the header is extremely wide only because of the gradient as explained above. My ultimate goal is to have every single item within this including images and text to automatically resize within the header according to the browser window.

                                          Ultimate Goals
                                          - Resize all images, text and gradients dynamically depending on browser window size.
                                          - When those items mentioned above resize have them resize just as smooth as the transition of the rectangles in your example.
                                          - Reposition all images so they keep their composure and their exact placement without overlapping. (Example. When I resize my browser window, the flash header and everything inside of it should adjust accordingly so it looks as close as possible to the original header in placement and spacing of items.
                                          - Create a dynamic Hyperlink function just like I have the naming convention for the buttons. This shouldn't be too hard just a little more complicated in AS3 than AS1.
                                          - Create special roll over effects for certain areas of the header.

                                          I notice that on the one that you sent a couple of items I have questions on.
                                          1. When I export to a swf file, I can no longer see a lot of the items on there or the buttons and the spectacular computer repair is half disappeared on the bottom of the screen.
                                          2. When I resize the window the items do not move except for the middle items which stay stationery but do not resize with the window size.

                                          Is there a way to accomplish what I am attempting to do?

                                          Thanks,

                                          Wayne