Dynamic Positioning

Image may be NSFW.
Clik here to view.

Since fullscreen flash websites have become so popular; this little trick (a necessity really) has been used to make sure that no matter what screen resolution a user has, they can experience the site in the way in which the designer intended.

I realise that listeners are common knowledge, but I have had a lot of emails asking about dynamic positioning so I have written this brief tutorial on how to get all the elements in your Flash movie to position themselves automatically when the user’s browser window resizes, or if they are using a different screen resolution to you and you hate the idea of letting the movie scale!

The principal is simple, like in CSS with fluid layouts, you effectivelly position everything relitively, and write some simple formulas for maintaining their relitivity no matter what size stage they are on.

You can also apply this to the height and width of, for example, the background of a banner, so that your pixel font still looks crisp and nicely aligned as the bar behind is stretching to fit the window. The permutations are endless, and evidently, this is a really useful and basic tool to have when putting together a Flash site. I have even used it for CD Business Card presentations, to make sure text areas and graphics sit nicely in harmony with each other, even if it found its way into the grubbly hands of an 800 x 600 user.

Anyway, the code – Just paste this into the Actionscript panel, render and enjoy. Drag the movie’s resize handles around for some orgasmic repositioning pleasure:

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

// Create some dummy boxes
// This is only for the demonstration

var margin:Number = 10;
var boxSize:Number = 100;

var boxes = [
		["top", "0x9933cc"],
		["right", "0x00ff00"],
		["bottom", "0xff0000"],
		["left", "0x0099ff"],
		["center", "0xff3399"]];

for (var i = 0; i < boxes.length; i++)
{
	var newBox:MovieClip = createEmptyMovieClip (boxes[i][0], getNextHighestDepth ());

	var nameBadge = newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);
	nameBadge.autoSize = "center";
	nameBadge.text = boxes[i][0];
	nameBadge.textColor = 0xffffff;

	with (newBox)
	{
		beginFill (boxes[i][1],100);
		moveTo (0,0);
		lineTo (boxSize,0);
		lineTo (boxSize,boxSize);
		lineTo (0,boxSize);
		lineTo (0,0);
		endFill ();
	}
}

/*
	The core function...
	I keep this separate from the 'onResize'
	handler so that I can call it at the start
	to position all of my elements if the screen
	size has remained the same
*/

function setStage ()
{
	var sw:Number = Stage.width;
	var sh:Number = Stage.height;
/*
Rule for Top / Center alignment
*/
	top._x = sw / 2 - top._width / 2;
	top._y = margin;
/*
Rule for Right / Middle alignment
*/
	right._x = sw - (right._width + margin);
	right._y = sh / 2 - right._height / 2;
/*
Rule for Bottom / Center alignment
*/
	bottom._x = sw / 2 - bottom._width / 2;
	bottom._y = sh - (bottom._height + margin);
/*
Rule for Left / Middle alignment
*/
	left._x = margin;
	left._y = sh / 2 - left._height / 2;
/*
Rule for Center / Middle alignment
*/
	center._x = sw / 2 - center._width / 2;
	center._y = sh / 2 - center._height / 2;
}

// 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 ();

Have fun!

Related posts:

1. Dynamic Positioning Continued
2. Dynamic Stacking
3. Fit DisplayObject into Rectangle