ActionScript 3 Dynamic Positioning

I came across this wonderful resource of amazing ActionScript examples from Justin Windle at Soulwire. He had an example of dynamic positioning to achieve a full screen Flash layout. Unfortunately, it was ActionScript 2.0 and I am busy learning ActionScript 3.0. So, I’ve been practicing my skills by migrating Justin’s code to AS3. Here’s what I came up with:

package {

	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;

	public class AS3DynamicPositioning extends Sprite {

		private static const MARGIN:Number = 10;
		private static const BOX_SIZE:Number = 100;

		public function AS3DynamicPositioning() {

			// Setup the Stage properties
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

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

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

			for (var i:uint = 0; i < boxes.length; i++) {
				var newBox:Sprite;
				var boxColor:Number = boxes[i][1];

				var nameBadge:TextField = new TextField();
				var txtFmt:TextFormat = new TextFormat();
				var boxName:String = boxes[i][0];

				// newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);

				txtFmt.align = TextFormatAlign.LEFT;
				txtFmt.color = 0xffffff;
				txtFmt.size = 16;
				txtFmt.font = "Arial";

				nameBadge.autoSize = TextFieldAutoSize.CENTER;
				nameBadge.width = BOX_SIZE;
				nameBadge.height = 24;
				nameBadge.x = BOX_SIZE / 2;
				nameBadge.y = BOX_SIZE / 2 - 12;
				nameBadge.defaultTextFormat = txtFmt;
				nameBadge.text = boxName;

				newBox = drawBox(BOX_SIZE, BOX_SIZE, boxColor);
				newBox.name = boxName;

				addChild(newBox);
				newBox.addChild(nameBadge);

			}

			setStage();
			traceObjects();

			function drawBox(width:Number, height:Number, color:Number):Sprite {
				// Call our function to set it all up right!
				var box:Sprite = new Sprite();
				box.graphics.beginFill(color);
				box.graphics.drawRect(0, 0, width, height);
				box.graphics.endFill();

				return box;
			}

			// Add an event listener
			stage.addEventListener(Event.RESIZE, stageListener);

			// When the Stage dimensions change...
			function stageListener(e:Event):void {
				// Call our function to reset stage positions
				setStage();
			}

			function setStage():void {
				var sw:Number = stage.stageWidth;
				var sh:Number = stage.stageHeight;

				var top:Sprite = Sprite(getChildByName("top"));
				var right:Sprite = Sprite(getChildByName("right"));
				var bottom:Sprite = Sprite(getChildByName("bottom"));
				var left:Sprite = Sprite(getChildByName("left"));
				var center:Sprite = Sprite(getChildByName("center"));

				// 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;
			}
		}

		private function traceObjects():void {
			trace("Stage: Number of Children: " + stage.numChildren);
			trace("Object Description: " + stage.getChildAt(0).toString());
			traceDisplayList(stage);
		}

		private function traceDisplayList(container:DisplayObjectContainer, indentString:String = ""):void
		{
			var child:DisplayObject;
			for (var i:uint=0; i < container.numChildren; i++)
			{
				child = container.getChildAt(i);
				trace(indentString, child, child.name, "(depth: " + child.parent.getChildIndex(child) + ")");
				if (container.getChildAt(i) is DisplayObjectContainer)
				{
					traceDisplayList(DisplayObjectContainer(child), indentString + "    ")
				}
			}
		}
	}
}

It also includes a couple extra functions to trace display objects. I was trying to figure out why I couldn’t access children of the stage by name. I was getting this error:

Implicit coercion of a value with static type flash.display:DisplayObject to a possibly unrelated type flash.display:Sprite.