Flash Fluid Layouts and Stage Resize in AS3

By Rimp | Flash CS3 | Actionscript 3.0 | Intermediate

This tutorial will teach you the very basic concepts for creating fluid layouts in Flash AS3. This sort of layout expands and repositions its contents automatically according to the window size. You can see an example of this effect on my personal portfolio. Once the main preloader completes try resizing the window to see the content flow into new positions automatically.

AS3 - Flash Fluid Resize

We will teach you how to create this effect by using the stage .RESIZE event. Make sure that you review the Tween Class and the AS3 Event Handling tutorials (if you are not aware of these topics) to make sure that you understand everything in this tutorial.

This tutorial is divided into the following sections:

  1. Introduction to Event.RESIZE
  2. Creating the Graphical Assets
  3. Simple Repositioning
  4. Animated Repositioning

In this tutorial, you’ll learn how to listen for and handle the resizing of the browser. This is an intermediate Actionscript 3.0 tutorial that will make use of the Tween Class and general event handling techniques. Make sure you read all of the relevant tutorials on those topics before attempting this tutorial.

Introduction to Event.RESIZE

The Event.RESIZE is an event that is triggered each time the browser or Flash Player window is resized. It must be registered with the stage in order to function. In all fluid layouts this event is used to retrieve the new width and height of the stage and then use these two values to reposition or scale the objects on stage accordingly. We are going to show you a very simply example now on how to use this event in practice.

Let’s begin with an easy example. Start off by creating a new Actionscript 3.0 document and saving it somewhere on your computer. Set the frame rate to 30 in the properties inspector.

AS3 Stage Resize

Access the timeline and rename the only layer to actions, then right-click the only frame on that layer, select Actions and then paste the code below in. We will explain the code in detail in a moment.

AS3 Stage Resize

stage.addEventListener(Event.RESIZE, resizeListener);

function resizeListener (e:Event):void {
trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);
}

Now test your movie (Ctrl+Enter). When the .SWF compiles you will see nothing in the output panel. There’s a good reason for that, we haven’t resized the .SWF for the event to be triggered. So go ahead, scale the .SWF. In the bottom right hand corner of the .SWF window, click and drag to expand. You’ll see the dimensions of the stage appearing in the output panel.

We will now explain the code. The first line of Actionscript simply registers the stage instance with Event.RESIZE and the event listener resizeListener().

stage.addEventListener (Event.RESIZE, resizeListener);
You can learn more about Event Handling in AS3 by reviewing our tutorial on this topic.

The next part of the Actionscript is the function that is called when the browser is resized. This listener simply retrieves the properties stageWidth and stageHeight and displays them on the stage using the trace() method.

function resizeListener (e:Event):void {
trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);
}

As long as the browser is resizing, the resizeListener() function is being called and outputting the browsers new width and height.

In the rest of the tutorial we will use these properties to reposition a visual object on stage.

Creating the Graphical Assets

We are going to create an example of a simple circle shape that is repositioned each time the window is resized. First things first, create a new layer under your actions layer. Label it ball.

AS3 Stage Resize

On the ball layer create a 100x100 (any size will do) circle on the stage and convert it into a MovieClip symbol. To do that, select the circle on the stage and then press F8, set the name of your symbol to ball, the symbol type to MovieClip, and set the Registration Point to the center.

AS3 Stage Resize

Finally, click the newly created movie clip on the stage and in the Properties inspector give it an instance name of ball_mc.

AS3 Stage Resize - Instance Name

An Instance Name is a reference that can be used to manipulate an object using ActionScript.

Our ball is now ready for Action. We are going to start coding in the next section.

Simple Repositioning

Back to the Actions panel. Before we start repositioning our objects we need to add a couple of lines to ensure that the effect works properly. We first need to stop the stage from rescaling itself automatically when the window is resized. We then need to make sure to use the alignment of the stage to the top left. This is necessary to make calculating distances easy.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
The .stageMode and .align property can be set to a number of other options. You can refer to the ActionScript reference if you are interested in learning more about these two properties.

We would like our ball to be positioned at the center of the stage all the time. The center of the stage is calculated by finding the width of the stage and then dividing it by two. We simply set that as the value for the .x property of the ball and it will do the job. The same thing is applied for the stage height and .y property of the ball as well. This command is to be executed from inside our previous resizeListener() listener:

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

Now test your movie (Ctrl+Enter) and resize the window. You’ll see ball_mc snap to the center of the .SWF and stay there as you keep resizing.

It is possible to make your ball stick to a single position by using the stage width and height in other calculations. If you want your ball to go to the left of the screen simply set the value of .x to zero, if you want it to go the right simply set the value of .x to the exact value of stageHeight. Playing around with these values will get you any position you want.

That should do it for simple positioning. We will show you next how to make animated repositioning.

Animated Repositioning

In order to make animated repositioning we need to make use of the Tween Class. The Tween Class requires a starting point and an end point for the animation, we are going to use the ball's existing position as the starting point and the new calculated position as the ending point.

In order to use the Tween Class we need to first import the necessary packages. At the top of the actions panel please copy and paste this code into there.

import fl.transitions.Tween;
import fl.transitions.easing.*;
You can learn more about the Tween Class by reviewing our tutorial on this topic.

Next we’ll need to create two variables that will store a reference for our Tweens, we’ll be instantiating these in our resize function.

var xTween:Tween;
var yTween:Tween;

Now we, need to update our resizeListener() function to Tween ball_mc to the center of the stage.

function resizeListener (e:Event):void {
xTween = new Tween (ball_mc, “x”, Elastic.easeOut, ball_mc.x, (stage.stageWidth / 2), 2, true);
yTween = new Tween (ball_mc, “y”, Elastic.easeOut, ball_mc.y, (stage.stageHeight / 2), 2, true);
}

There you have it. Test your movie again and resize the window. You’ll see the ball Tween to the center of the stage. Congratulations! Now that wasn’t so hard? Take what you’ve learned today and create some really exciting applications with it.

This concludes our tutorial. I hope that you've learnt something helpful. Feel free to post any questions or comments you have the Republic of Code Forum.

- End of Tutorial.