6 Replies Latest reply on Apr 17, 2009 6:47 AM by David Stiller

    Sizing the stage. Setting a min and max size for different screen sizes.

    stillLrng

      I have a project I'm working on that requires the flash site to size up and down to fit a range of monitor/browser sizes.  I'm having a problem figuring out how to set parameters so that my site doesn't get too big or too small.   Say the max size should be 1050px-w by 700px-h. And then the min should be 800px-w by 580px-h.  I would be extremely appreciative of any help with this.

       

      K-I-Double-D

        • 1. Re: Sizing the stage. Setting a min and max size for different screen sizes.
          kglad Adobe Community Professional & MVP

          search google for a tutorial on liquid flash layouts using the actionscript version you want to use.

          • 2. Re: Sizing the stage. Setting a min and max size for different screen sizes.
            stillLrng Level 1

            I've thought about reconfiguring the whole site to a fluid layout (wish I would have known about that in the beginning ), but it's not going to be feasible due to time constraints.  Is there any other way to mimic this via html code possibly?  I've toyed around a little with using min and max width/heigth on my container div, but I can't seem to get that to work right, let alone the compatability issues with the older versions of IE.  I'm trying to get creative, but I don't have enough coding experience yet to fully grasp the power of AS and make this work.  I'm hoping that someone reading this will have some guidance.  Thanks in advance.

             

            K-I-Double-D

            • 3. Re: Sizing the stage. Setting a min and max size for different screen sizes.
              David Stiller Level 2

              SWFkidd,

               

                   kglad nailed it.  What this sounds like, honestly, is that you want a fluid layout, coded up inside Flash.  The main principle behind the ActionScript involved is an event called Stage.onResize (AS2) or Event.RESIZE (AS3).  I wrote a brief how-to for AS2 here ...

               

                   http://www.quip.net/blog/2006/flash/how-to-position-movie-clips-browser-resizing

               

              ... which may at least give you a gist of the fundamentals.  If you look through the comments (there are plenty), you'll see how to constrain the figures, which is what you're after here.  You'll probably find more cohesive tutorials out there, though, I'm sure.

               

              > Is there any other way to mimic this via html code possibly?

               

                   Not really.  HTML will let you specify percentages for your movie's width and height, but that doesn't let you constrain the dimensions to a desired min and max.  CSS might get closer -- sounds like you've already experimented with that -- but I think the only way you could do this from outside the SWF is to use JavaScript.  In theory, you could take browser measurements with JavaScript and then update the dimensions of the <div> that contains your SWF -- or perhaps the dimensions of the SWF itself -- programmatically.  The best that could do, though, is scale your SWF as is.  It could scale your SWF within min and max constraints, too, but that SWF wouldn't be a fluid layout.  For example, nothing inside your SWF would re-adjust itself to fit inside a widescreen display, as opposed to a 4:3 display.  For that, you really do need to program the movie clips that contain your content -- and do so from within the SWF itself.

               

               

              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."

              • 4. Re: Sizing the stage. Setting a min and max size for different screen sizes.
                stillLrng Level 1

                Thanks for the reply.  Sounds like I know what I have to do.  I guess in all reality I would save time by going the route of fluid flash, and probably save a lot of headaches by not messing around with the javascript and css methods only to find out I should have built a fluid layout to begin with.  <<<Sorry for the run-on<<<   Now it's time to get knee deep in fluid layouts.  Thanks again!!!   Looking forward to learning more about the fluid architecture!!!

                • 5. Re: Sizing the stage. Setting a min and max size for different screen sizes.

                  Hey,

                   

                  I think I have a better option. There is a PHP script which is damn easy to impliment. What it does is , it determines the resolution of user's screen and displays html according to that. So instead of making whole site again just tweak it for different resoltuions and put them in different html's.

                   

                  I had  same problem while creating vertigo-visual.com. you can see how it really works on

                  http://newmediaguru.co.uk/projects/vertigovisuals

                   

                  I needed the site for two different resolutions.1280/1024 and 1024/ 768. It worked well for me.Try opening this site on these 2 resoltions you will see difference in address bar and also in objects placed inside the site.(specially see work section to clearly see the difference). Making it a liquid or fluid site will consume a lot of time, compared to this.

                   

                  Hope it helps.Will be happy helping you more on this.

                   

                  Cheers!

                  • 6. Re: Sizing the stage. Setting a min and max size for different screen sizes.
                    David Stiller Level 2

                    smilingbuds,

                     

                         Your Vertigo site is beautiful!  This particular design lends itself fairly well to slight differences (even large differences) in overall document dimensions.  Partly, this is due to the large background gradient, which spills past the boundaries of the stage.  This design is purposefully open, to hide the fact that it (and all websites) has finite document boundaries.

                     

                         That said, I did notice a potentially significant drawback.  In the Work section you mentioned, it was easy to adjust my browser to partially obscure your thumbnails, and worse, to fully obscure the navigation (see attached screenshot; notice the browser shows no scrollbar to indicate that any content is missing).  Even with the PHP solution you mentioned -- or, say, with the JavaScript solution I hypothesized -- that is, even if the HTML is rearranged on the fly to resize the SWF, a non-fluid design is prone to this sort of issue.

                     

                         If true fluidity is desired, it must be accounted for by ActionScript programming.  ActionScript would make the obscured nav "smart enough" to move up if it falls outside the stage dimensions.  The only exception I can think of is, oh ... some experimental design in which the navigation (and/or all essential elements) are literally centered, horizontally and vertically.

                     

                         Please understand, I have nothing against your Vertigo design.  It's a joy to the eye and fun to navigate.  I'm not even bothered by the fact that the site isn't fluid -- fluidity is neither right nor wrong; it's a design choice -- but it's important to realize the pros and cons of the various choices a designer has.  If off-center elements need to be present at all times, or if any elements need to respond with purpose to changes in browser dimensions, then then external manipulation of SWF dimensions isn't necessarily enough.

                     

                     

                    David Stiller
                    Adobe Community Expert
                    Dev blog, http://www.quip.net/blog/
                    "Luck is the residue of good design."