4 Replies Latest reply on Jun 21, 2007 11:25 AM by rtwerk+co

    Great effect, need help

      Hi, I'm trying to achieve an effect, I'm hoping someone can help me with.
      I want an image to fill the entire screen of a browser window & automatically resize to fill the window area no matter the size of the browser; here is the exact effect I'm looking for: http://www.thewreckers.com/

      You'll notice that if you resize the browser window on the x axis, the image gets smaller, but if you resize on the y axis, the image
      stays the current size and only moves up and down, keeping the blonde singer's eyes centered on the page.

      I'm not a scripter, so exact syntax or even better, a sample FLA would be amazing! The only complaint I have about the sample is on Safari, the browser scroll bars show up.

      I'm using Flash 8 (AS 2), not CS3
        • 1. Re: Great effect, need help
          SmpleJohn Level 1

          This is a great tutorial. Go through it step by step and you should be good. If you want to limit the resizing of the image based on the size of the browser window, pay special attention to the "if" statements.

          • 2. Great effect, need help
            one thing this site doesn't do, but the hm site does, is limit how far you could shrink the flash file down before it forced the browser to use scroll bars. try stretching the wrecker's site window to be about 100x100, the background and everything shrinks/squishes ungracefully.

            a way around this is to include some javascript to enforce a minimum window size rule so that you can preserve the integrity of the site's minimum boundaries. so say, you know the site looks weird when seen below 400x300, force the browser to put scroll bars up accordingly under minWidth and minHeight.

            like so:

            function onWindowResize( agentaction ) {
            var minWidth = 980, minHeight = 600;
            var myWidth = 0, myHeight = 0;
            if( self.innerHeight ) {
            myWidth = self.innerWidth;
            myHeight = self.innerHeight;
            } else if( document.documentElement && document.documentElement.clientWidth ) {
            myWidth = document.documentElement.offsetWidth;
            myHeight = document.documentElement.offsetHeight;
            } else if( document.body && document.body.clientWidth ) {
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;

            if( myWidth < minWidth ){
            myWidth = minWidth;
            if( myHeight < minHeight ){
            myHeight = minHeight;

            // update content div size
            var contentDiv = document.getElementById("flashcontainer");
            contentDiv.style.width = myWidth + "px";
            contentDiv.style.height = myHeight + "px";

            "flashcontainer" is the name of the layer itself

            i shamelessly poached this from hm.com... there i said it
            • 3. Re: Great effect, need help
              Thanks! This is a great tutorial. One thing that it doesn't include however is scaling a background proportionally. I've thought that a solution might be to set the mc width to match the browser width and then to set the scaleY to equal scaleX. How would that be written in this case? I can't seem to get it to work.

              resizeListener.onResize = function () {
              setProperty(bgGradient_mc, _width, Stage.width);
              setProperty(bgGradient_mc, _height, Stage.height);
              var proportional:Number = (Math.round(bgGradient_mc.scaleX));
              setProperty(bgGradient_mc, scaleY, proportional);

              setProperty(bgGradient_mc, scaleY, bgGradient_mc.scaleX);

              bgGradient_mc.scaleY = bgGradient_mc.scaleX;

              Is there an easier way?
              • 4. Great effect, need help
                rtwerk+co Level 1
                It's still a little funky but this has seemed to do the trick. In my Flash8-naivety I'd confused scaleX for _xscale...

                bgGradient_mc._yscale = Math.round(bgGradient_mc._xscale);