ActionScript 3 Drag Drop Grid

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