Version: Flash MX
Date Added: February 15, 2003

This technote is partially excerpted from ActionScript for Flash MX: The Definitive Guide.

As of Flash MX, we can respond to the resizing of a movie programmatically via the Stage.onResize() event. Stage.onResize() lets us dynamically reposition elements in a movie, relative to the currently available space. We can use this ability to create "stretchy" layouts that behave like percentage-width tables in web pages created with HTML. A movie in a browser window triggers resize events only if its HTML HEIGHT or WIDTH is set to a percentage value.

For example:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"
  WIDTH="100%"
  HEIGHT="75">
  <PARAM NAME=movie VALUE="theMovie.swf">
  <EMBED src="theMovie.swf"
    WIDTH="100%"
    HEIGHT="75"
    TYPE="application/x-shockwave-flash"
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
  </EMBED>
</OBJECT>

Notice that one dimension can be set to a fixed pixel size (HEIGHT="75") while the other is a percentage (WIDTH="100%"). When a movie first loads into a browser, onResize() is not triggered, even if percentage dimensions are specified. We must trigger the movie's initial layout code manually.

The following code registers an event listener that responds to onResize(). Notice the mandatory setting of scaleMode to "noScale":

Stage.align = "T"; // Position the movie at top, center
Stage.scaleMode = "noScale"; // Prevent scaling (required!)

// Create the listener object
resizeListener = new Object();
resizeListener.onResize = function () {
  trace("New width: " + Stage.width);
};
Stage.addListener(resizeListener);

For further study, here is a small application that repositions elements in a movie relative to the actual size of the Stage: download || view.