Flash onResize and CSS min-width and min-height 31st January 2008

Over the years I’ve had numerous clients who have wanted Flash solutions that adjust their layout based on the current browser dimensions. This can take many forms such as resizing a background image proportionally through to re-configuring a menus structure. This quick tutorial will show you how to use Flashes onResize event to control the positioning of your components as the screen is resized whilst at the same time showing you how to handle this on the HTML/CSS side of things with a forced minimum width and height.

The first step is to setup your Flash file. We want to disable the automatic scaling Flash uses and glue the movie to the top left corner of it’s parent HTML container. That is achieved with these two lines:

Stage.scaleMode = "noScale";
Stage.align = "TL";

Now we need to handle when the screen is resized. We create a function that will re-position our components based on the updated Stage.width and Stage.height properties. For the sake of keeping this tutorial simple that function is stored on the first keyframe of the main stage. We then add the main stage as a listener of the Stage object so that it will get called automatically when the screen is resized. You can associate several objects to listen for this event although for now we’ll just use the one:

function onResize():Void
    {
        // Right box
         this.box_right._height = Stage.height;
         this.box_right._x = Stage.width-10;
         // Bottom box
         this.box_bottom._width = Stage.width;
         this.box_bottom._y = Stage.height-10;
         // Centered Arrows
         this.arrow_centered._x = Stage.width*0.5;
         this.arrow_centered._y = Stage.height*0.5;
    }
Stage.addListener(this);
this.onResize();

We call onResize at the start to re-position everything initially since without doing that it would mean they would all just sit where they were placed during design time. In this example we dropped two boxes and a four point arrow on the stage. One box gets scaled to the height of the movie and stuck to the right hand edge. The other box gets scaled to the width of the movie and stuck to the bottom edge. The four point arrow is positioned centrally. That’s all there is to the Flash side of things. The really tricky part is the HTML/CSS handling.

A lot of people will just give the Flash object a width and height of 100% when they add it to the HTML. This does not work in all browsers and can result in it not being shown at all. Another pitfall is that you get around the issue I just mentioned but then realise you want to force a minimum width and height. In Flash this is simply a matter of sticking a conditional in there:

if(Stage.width > 400 && Stage.height > 200) {
    // resize
}

It gets a whole lot trickier with CSS. The way I’ve chosen to use is simply to wrap the whole thing in a single table. You create two columns inside two rows (so really that’s four columns). In the first column we stick the Flash object. The next column holds a transparent 1×1 image that has it’s height set to my desired min-height. The first column on the second row holds another instance of that image but this time with its width set to my designed min-width.

The end result should be that if your screen width, height or both are greater than the specified minimums then the Flash object will stretch to fill the extra space. The actual components within the file will not get stretched but instead repositioned. If either the width or height of the browser is less than the minimum value it stops shrinking the Flash object and shows scrollbars for the relevant axis.

Some people might do some minor CSS tweaks and be happy but I wanted to make sure it works in all of my test browsers. I’m not going to get into explaining it too deeply as there’s a lot of code in there. Let’s just say that most of the CSS file is needed for this to work. The HTML structure shouldn’t really be changed although there’s nothing stopping you moving the table into another container. Just be sure to set the width and height attributes for all the parents in it’s tree. The key thing with my setup is to set your min-width in the CSS files “table” class and your min-height at the bottom. In the HTML you have to set the min-height for the div that surrounds the Flash object. You have to set the min-width and min-height for both of the image tags as well as the their containing columns. In total there are 7 places to set the width/height to enforce the minimum values.

The CSS and HTML pass the W3C validators, quirks mode is not enabled and it uses the XHTML 1.0 Transitional doctype. I’ve tested it on both Windows XP SP2 and Vista 64 using Internet Explorer 6, Internet Explorer 7, Firefox 2 and Opera 9.

I do confess to using a single CSS hack; the star html one. That’s right at the end of the CSS file and is used to force the height of the Flash content to the min-height value in IE6. Without doing that it would roll upwards and leave a big block of empty space at the bottom. Opera 9 is somewhat glitchy when vertically resizing the window. If you start with the window not maximised but larger than the min height, then resize it upwards so it’s less than the min-height. Now resize it back above the min-height. Occasionally this will make it stick at the min-height. The way to pop it back to normal is to either (a) refresh the page or (b) resize it horizontally or diagonally. It happens randomly enough that I’m happy to say it’s an Opera specific glitch and that it doesn’t directly affect usability since the min-height is still available.