View an Example of this article before you get started.

If you want to skip the overall article explanation here is the completed code.

Have you ever seen a web site that is 100% Flash? This of course being a web site that the entire browser contents is in fact a Flash movie. Well I am sure you have seen the effect a lot of them have when you resize the browser, you know, when the movie rebuilds or aligns itself any time the window is resized.

Well in this mini article I am going to show you a very quick and simple way to create this effect

Start off by creating a new movieclip instance, placing it on the stage and giving it an instance name of "mySampleMC".

Once you have the movieclip on the stage you can open the Actions panel (F9 on win, ALT+F9 on mac) to begin building the script

In the Flash editor you do not need to import the classes, however to use this code in an external editor or Flex you need to, so for completeness, lets do that

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

Now that the classes are imported, you can create the function that will do the resizing. This function will be called by the stage Event handler.

function resizeHandler(e:Event):void
{
  mySampleMC.x = (mySampleMC.stage.stageWidth / 2) - (mySampleMC.width / 2);
  mySampleMC.y = (mySampleMC.stage.stageHeight / 2) - (mySampleMC.height / 2);
}

The next step is to assign the resize event to the stage.

stage.addEventListener(Event.RESIZE, resizeHandler);

The last step is to add the proper resizing constraints to allow this event to fire off.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Now you can publish the movie by going to File > Publish Settings and change the width/height to 100% or test the movie in the Flash editor. When you resize the movie you should see the clip center on the window, until you resize past the point of the clip, then it will disappear.

At this point the example is complete, however you may have noticed the movieclip is centered until the stage event is called. Normally this is a problem because the movie will start off not centered. That being said, ActionScript has a method of the EventHandler, dispatchEvent(). What this method lets you do is create an event on your own, without waiting for the assigned item to cause it.

The syntax of this method expects a new Event to be created, passing in the proper event name as an argument.

stage.dispatchEvent(new Event(Event.RESIZE));

You may be asking why you can't just call the resizeHandler function directly, and the truth is, you can. This is just a much cleaner and less "hackish" way to accomplish the calling of an event. You will see this dispatchEvent method used more for forcing custom errors in larger applications.

Here is the completed resize example for easy copy+pasting. I hope you enjoyed this and all the other tutorials on this site!

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

function resizeHandler(e:Event):void
{
  mySampleMC.x = (mySampleMC.stage.stageWidth / 2) - (mySampleMC.width / 2);
  mySampleMC.y = (mySampleMC.stage.stageHeight / 2) - (mySampleMC.height / 2);
}

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);

stage.dispatchEvent(new Event(Event.RESIZE));

As a side note, I wanted to let the readers know I am in the process of wrapping up my book on Flash and PHP. Once it is available I recommend you pick it up, as the contents of the book is about working with Flash and PHP to develop real world applications while starting off with the fundamentals so anyone can follow the material. The book is available on Amazon as a pre-order.