Fluid layouts in Flash

I have done some projects in the past using a lot of Flash, most of the newcomers usually want their sites done using this Adobe technology.

Nowadays, though, Flash seems to have lost a bit of its shine. With AJAX, Webstandards, CSS and stuff like that being hyped as the new trend for this new web called web 2.0.

However, as an unknown designer doing my job, I have started a flash project. Basically it’s a site in flash. So one of the things that I was willing to do was to create a fluid site in flash, that resizes when I resize my browser’s window.

After some searches everything was pretty clear, it was far simpler than I expected, because that I show bellow an example with a very simple design of my logo.

Step 1

Create a new flash project, any size, it doesn’t matter, it will take 100% of the screen.

Step 2

Place the design and create movieclips. In this example I set the registration point in the center of all movieclips, making everything much easier to align.

Step 3

The Stage Class

The Stage class is a top-level class whose methods, properties, and handlers you can access without using a constructor. Use the methods and properties of this class to access and manipulate information about the boundaries of a SWF file.

var stageListener:Object = new Object();
stageListener.onResize = function() {
};
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.addListener(stageListener);

Step 4

Using the Tween Class to spice it up a little bit. I used this class to create tweens, so, when the user will resize the windows and when he finishes the resizing and release the button, the elements will move straight to the center of the screen again.

The Tween class lets you use ActionScript to move, resize, and fade movie clips easily on the Stage by specifying a property of the target movie clip to be tween animated over a number of frames or seconds. The Tween class also lets you specify a variety of easing methods.

Step 5

The HTML and CSS. The background used there comes from the CSS, and the flash uses the WMODE = Transparent parameter.

Final Result

Click in the image to open a new window with the flash example.

Bellow a list of some sites explaining more this subject:

• FluidFlash
• Liquid Flash Layout
• Creating Fluid Layouts in Flash Part 1: The basics