Table of Contents

listenerObject.onResize()

Description

The onResize( ) event is triggered when Stage.scaleMode is set to "noScale" and the Player dimensions change. The Player dimensions change when either:

• The Standalone Player is resized by the user or in response to an fscommand ("fullscreen", "true") call.

• The user resizes a browser window containing a movie embedded using percentage values for the OBJECT/EMBED tag's HEIGHT or WIDTH attributes.

The onResize( ) event 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);

Any number of listener objects can respond to the onResize( ) event. For example, in dynamic layouts, each visual object (a text field, button, or movie clip) can be registered as a listener for onResize( ) so that each element can position itself independently when the movie changes size, as discussed in Chapter 10. See the following Example for code that positions a movie clip when the movie is resized.

To stop a listener from responding to the onResize( ) event, use removeListener( ), as in:

Stage.removeListener(resizeListener);

Visual changes made to a movie inside an onResize( ) listener are rendered immediately, independent of any frame rate setting. No call to updateAfterEvent( ) is required.

Example

The following code pins the movie clip logo_mc to the top-right corner of the Player's display area even when the Stage is resized:

Stage.align = "LT";
Stage.scaleMode = "noScale";
stageListener = new Object();
stageListener.onResize = function () {
  logo_mc._x = Stage.width - logo_mc._width;
  logo_mc._y = 0;
}
Stage.addListener(stageListener);

A more extensive sample of a resizable star field can be downloaded from:

http://www.moock.org/webdesign/flash/actionscript/resizableMovie/resizableMovie.zip

Bugs

When a call to fscommand("fullscreen", "true") triggers onResize( ), the values of Stage.width and Stage.height within the callback function are incorrect. To determine the actual size of the fullscreen Standalone Player, use setInterval( ) to poll for the width and height, or check the screen size directly with System.capabilities.screenResolutionX and System.capabilities.screenResolutionY.

See Also

Stage.addListener( ), Stage.height, Stage.removeListener( ), Stage.scaleMode, Stage.width; Chapter 10.

Table of Contents