7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Web Design

Build a Fluid Website Layout with Flash

Scroll to top
Read Time: 13 mins

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in July, 2009.

A fluid web layout uses 100% width (and height) of the browser, floating all the contained elements into certain positions. This is opposed to fix-width layout where contents remain fixed no matter what the browser size is.

This technique is popular in HTML/CSS websites, but this tut will show you how to create a similar fluid layout effect in Flash. Every element will reposition itself with ease animation when the browser resizes.


During the following steps we'll create ActionScript 3 classes which make our flash website fluid. All our display symbols will retain their alignment when the Flash is resized.

The ActionScript classes created in this tutorial can be easily reused in different projects.

Step 1: Background Information

As shown in the image below, all the elements which float according to the browser size will be referred to as "fluid objects".

Step 2: Fluid Object Coordinates

Each fluid object will contain alignment parameters. The parameters store the x, y, x offset, y offset value of the object to indicate how it aligns.

Assigning x and y to 0 will make the fluid object align to the top left corner. Assigning x and y to 1 will make the fluid object align to the bottom right corner. Therefore, assigning x and y value between 0 and 1 will float the object at a percentage of the width and height of the browser.

The offset X and Y offset the position of the fluid objects while they align. Offsetting useful when positioning an object whose alignment point is not at the center. The offset is also useful for making margins on the alignment.

Step 3: Create a Directory

Create a directory called "FluidLayout" in the working directory. This directory will store all classes which relate to the fluid layout classes.

It's a good habit to put the ActionScript class files in directories by category. For example, fluid layout classes will be placed in the "FluidLayout" folder in this case.

Please note that all the directory names, file names and codes are case sensitive.

Step 4: New ActionScript File

Open a new ActionScript file named "FluidObject.as". Save this ActionScript file into the "FluidLayout" directory.

The class FluidObject will store the alignment parameters of the symbols and reposition the symbols when the browser resizes.

Step 5: The Class Skeleton

Let's start coding the FluidObject.as now.

Step 6: Importing Required Classes

Add the following code where you see: /* Add import classes here */

Step 7: Declaring Instance Variables

There are three instance variables for this class:

  1. "_param" will store the alignment parameters.
  2. "_target" will point to the monitored symbol.
  3. "_stage" is a copy instance of the flash stage.

There is also a setter for "_param" to enable changing of the alignment parameters. Add the following code where you see: /* Declare instance variables here */

Step 8: Implementing the Constructor

The constructor will initialize the target monitored symbol and store the given alignment parameters.

Step 9: Implementing reposition()

The repositioning function is in charge of calculating the new x/y position of the monitored fluid object.

Step 10: Implementing onStageResize()

The onStageResize function is an event handler which is called when the browser resizes.

Step 11: The Completed Class

The finished class FluidObject is finished in this step.

Step 12: Time to Create a Flash File

Begin a new Flash Document with ActionScript 3.0 supported and call it "website.fla". Then set the Document class as "Website".

If a dialog box pops up with the message: "A definition for the document class could not be found in the classpath,..." just click "OK" to bypass it. We're going to create that class after drawing the graphic symbols.

The background image will be dark in this tutorial (I've put together my own space-like image using Photoshop). Therefore the background color of the flash document needs to set to black. Click Modify > Document to open the Document Properties dialog and change the background color.

Step 13: Draw the Title Symbol

There will be 5 flash symbols on the stage:

  • background
  • title
  • menu
  • middle content
  • footer

Let's make the title first. The aim of this tutorial is to create floating symbols in the fluid layout rather then creating fancy website components. The symbols will only contain a text field indicating the purpose only.

For the title symbol, there's a semi-transparent background. In order to fit different widths of the browser, the width of the background need to be large enough.

After having finished drawing the symbol, click Modify > Convert to Symbol (F8). Click the "Advanced" button to show detailed settings for the symbol.

Click "Export for ActionScript" to enable the ActionScript to access this symbol. Then find the "Class" field in the dialog and set the value to "Title" for the title symbol. This means that we've assigned a new Class called "Title" to this symbol. We can use this symbol later in the ActionScript.

Remember to name your symbol for easy recognition before you click OK. If a dialog box pops up with the message "A definition for this class could not be found in the classpath,..." again, just click "OK" to bypass it. Since we'll not add any behavior to the symbol, we'll let Flash create an empty class for us.

Step 14: Draw the Other Symbols

Delete the "title" symbol instance on stage because it will be created by ActionScript later.

We'll use the same method to draw "background", "menu", "middle content" and "footer". The class name of these symbols will be Background, Menu, Middle and Footer accordingly.

The background image can be downloaded from the source files. Other symbols are text-field only.

Step 15: Code the Document Class

Create an ActionScript file and named as "Website.as"; this class file should be saved in the same directory as the website.fla file.

This class must also share the same name as that set in the Document Class (refer to Step 12). For example, the Document Class "Website" refers to "Website.as" in the same directory. This ActionScript class will be loaded right after the flash is loaded.

Here is the skeleton of the Document Class:

Step 16: Implementing the Constructor

Step 17: Ensure All Assets are Ready

Open website.fla in Flash and check again before texting the movie.

There's no need to place the symbols on the stage because the Website.as will create symbol instances from library by using their class names. The linkage class names of the symbols needs to be correct in order for the script to use them. The linkage class name can be checked in the library panel.

Step 18: Ready to View the Result

Click Control > Text Movie or Ctrl(Cmd) + Enter to test the flash website.

Try resizing the window and check if all objects are repositioning to the correct alignment.

Step 19: Further Work

Each FluidObject now needs to have specific x,y,offsetX and offsetY property values. A new Class will be created in the coming steps to simplify the future code when adding new fluid objects.

Step 20: SimpleFluidObject Class

Open a new ActionScript file named "SimpleFluidObject.as". Save this file inside the "FluidLayout" directory because this is part of the FluidLayout package.

This file extends FluidObject class so that it will provides simple alignment by using names like TOP, MIDDLE, BOTTOM_RIGHT instead of specifying the x,y properties.

Here is the skeleton of the class:

Step 21: Implementing the Constructor

Step 22: New Usage of the Fluid Objects

Refer to the Website.as file and try using the new alignment method to align the fluid objects.

The Old Method to apply alignment to Title:

The New Method to apply alignment to Title:

Available alignments:


Step 23: The Published HTML

Now the fluid alignment works on the "Test Movie" in Flash IDE, but there is one key point to make this work on browser.

Open website.fla. Go to File > Publish Settings and ensure HTML is enabled. Click the HTML tab and change the dimension to "Percent". Ensure the percent is set to 100 on both width and height.

Click "Publish" to publish the website as "website.swf" and "website.html" files.

Now open the "website.html" file with your favorite text editor and add the following code in the header. Adding the code right after the </title> tag would be a good choice.

These CSS styles eliminate the gap between the top left side of the HTML and the SWF file.

Step 24: Advanced Technique Adding Easing

An easing effect can be applied when the browser resizes so that the objects will move to the correct position with an ease out effect.

Open "FluidObject.as". Add the following lines after "import flash.display.*;". These lines will import the tweening animation class to give the code ability to ease the objects.

Then find the following lines in the "FluidObject.as" file. They are within the "reposition" function.

Replace them with the following code:

Test the movie, the objects will be easing when the browser resizes


We've just created two classes which are in charge of the floating fluid objects. We also created an example to align different objects on stage by using the classes. This example is only a sample case; you can use your imagination to play with the alignments. For example, a symbol may be interactive and its alignment may change from top to bottom when the user clicks on it.

The file structure should be the same as below after you finish this tutorial. Specifically, the FluidObject.as and SimpleFluidObject.as should be in the "FluidLayout" directory in order to work.

Enjoy the Fluid Layout!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.