DesignProjectX

Title

Description

Body This code was an exercise in familiarizing myself with manipulating objects in the Display List. It involved taking the <a href="http://www.flashandmath.com/basic/dragdroptour/dd_tour1.html">Drag-and-Drop in Flash CS3 Tutorial</a> 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. <pre><code>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&lt;=rows; i++) { for (var j:uint=1; j&lt;=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 &lt;= rows; row++) { for (var col:uint = 1; col &lt;= 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 &lt; 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 &lt; 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 &gt; grid*cols) { return grid*cols; } if (inX &lt; grid) { return grid; } return grid*Math.round(inX/grid); } private function gridY(inY:Number):Number { if (inY &gt; grid*rows) { return grid*rows; } if (inY &lt; grid) { return grid; } return grid*Math.round(inY/grid); } } } </code></pre>

Section Tutorials Contact Journal About Home

Category Applications Design History Ideas Technology

Tags

Date