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.

Introduction

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.

	package FluidLayout {

		/* Add import classes here */

		public class FluidObject {

			/* Declare instance variables here */

			/* Constructor of the class */
			public function FluidObject(target:DisplayObject,paramObj:Object)
			{
			}

			/* Function that repositions the monitored object */
			protected function reposition():void
			{
			}

			/* Function that is called when the RESIZE event is fired */
			protected function onStageResize(e):void
			{
			}
		}
	}

Step 6: Importing Required Classes

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

	/* class needed on resize Event */
	import flash.events.Event;

	/* classes needed for MovieClip and DisplayObject */
	import flash.display.*;

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 */

	/* alignment parameters */
	protected var _param:Object;

	/* target object to be monitored */
	protected var _target:DisplayObject;

	/* stage instance of the flash document */
	protected var _stage:Stage;

	/* Setter for the alignment param */
	public function set param(value:Object):void {
		_param = value;
		this.reposition();
	}

Step 8: Implementing the Constructor

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

	/* Constructor of the class */
	public function FluidObject(target:DisplayObject,paramObj:Object)
	{
		/* Assign the instance variables */
		_target = target;
		_param = paramObj;
		_stage = target.stage;

		/* add event handler for stage resize */
		_stage.addEventListener(Event.RESIZE, onStageResize);

		/* reposition the object with the alignment setting applied*/
		this.reposition();

	}

Step 9: Implementing reposition()

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

	/* Function that reposition the monitored object */
	protected function reposition():void
	{
		/* get the current width and height of the flash document */
		var stageW = _stage.stageWidth;
		var stageH = _stage.stageHeight;

		/* update the x and y value of the monitored object */
		_target.x = (stageW * _param.x) + _param.offsetX;
		_target.y = (stageH * _param.y) + _param.offsetY;

	}

Step 10: Implementing onStageResize()

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

	/* Function that is called when the RESIZE event is fired */
	protected function onStageResize(e):void
	{
		/* reposition the target */
		this.reposition();
	}

Step 11: The Completed Class

The finished class FluidObject is finished in this step.

package FluidLayout {

	/* class needed on resize Event */
	import flash.events.Event;

	/* classes needed for MovieClip and DisplayObject */
	import flash.display.*;

	public class FluidObject {

		/* alignment parameters */
		protected var _param:Object;

		/* target object to be monitored */
		protected var _target:DisplayObject;

		/* stage instance of the flash document */
		protected var _stage:Stage;

		/* Setter for the alignment param */
		public function set param(value:Object):void {
			_param=value;
			this.reposition();
		}

		/* Constructor of the class */
		public function FluidObject(target:DisplayObject,paramObj:Object)
		{
			/* Assign the instance variables */
			_target = target;
			_param = paramObj;
			_stage = target.stage;

			/* add event handler for stage resize */
			_stage.addEventListener(Event.RESIZE, onStageResize);

			/* reposition the object with the alignment setting applied*/
			this.reposition();

		}

		/* Function that repositions the monitored object */
		protected function reposition():void
		{
			/* get the current width and height of the flash document */
			var stageW = _stage.stageWidth;
			var stageH = _stage.stageHeight;

			/* update the x and y value of the monitored object */
			_target.x = (stageW * _param.x) + _param.offsetX;
			_target.y = (stageH * _param.y) + _param.offsetY;

		}

		/* Function that is called when the RESIZE event is fired */
		protected function onStageResize(e):void
		{
			/* reposition the target */
			this.reposition();
		}

	}

}

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:

package {

	import flash.display.*;
	import FluidLayout.*;

	public class Website extends MovieClip{

		public function Website()
		{
		}
	}
}

Step 16: Implementing the Constructor

package {

	import flash.display.*;
	import FluidLayout.*;

	public class Website extends MovieClip{

		public function Website()
		{
			/* Set the Scale Mode of the Stage */
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			/* Add the symbols to stage */
			var bg = new Background();
			addChild(bg);

			var title = new Title();
			addChild(title);

			var menu = new Menu();
			addChild(menu);

			var middle = new Middle();
			addChild(middle);

			var footer = new Footer();
			addChild(footer);

			/* Apply the alignment to the background */
			var bgParam = {
				x:0,
				y:0,
				offsetX: 0,
				offsetY: 0
			}
			new FluidObject(bg,bgParam);

			/* Apply the alignment to the title */
			var titleParam = {
				x:0,
				y:0,
				offsetX:0,
				offsetY:0
			}
			new FluidObject(title,titleParam);

			/* Apply the alignment to the menu */
			var menuParam = {
				x:1,
				y:0,
				offsetX: -menu.width - 20,
				offsetY: 20
			}
			new FluidObject(menu,menuParam);

			/* Apply the alignment to the content */
			var middleParam = {
				x:0.5,
				y:0.5,
				offsetX: -middle.width/2,
				offsetY: -middle.height/2
			}
			new FluidObject(middle,middleParam);

			/* Apply the alignment to the footer */
			var footerParam = {
				x:1,
				y:1,
				offsetX: -footer.width - 10,
				offsetY: -footer.height -10
			}
			new FluidObject(footer,footerParam);
		}
	}
}

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:

package FluidLayout {

	import flash.events.Event;
	import flash.display.*;

	public class SimpleFluidObject extends FluidObject{

		public function SimpleFluidObject(target:DisplayObject,paramObj:Object)
		{
		}
	}
}

Step 21: Implementing the Constructor

package FluidLayout {

	import flash.events.Event;
	import flash.display.*;

	public class SimpleFluidObject extends FluidObject{

		public function SimpleFluidObject(target:DisplayObject,paramObj:Object)
		{
			/* Tell parent class to init the constructor */
			super(target,paramObj);

			/* assign alignment and margin value by the constructor parameters */
			var alignment = paramObj.alignment;
			var margin = paramObj.margin;

			/* Preset the alignment and margin value if need */
			if (alignment == undefined) alignment = "MIDDLE";
			if (margin == undefined) margin = 0;

			/* convert the alignment (eg. "TOP", "BOTTOM_RIGHT") to x, y, offsetX and offsetY */
			var params = new Object();
			switch (alignment){
				case "TOP_LEFT":
				params = {
					x:0,
					y:0,
					offsetX: margin,
					offsetY: margin
					};
				break;
				case "TOP":
				params = {
					x:.5,
					y:0,
					offsetX: -target.width/2,
					offsetY: margin
					};
				break;
				case "TOP_RIGHT":
				params = {
					x:1,
					y:0,
					offsetX: -target.width - margin,
					offsetY: margin
					};
				break;
				case "LEFT":
				params = {
					x:0,
					y:.5,
					offsetX: margin,
					offsetY: -target.height/2
					};
				break;
				case "MIDDLE":
				params = {
					x:.5,
					y:.5,
					offsetX: -target.width/2 - margin/2,
					offsetY: -target.height/2 - margin/2
					};
				break;
				case "RIGHT":
				params = {
					x:1,
					y:.5,
					offsetX: -target.width - margin,
					offsetY: -target.height/2
					};
				break;
				case "BOTTOM_LEFT":
				params = {
					x:0,
					y:1,
					offsetX: margin,
					offsetY: -target.height - margin
					};
				break;
				case "BOTTOM":
				params = {
					x:.5,
					y:1,
					offsetX: -target.width/2,
					offsetY: -target.height - margin
					};
				break;
				case "BOTTOM_RIGHT":
				params = {
					x:1,
					y:1,
					offsetX: -target.width - margin,
					offsetY: -target.height - margin
					};
				break;
			}
			_param = params;			

			/* reposition the fluid object to the right position */
			this.reposition();
		}
	}
}

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:

/* Apply the alignment to the title */
var titleParam = {
	x:0,
	y:0,
	offsetX:0,
	offsetY:0
}
new FluidObject(title,titleParam);

The New Method to apply alignment to Title:

var titleParam = {
	alignment: "TOP_LEFT",
	margin: 0
}
new SimpleFluidObject(title,titleParam);

Available alignments:

• TOP_LEFT, TOP, TOP_RIGHT
• LEFT, MIDDLE, RIGHT
• BOTTOM_LEFT, BOTTOM, BOTTOM_RIGHT

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.

	<style>
	body{
		margin:0;
		padding:0;
	}
	</style>

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.

	/* classes needed for Easing Animation */
	import fl.transitions.Tween;
	import fl.transitions.easing.*;

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

	_target.x=stageW*_param.x+_param.offsetX;
	_target.y=stageH*_param.y+_param.offsetY;

Replace them with the following code:

	/* set the duration of the easing animation (seconds) */
	var duration = 0.5;

	/* declare the new X/Y value */
	var newX = _target.x;
	var newY = _target.y;

	/* calculate the new X value based on the stage Width */
	if (_param.x != undefined){
		newX = (stageW * _param.x) + _param.offsetX;
	}

	/* calculate the new Y value based on the stage Height */
	if (_param.y != undefined){
		newY = (stageH * _param.y) + _param.offsetY;
	}

	/* Tell flash to tween the target object to the new X/Y position */
	new Tween(_target, "x",Strong.easeOut,_target.x,newX,duration,true);
	new Tween(_target, "y",Strong.easeOut,_target.y,newY,duration,true);

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

Conclusion

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!