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.

This code was an exercise in familiarizing myself with manipulating objects in the Display List. It involved taking the Drag-and-Drop in Flash CS3 Tutorial on dragging and dropping objects on a grid, and adding the ability to tween the movement of the objects from one grid point to another. It also provides a function to trace the default instance name, the name property, the child index and type of each display list object.

package {

	/*
	Based on ActionScript 3 Tutorials by Doug Ensley and Barbara Kaskosz.
	www.flashandmath.com

	Adapted as an ActionScript class by Stephen Bau.
	www.domain7.com
	*/

	import flash.display.DisplayObjectContainer;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.display.Shape;
	import flash.geom.Point;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.utils.Timer;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;

	[SWF(width="600", height="400", backgroundColor="0xFFFFFF", frameRate="30")]

	public class DragDropGrid extends Sprite {

		// Grid variables

		private var canvas:Sprite = new Sprite();
		private var canvasWidth:Number = 560;
		private var canvasHeight:Number = 360;
		private var grid:Number = 40;	 // Size of the grid and number of lattice points in each direction
		private var cols:Number = Math.ceil(canvasWidth/grid) - 1;
		private var rows:Number = Math.ceil(canvasHeight/grid) - 1;
		private var offset:Number = 20;

		// Object variables

		private var objects:Array = new Array();
		private var thisObject:Object;
		private var pointB:Point = new Point();

		public function DragDropGrid() {

			// Constructor

			setupGrid();
			addObjects();
			addListenersToObjects();
			traceObjects();
		}

		// Set up grid

		private function setupGrid() {

			canvas.graphics.beginFill(0xCCCCCC);
			canvas.graphics.drawRect(0,0,canvasWidth,canvasHeight);
			canvas.graphics.endFill();
			canvas.name = "canvas";
			this.addChild(canvas);

			// Add a bunch of circles to represent lattice points

			canvas.graphics.beginFill(0x000000);
			for (var i:uint=1; i<=rows; i++) {
				for (var j:uint=1; j<=cols; j++) {
					canvas.graphics.drawCircle(j*grid,i*grid,0.5);
				}
			}
			canvas.graphics.endFill();
			canvas.x = 20;
			canvas.y = 20;
		}

		// Add objects to grid

		private function addObjects() {
			for (var row:uint = 1; row <= rows; row++) {
				for (var col:uint = 1; col <= cols; col++) {
					var index:uint = ((row - 1) * cols) + col;
					objects[index] = new Sprite();
					createObject(objects[index], index);
					objects[index].x = col*grid + offset;
					objects[index].y = row*grid + offset;
				}
			}
		}

		// Add event listeners to all variables in the objects array

		private function addListenersToObjects():void {
			stage.addEventListener(MouseEvent.MOUSE_UP, stopAll);
			for (var x:uint = 1; x < objects.length; x++) {
				objects[x].addEventListener(MouseEvent.MOUSE_DOWN, startMoveObject);
			}
		}

		private function startMoveObject(e:MouseEvent):void {
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveObject);
			thisObject = e.target;
			e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
		}

		private function moveObject(e:MouseEvent):void {
			pointB.x = gridX(canvas.mouseX) + offset;
			pointB.y = gridY(canvas.mouseY) + offset;

			var objectMoveX:Tween;
			var objectMoveY:Tween;

			objectMoveX = new Tween(thisObject, "x", Strong.easeOut, thisObject.x, pointB.x, 0.5, true);
			objectMoveY = new Tween(thisObject, "y", Strong.easeOut, thisObject.y, pointB.y, 0.5, true);
		}

		private function stopAll(e:MouseEvent):void {
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveObject);
		}

		// Create rectangle

		private function createObject(
				obj:Sprite,
				objIndex:uint,
				objWidth:Number = 28,
				objHeight:Number = 28,
				frameBorder:Number = 3
				):void {
			obj.graphics.beginFill(0x999999);
			obj.graphics.drawRect(-objWidth/2, -objHeight/2, objWidth, objHeight);
			obj.graphics.endFill();
			obj.name += " object-" + objIndex;
			addChild(obj);

			var frame:Sprite = new Sprite();
			var frameWidth:Number = objWidth + (2 * frameBorder);
			var frameHeight:Number = objHeight + (2 * frameBorder);

			frame.graphics.beginFill(0xFFFFFF);
			frame.graphics.drawRect(-frameWidth/2, -frameHeight/2, frameWidth, frameHeight);
			frame.graphics.drawRect(-objWidth/2, -objHeight/2, objWidth, objHeight);
			frame.graphics.endFill();
			frame.name += " frame-" + objIndex;
			obj.addChild(frame);

			var txtFld:TextField = new TextField();
			txtFld.text = String(objIndex);
			txtFld.name += " textfield-" + objIndex;
			// obj.addChild(txtFld);
		}

		// Trace Display List

		private function traceObjects():void {
			trace("Stage: Number of Children: " + stage.numChildren);
			trace("Object Description: " + stage.getChildAt(0).toString()); // DragDropShift
			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 + "    ")
				}
			}
		}

		// Helper functions to stay within boundary AND snap to grid

		private function gridX(inX:Number):Number {
			if (inX > grid*cols) {
				return grid*cols;
			}

			if (inX < grid) {
				return grid;
			}

			return grid*Math.round(inX/grid);
		}

		private function gridY(inY:Number):Number {
			if (inY > grid*rows) {
				return grid*rows;
			}

			if (inY < grid) {
				return grid;
			}

			return grid*Math.round(inY/grid);
		}
	}
}

Looking through the documentation for applying alpha transparency and rotation to a text field, I realized I need to learn something about embedding fonts. Searching for a solution led me to a solution: Making Alpha Work on AS3 Dynamic Text Fields.

This doesn’t work:

package {

	import flash.display.Sprite;
	import flash.text.TextField;

	public class TextAlpha extends Sprite {

		private var textFld:TextField = new TextField();

		public function TextAlpha() {
			textFld.text = "This is a text field";
			textFld.alpha = .2;
			addChild(textFld);
		}
	}
}

So, what to do? The Adobe Developer Connection resource may be the best place to start:

• Flash Quick Start: Embedding Fonts

But how can this be accomplished without Flash, using the Flex 3 SDK?

• The Unbearable Strangeness of Embedding Fonts
• Fading and masking with device fonts
• Making Alpha Work on AS3 Dynamic Text Fields
• Loading Fonts Dynamically in Actionscript 2 and 3
• Embedding Fonts in Flash CS3 the Good Way
• Sharing Fonts in ActionScript 3.0 – Part 1: Creating a Font SWF
• Flash AS3 Loading Fonts
• Runtime font loading with AS3 / Flash CS3 (not Flex!)

I was never able to successfully use the [Embed] metatag to compile a SWF file for embedding and loading fonts. I created a SWF with an embedded font in Flash CS3, then I created the following class to load the embedded font and display and transform the text using the loaded font. If no font is found, the error handing event displays the text in Arial with no transformation.

package {

	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;

	public class EnumerateFonts extends Sprite {

		private var t:TextField = new TextField();
		private var f:TextFormat = new TextFormat();
		private var font:Font;
		private var fontFile:String = "Helvetica.swf";

		public function EnumerateFonts() {

			// trace loaded fonts
			var fonts:Array = Font.enumerateFonts();

			// to list all available fonts, use the following instead:
			// var fonts:Array = Font.enumerateFonts(true);

			if (fonts.length == 0) {
				t.text="No fonts are loaded";
			} else {
				for (var x:uint=0; x<fonts.length; x++) {

					font = fonts[x];
					trace("fontName : " + font.fontName);
					trace("fontStyle : " + font.fontStyle);
					trace("fontType : " + font.fontType);
				}
			}

			//load font
			var loader:Loader = new Loader();

			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);

			loader.load(new URLRequest(fontFile));
		}

 	 	private function ioErrorHandler(event:IOErrorEvent):void {
 	 	 	trace("No fonts loaded: " + event);
			fontNotLoaded();
 	 	 }

		private function onLoaded(event:Event):void {

			// trace loaded swf and fonts
			trace("SWF loaded: " + fontFile);
			var fonts:Array = Font.enumerateFonts();
			for (var x:uint = 0; x < fonts.length; x++) {

				font = fonts[x];
				trace("fontName : " + font.fontName);
				trace("fontStyle : " + font.fontStyle);
				trace("fontType : " + font.fontType);

			}
			fontLoaded();
		}

		private function addTextField() {
			// default text field properties
			t.defaultTextFormat = f;
			t.x = 40;
			t.y = 40;
			t.background = true;
			t.autoSize = TextFieldAutoSize.LEFT;
			addChild(t);
		}

		private function fontLoaded() {
			// Text format
			f.font = font.fontName; // "HelveticaNeueLT Std Lt"
			f.size = 48;

			// Text field
			addTextField();
			t.text = "The font is loaded:\n";
			t.text += font.fontName;
			t.embedFonts = true;
			t.alpha = .5;
			t.rotation = 10;
		}

		private function fontNotLoaded() {
			// Text format
			f.font = "Arial";
			f.size = 24;

			// Text field
			addTextField();
 	 	 	t.text = "No fonts loaded" + "\n";
			t.text += "Default font: Arial";
		}
	}
}

I wanted to figure out how to build a Cartesian coordinate grid system that would dynamically center and scale when the stage was resized. Here’s what I came up with:

package {

	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.utils.Timer;

	[SWF(width="630", height="415", backgroundColor="#000000", frameRate="30")]

	public class FluidGrid extends Sprite {

		// Instantiate stage variables
		public var sw:Number = stage.stageWidth;
		public var sh:Number = stage.stageHeight;

		// Draw grid lines
		public var grid:Sprite = new Sprite();
		public var horzLines:Sprite = new Sprite();
		public var vertLines:Sprite = new Sprite();
		public var gridLines:Array = new Array();
		public var spacing:Number = 24;
		public var lineColor:int = 0x333333;
		public var lineWeight:Number = 1;
		public var lineAlpha:Number = 0.5;
		public var lineHinting:Boolean = true;
		public var lineScale:String = "none";

		// Draw x-axis and y-axis
		public var xAxis:Sprite = new Sprite();
		public var yAxis:Sprite = new Sprite();
		public var xAxisColor:int = 0xeeeeee;
		public var yAxisColor:int = 0xeeeeee;

		public var hLine:Shape = new Shape();
		public var vLine:Shape = new Shape();

		public var numVertLines:int = Math.floor(sw/spacing);
		public var numHorzLines:int = Math.floor(sh/spacing);
		public var xOffset:Number = (Math.ceil(numHorzLines/2) * spacing) - (sw/2);
		public var yOffset:Number = (Math.ceil(numVertLines/2) * spacing) - (sh/2); 

		// Reusable array index variable
		private var i:int;

		public function FluidGrid() {
			// Turn scaling off and set alignment to top left
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			// Draw grid lines
			drawGridLines();
			addChild(grid);
			grid.addChild(horzLines);
			grid.addChild(vertLines);

			// Draw x- and y-axes and add to display list
			drawAxes();

			// Add event listener to redraw grid on stage resize
			stage.addEventListener(Event.RESIZE, resizeListener);

			// Add debug data to display list
			var debug:DebugData = new DebugData(stage);
			debug.alpha = 0.2;
			addChild(debug);
		}

		private function resizeListener(e:Event):void {
			// Stage size at resize
			sh = stage.stageHeight;
			sw = stage.stageWidth;

			resizeAxes();
			redrawGridLines();
		}

		private function resizeAxes():void {
			// Scale x-axis and y-axis at stage resize
			yAxis.height = sh;
			yAxis.x = sw/2;
			xAxis.width = sw;
			xAxis.y = sh/2;
		}

		private function redrawGridLines():void {
			// Determine number of lines to draw
			numHorzLines = Math.floor(sh/spacing);
			numVertLines = Math.floor(sw/spacing);

			// Determine horizontal and vertical offsets
			xOffset = (sw/2) - (Math.ceil(numVertLines/2) * spacing);
			yOffset = (sh/2) - (Math.ceil(numHorzLines/2) * spacing); 

			// Resize horizontal lines
			for (i = 0; i < horzLines.numChildren; i++) {
				horzLines.getChildAt(i).width = sw;
				horzLines.getChildAt(i).y = i * spacing + yOffset;
			}

			// Resize vertical lines
			for (i = 0; i < vertLines.numChildren; i++) {
				vertLines.getChildAt(i).height = sh;
				vertLines.getChildAt(i).x = i * spacing + xOffset;
			}

			// If number of existing lines is less than lines required to fill screen
			if (numHorzLines > horzLines.numChildren) {
				// Draw additional horizontal lines
				for (i = horzLines.numChildren - 1; i <= numHorzLines; i++) {
					gridLines[i] = new Shape();
					gridLines[i].name = "hLine" + i;
					drawHorzLine(gridLines[i]);
					gridLines[i].y = (i + 1) * spacing + yOffset;
				}
			}

			// If number of existing lines is less than lines required to fill screen
			if (numVertLines > vertLines.numChildren) {
				// Draw additional vertical lines
				for (i = vertLines.numChildren - 1; i <= numVertLines; i++) {
					gridLines[i] = new Shape();
					gridLines[i].name = "vLine" + i;
					drawVertLine(gridLines[i]);
					gridLines[i].x = (i + 1) * spacing + xOffset;
				}
			}
		}

		private function drawAxes():void {
			// Draw lines at center stage
			var yg:Graphics = yAxis.graphics;
			var xg:Graphics = xAxis.graphics;

			yg.lineStyle(lineWeight, yAxisColor, lineAlpha, lineHinting, lineScale);
			yg.moveTo(0,0);
			yg.lineTo(0,sh);
			yAxis.x = sw/2;

			xg.lineStyle(lineWeight, xAxisColor, lineAlpha, lineHinting, lineScale);
			xg.moveTo(0,0);
			xg.lineTo(sw,0);
			xAxis.y = sh/2;

			addChild(yAxis);
			addChild(xAxis);
		}

		private function drawHorzLine(horzLine:Shape):void {
			var hl:Graphics = horzLine.graphics;
			hl.lineStyle(lineWeight, lineColor, lineAlpha, lineHinting, lineScale);
			hl.moveTo(0,0);
			hl.lineTo(sw,0);
			horzLines.addChild(horzLine);
		}

		private function drawVertLine(vertLine:Shape):void {
			var vl:Graphics = vertLine.graphics;
			vl.lineStyle(lineWeight, lineColor, lineAlpha, lineHinting, lineScale);
			vl.moveTo(0,0);
			vl.lineTo(0,sh);
			vertLines.addChild(vertLine);
		}

		private function drawGridLines():void {
			// Set grid spacing and line style
			numHorzLines = Math.floor(sh/spacing);
			numVertLines = Math.floor(sw/spacing);

			xOffset = (sw/2) - (Math.ceil(numVertLines/2) * spacing);
			yOffset = (sh/2) - (Math.ceil(numHorzLines/2) * spacing); 

			// Draw horizontal lines
			for (i = 0; i <= numHorzLines; i++) {
				gridLines[i] = new Shape();
				gridLines[i].name = "hLine" + i;
				drawHorzLine(gridLines[i]);
				gridLines[i].y = i * spacing + yOffset;
			}

			// Draw vertical lines
			for (i = 0; i <= numVertLines; i++) {
				gridLines[i] = new Shape();
				gridLines[i].name = "vLine" + i;
				drawVertLine(gridLines[i]);
				gridLines[i].x = i * spacing + xOffset;
			}
		}
	}
}

I wanted to have a way of tracking object attributes in real time within the Flash movie. As a test case, I wanted to track the position of the mouse using a dynamic text box. Here is the result:

Edit: This has been updated to include stage dimensions and to update on stage resize.

package {

	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.utils.Timer;

	[SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")]

	public class DebugData extends Sprite {

		// Instantiate stage variables
		public var sw:Number = stage.stageWidth;
		public var sh:Number = stage.stageHeight;

		// Instantiate text field variables
		public var txtFld_mouseX:TextField = new TextField();
		public var txtFld_mouseY:TextField = new TextField();
		public var txtFld_stageW:TextField = new TextField();
		public var txtFld_stageH:TextField = new TextField();

		// Instantiate text string variables
		public var txtStr_mouseX:String;
		public var txtStr_mouseY:String;
		public var txtStr_stageW:String;
		public var txtStr_stageH:String;

		public function DebugData() {
			// Turn scaling off and set alignment to top left
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			// Create text fields
			createTextField(txtFld_mouseX, "Mouse X: ");
			createTextField(txtFld_mouseY, "Mouse Y: ", 20, 50);
			createTextField(txtFld_stageW, "Stage Width: ", 20, 80);
			createTextField(txtFld_stageH, "Stage Height: ", 20, 110);

			// Add text fields to display list
			addChild(txtFld_mouseX);
			addChild(txtFld_mouseY);
			addChild(txtFld_stageW);
			addChild(txtFld_stageH);

			// Add an event listener to update debug text
			debug();
		}

		private function createTextField(txtFld:TextField, txtStr:String, txtFldX:int = 20, txtFldY:int = 20):void {
			var txtFmt:TextFormat = new TextFormat();

			// Format text
			txtFmt.font = "Helvetica";
			txtFmt.color = 0x333333;
			txtFmt.size = 14;
			txtFmt.leading = 6;
			txtFmt.leftMargin = txtFmt.rightMargin = 4;

			// Text field properties
			txtFld.x = txtFldX
			txtFld.y = txtFldY;
			txtFld.width = 200;
			txtFld.height = 20;
			txtFld.border = txtFld.background = true;
			txtFld.borderColor = 0xCCCCCC;
			txtFld.background = true;
			txtFld.backgroundColor = 0xEEEEEE;
			txtFld.defaultTextFormat = txtFmt;
			txtFld.text = txtStr;
		}

		private function debug():void {
			var timer:Timer = new Timer(1000/30);
			timer.addEventListener(TimerEvent.TIMER, traceOutput);
			timer.start();
		}

		private function traceOutput(e:TimerEvent):void {
			// Debug text
			txtStr_mouseX = "Mouse X: " + mouseX;
			txtStr_mouseY = "Mouse Y: " + mouseY;
			txtStr_stageW = "Stage Width: " + stage.stageWidth;
			txtStr_stageH = "Stage Height: " + stage.stageHeight;

			// Update text fields with debug text
			txtFld_mouseX.text = txtStr_mouseX;
			txtFld_mouseY.text = txtStr_mouseY;
			txtFld_stageW.text = txtStr_stageW;
			txtFld_stageH.text = txtStr_stageH;
		}
	}
}

In an effort to duplicate the behaviour of this Flash5 example in ActionScript 3.0, I came up with the following, adapted for use with slightly different objects to simulate the rotation of a bike pedal:

package {

	import flash.display.*;
	import flash.events.*;
	import flash.utils.Timer;

	public class DragRotatePedal extends Sprite {

		// Main document class

		public var angle:Number;
		public var timer:Timer;

		public function DragRotatePedal() {
			// add event listeners
			crank.pedal.addEventListener(MouseEvent.MOUSE_DOWN, rotatePedal);

			// trace mouse position every second
			// debug();
		}

		function rotatePedal(e:MouseEvent):void {
			// trace("Mouse DOWN on pedal");

			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

			function onMouseMove(e:MouseEvent):void {

				// get an angle to the mouse using atan2 (gets radians)
				angle = Math.atan2(mouseY - crank.y, mouseX - crank.x);

				// apply rotation to crank shaft by converting angle into degrees
				crank.rotation = angle * 180 / Math.PI;

				// rotate the pedal opposite to the crank shaft so it won't rotate along with it
				crank.pedal.rotation = -crank.rotation;
			}

			function onMouseUp(e:MouseEvent):void {
				//	trace("Mouse UP on pedal");
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			}
		}

		function debug():void {
			timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, traceOutput);
			timer.start();
		}

		function traceOutput(e:TimerEvent):void {
			trace("mouseX: " + mouseX);
			trace("mouseY: " + mouseY);
		}
	}
}

In researching the ability to make use of 3D ActionScript libraries with the Flex 3 SDK, I came across an AS3Dmod tutorial created by Bartek Drozdz of Everyday Flash that uses the PaperVision3D library.

A list of the most popular 3D Flash engines include:

• Papervision3D
• Away3d
• Sandy3d
• Alternativa3d
• FIVe3D

AS3Dmod, a cross-engine 3d modifier library for Flash, was developed by Bartek Drozdz as a way to interact with several 3D Flash engines.

Another site that had a lot of examples of Papervision3D: reyco1.com

The Adobe Flex 3 documentation describes Flex SDK Configuration, and more specifically how to configure the source path and library path for the mxmlc Flex Ant task used to compile Flash application files. I don’t have Flex Builder, but I do have Flash CS3, so I can compile SWF files within the Flash IDE. However, I wanted to be able to build open source ActionScript without the requirement of a commercial product to compile Flash files, especially since I jump between Mac OS X and Windows XP as I am learning more. (Agus Santoso has blogged about Flex 3 sdk command line development with example on Linux.)

I have the Flex 3 SDK installed at the root of my user directory in Mac OS X:

~/flex

The structure of my documents looks like this:

~/flex/classes
~/flex/data

If I try to compile an ActionScript file that imports classes that I have in the classes directory, I will receive the following error, indicating that the classes are not being found.

Error: A file found in a source-path 'AS3DModTutorial' must have the same name as the class definition inside the file 'AS3DmodTutorial'.

The configuration file for the mxmlc Flex Ant task is stored here:

~/flex/frameworks/flex-config.xml

To configure the classpath, uncomment the following text:

<flex-config>
   <compiler>
      ...
      <!-- List of path elements that form the roots of ActionScript class hierarchies. -->
      <!-- not set -->
      <!--
      <source-path>
         <path-element>string</path-element>
      </source-path>
      -->
      ...
   </compiler>
</flex-config>

Change the XML to:

      <source-path>
         <path-element>/Users/stephen/flex/classes</path-element>
      </source-path>

Using MXMLC (the MXML and ActionScript 3 stand alone, command line compiler provided with the free Flex 3 SDK) to compile your ActionScript 3 SWFs, you can use the SWF metadata tag to set common properties in the main document class for the application. The SWF metadata tag supports 4 properties

• width
• height
• frameRate
• backgroundColor

package {
    [SWF(width="800", height="600", frameRate="60", backgroundColor="#FFFFFF")]
    public class Main extends Sprite {

    }
}

There are a number of print and online resources for Object-Oriented Programming with ActionScript using the Model-View-Controller (MVC) design pattern. A book has been written on the topic of ActionScript 3.0 Design Patterns with an accompanying article on the Adobe Developer Connection site. Two chapters are available as free downloads from the Adobe article:

• Chapter 2: Factory method pattern (PDF)
• Chapter 12: Model-View-Controller pattern (PDF)

The O’Reilly site offers code examples from the book for download.

Also of interest are a number of MVC frameworks available for implementing ActionScript applications:

• Cairngorm microarchitecture for Flex and AIR
• flashMVC
• JumpShip Framework for ActionScript, Flex, and Flash
• Mate
• Prana Framework
• PureMVC ActionScript 3 Implementation
• Soma (AS3 MVC ActionScript Framework)
• Swiz
  

Colin Moock has written a chapter explaining the MVC concept in his book, Essential ActionScript 2.0, and offers a free download of the chapter.

• Chapter 18, Essential ActionScript 2.0 (PDF)

InsideRIA has a series that compares the differences between the most popular frameworks:

• FrameworkQuest 2008: Introduction
• FrameworkQuest 2008 Part 2: Get Control with Cairngorm
• FrameworkQuest 2008 Part 3: Framework Agnostic Views with PureMVC
• FrameworkQuest 2008 Part 4: IoC With Swiz
• FrameworkQuest 2008 Part 5: Mate, the Pure MXML Framework
• FrameworkQuest 2008 Part 6: The Exciting Conclusion

Other articles written on the subject:

• Minimalist MVC example using the PureMVC Framework