What a find!

If you look at the demo or the sample sites you will notice that the whole flash movie doesnt scale, only parts of the movie scale and get repositioned as the browser window is resized.

What we really need is control over how each of the elements (movieclips) in the flash movie reacts to browser window resizing.

Stop Scaling

To control the scaling and resizing for each individual movie clip you must first turn off the scaling for the movie as a whole.

Enter the following actionscript into Frame 1.

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

The stage scale mode is set to no scale which means that by default the elements in the movie will not scale in recation to changes in the browser window size.

Notice that the Stage.align variable is set to ‘TL’ it means that the stage will be positined in the topleft corner of the stage.

Add a Listener to Check for resizing.

Now that you have the initial setup completed, all thats left is to add a listner for resizing. This creates a new listener object and assigns it to the ‘Stage’ (main flash movie).

sizeListener = new Object();
sizeListener.onResize = function() {
trace (Stage.width)
trace (Stage.height)

The sizeListener.onResize function is the key to making this movie work . The code inside the on resize function will execute actions when the movie is resized. This function is the key to creating liquid flash layouts.

In the sample code above the onresize function just traces the stage.width and stage.height values but you can use the Stage.height and Stage.width values to adjust various elements in your movie

Practical Example

Stage.align = "TL";
Stage.scaleMode = "noScale";
sizeListener = new Object();
sizeListener.onResize = function() {
centered._x = Stage.width/2
centered._y = Stage.height/2
centered._width = Stage.width * .5

This code adjusts the _x and _y values of the movie clip ‘centered’ when the browser window is resized so that the clip remains centered. And the width of the movie clip centered is changed to eaqual half the width of the browser window.

By bluedawg Design Posted in Learning Tagged

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s