Dynamic Positioning Continued 51 comments

Following another post regarding using stage listeners to dynamically resize and position MovieClips in Flash, I was asked to upload and FLA as an example. The previous code can just be pasted into the actions panel and will run without any MovieClips needed, and was designed to show the StageListener function rather than showcase a particular dynamic layout.

Download: Fluid Flash Layout Example

Anyway, here is a slightly amended version of this simple technique which uses MovieClips, and produces a fluid layout based on percentages (much like the classic CSS three column layout).

Again, this can be easily modified to include more elements, margins etc. Note – if you want to add content to the Movieclips (for example A menu in the left column), simply make the resizable elements a background MovieClip inside each parent MovieClip.

For instance, our left column would then be resized by using:

leftCol.backGround.pos(x, y, w, h);

The content inside the leftCol MovieClip would then maintain its size as the background resizes. Easy.

// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";

// Variables (in pixels)
var headHeight:Number = 100;
var footHeight:Number = 50;

// Variables (in percent)
var leftColWidth:Number = 25;
var mainColWidth:Number = 60;
var rightColWidth:Number = 15;

// Prototype function to position MovieClips
MovieClip.prototype.pos = function (x, y, w, h)
{
	this._x = x;
	this._y = y;
	this._width = w;
	this._height = h;
};

// Out main function
function setStage ()
{
	var sw:Number = Stage.width;
	var sh:Number = Stage.height;
	// Calculate percentages based on Stage dimensions
	var Lw:Number = sw / 100 * leftColWidth;
	var Mw:Number = sw / 100 * mainColWidth;
	var Rw:Number = sw / 100 * rightColWidth;
	var Hp:Number = sh - (headHeight + footHeight);
	// Position / resize our MovieClips
	header.pos (0,0,sw,headHeight);
	leftCol.pos (0,headHeight,Lw,Hp);
	mainCol.pos (Lw,headHeight,Mw,Hp);
	rightCol.pos (Lw + Mw,headHeight,Rw,Hp);
	footer.pos (0,sh - footHeight,sw,footHeight);
}

// Add a listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);

// When the Stage dimensions change...
stageListener.onResize = setStage;

// Call our function to set it all up right!
setStage ();