How to Align a Movie Clip to the Center of the Stage in AS3

Aligning movie clips to the center of the stage is used to keep your Flash animation centered in the browser window when the browser window is resized. This means that regardless of the window size, your audience will always see the center of the movie clip on the stage instead of unused white space or, worse yet, a partially clipped movie clip. Centering a movie clip on the stage can be accomplished with one simple line of Flash ActionScript 3 (AS3) code. Keeping a movie clip centered on the stage during resizing requires just a few more, however.

Start the Flash program. Click "Flash File (ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.

Press and release the "R" key on your keyboard to enable the rectangle tool. Position your mouse cursor over the Flash stage. Press and hold the "shift" key on your keyboard to use the rectangle's tool square-making feature. Press down the left mouse button (while still holding down the shift key), and drag your mouse to draw a square on the stage. Release your left mouse button when the square has a width of about 1 inch.

Press and release the "v" key on your keyboard to select the selection tool. Position your mouse cursor outside of the boundaries of the square. Press down and hold the left mouse button and drag a selection box around the square. Release the left mouse button to complete the selection.

Click "Convert to Symbol" in the Modify menu. Type a symbol name of "Symbol 1" in the "Name" text box, click the "Movie Clip" option in the "Type" list box, click the center point in the "Registration" check box, click the "Export for ActionScript" option, type in "Rectangle_01" in the Class text box and then click the OK button in the "Convert to Symbol" dialog box to convert the square to a Flash MovieClip object and create a Class and a Symbol, called "Rectangle_01" for the square.

Click :"Properties" in the Window menu to display the Property Inspector. Type "rectangle_1" in the "instance name" text box to assign the square object, that is still selected, the name "rectangle_1."

Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button and type in the code to import the Flash utilities that are required for stage alignment, stage scaling and event listening.

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

Type the code into the next line of the ActionsScript 3 editor to enabling resizing on the stage without scaling.

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

Type the code into the next line of the ActionsScript 3 editor to add an event listener on the stage that will instruct the Flash program to execute the code in the function named "centerStage_fn" when the browser window or Flash stage is resized.

stage.addEventListener (Event.RESIZE, centerStage_fn);

Type the code into the next line of the ActionsScript 3 editor to place the square (the movie clip named rectangle_1) at the x and y coordinates that correspond to the center of the stage (based on the stageWidth and stageHeight property values).

rectangle_1.x = stage.stageWidth / 2; rectangle_1.y = stage.stageHeight / 2;

Type the code into the next line of the ActionsScript 3 editor to instruct the function "centerStage_fn" to center rectangle_1, the square, when the function receives the Reset event from the stage Reset event listener.

function centerStage_fn (e:Event):void { rectangle_1.x = stage.stageWidth / 2; rectangle_1.y = stage.stageHeight / 2; }

Copy and paste the code into the the ActionScript 3 editor to ensure there are no syntax errors and that the center stage Flash program runs correctly.

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

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

stage.addEventListener (Event.RESIZE, centerStage_fn);

rectangle_1.x = stage.stageWidth / 2; rectangle_1.y = stage.stageHeight / 2;

function centerStage_fn (e:Event):void { rectangle_1.x = stage.stageWidth / 2; rectangle_1.y = stage.stageHeight / 2; }