Stage Object

24th August 2005

Problems that can be solved by using the Stage object seem to appear with some regularity on the Flash forums I visit, so I put together a little tutorial that demonstrates a common use for it.

The following example is based around having a movie with percentage dimensions (Don’t forget to be nice to the Mozilla browsers) where you want some elements to expand to fill all the available space while other elements shouldn’t scale. A popular example of this kind of thing is the Hi-Res website — the background image is scaled to fit the browser window, whilst the content remains a fixed size.

The key to this effect is the scaleMode property of the Stage object. When this is set to “noScale” the content won’t be scaled no matter how much the movie is streched and resized. The Stage object has a couple of other important properties, Stage.width and Stage.height. Unsurprisingly these report the size of the stage, which when the scaleMode is set to “noScale” is the width and height of the area that Flash Player is taking up on the screen (not just the dimensions of the unscaled content).

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

Setting the align property to “LT” means that all measurements will be based around an origin at the top left hand corner of the movie.

Once the scaleMode is set up it is then possible to add a listener to the Stage object to detect onResize events so elements in the movie can resize and or reposition themselves whenever the movie is resized. Of course each time the movie is resized Stage.width and Stage.height update so we always know exactly how much space we have available. The following little snippet of ActionScript would make a movie clip with the instance name bg always fill all the available space.

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

bg.onResize = function() {
    this._width = Stage.width;
    this._height = Stage.height;
};
Stage.addListener(bg);

bg._x = bg._y = 0;
bg.onResize();

So now each time the movie gets resized Flash will automatically call the onResize event handler for the bg clip, which then resized itself. Note that this assumes the movie clips to have registration points at their top left hand corner.

Now, if we had a second movie clip named content which we wanted to remain at a fixed size and centred in the movie. This can be done in much the same way as the bg clip was scaled, but instead of adjusting the _width and _height of the clip when the movie changes size we can reposition it. Here’s the extra code to position the content clip,

content.onResize = function() {
    this._x = (Stage.width - this._width) / 2;
    this._y = (Stage.height - this._height) / 2;
};
Stage.addListener(content);

content.onResize();

I’ve uploaded an fla file (MX Format) that includes all the code here. Obviously you could do a lot more with this, one possibility would be to create a background that always fills the screen — but instead of stretching the image have it maintain it’s original proportions.

Permalink. Posted on 24th August 2005 in Flash.

Comments

  1. Hello! I used your tutorial and loved it! I have a question, though and I hope you could direct me in the way of solving it. The resizing background works great execpt for when the viewer resizes the browser..then everything goes haywire. What can I do to solve this?

    Thanks!
    Sara

    # Posted by Sara on 10th April 2006.

  2. I'm not sure why it would be doing that, could you post a link to the file? Thanks!

    # Posted by Andy on 11th April 2006.

  3. http://www.studiosixdesign.com/newmath/stageExperiment.zip

    This is a sample of it.
    Thanks!

    # Posted by Sara on 11th April 2006.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening