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.

The logo and all elements will always be aligned in the center of the page

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.

The elements will move smoothly until they reached the center of the page

Bellow a list of some sites explaining more this subject:

abduzeedo's picture
Abduzeedo Editor

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials.

RELATED CONTENT

RAWZ

Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple