Let's create a simple dynamic shape to illustrate the concepts of moveTo() and lineTo() methods. We are going to create four little squares and draw a big square going through the little squares, as we'll move the little squares, the big one will redraw itself.

First, let's create our four little squares:

`var arrayOfLittleSquare:Array = new Array();var Xpos:Number = 50;var Ypos:Number = 50;for(var i:uint = 0; i<4; i++){var littleSquare:Sprite = new Sprite();addChild(littleSquare);arrayOfLittleSquare.push(littleSquare);littleSquare.graphics.beginFill(0x000000);drawShape(littleSquare,10,10);littleSquare.graphics.endFill();littleSquare.x = Xpos;littleSquare.y = Ypos;Xpos+=100;if(Xpos>150){Xpos = 50;Ypos+=100;}}function drawShape(sprite:Sprite,Width:Number, Height:Number):void{sprite.graphics.moveTo(-Width/2,-Height/2);sprite.graphics.lineTo(Width/2,-Height/2);sprite.graphics.lineTo(Width/2,Height/2);sprite.graphics.lineTo(-Width/2,Height/2);sprite.graphics.lineTo(-Width/2,-Height/2);}`

I use arrayOfLittleSquare to store the little squares so I can reference them later on. I'll show the document class version at the end. Now let's draw the big square. We create a new Sprite, add it to the display list before the little squares so it'll be under them, then we create a function that will draw the square according to the little square positions:

`var arrayOfLittleSquare:Array = new Array();var Xpos:Number = 50;var Ypos:Number = 50;var square:Sprite = new Sprite();//new line addChild(square);//new line for(var i:uint = 0; i<4; i++){var littleSquare:Sprite = new Sprite();addChild(littleSquare);arrayOfLittleSquare.push(littleSquare);littleSquare.graphics.beginFill(0x000000);drawShape(littleSquare,10,10);littleSquare.graphics.endFill();littleSquare.x = Xpos;littleSquare.y = Ypos;Xpos+=100;if(Xpos>150){Xpos = 50;Ypos+=100;}}drawDynamicShape(square);//new line function drawShape(sprite:Sprite,Width:Number, Height:Number):void{sprite.graphics.moveTo(-Width/2,-Height/2);sprite.graphics.lineTo(Width/2,-Height/2);sprite.graphics.lineTo(Width/2,Height/2);sprite.graphics.lineTo(-Width/2,Height/2);sprite.graphics.lineTo(-Width/2,-Height/2);}function drawDynamicShape(sprite:Sprite):void{//new function sprite.graphics.clear();sprite.graphics.beginFill(0x0000FF);sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.endFill();}`

Notice the clear() method at the beginning of the new drawDynamicShape function. It erases anything that was drawn in the graphics object before. Not relevant so far but when the code will be complete we'll call this function many times and so we want the display to be refreshed and the old grapics to be cleared. Now if you compile this you'll see a big blue square with at each of its corner 4 little black squares. Now we need to be able to drag the little squares, so we add two MouseEvent listeners so we can startDrag our little square and stopDrag them as well, we add also the corresponding functions:

`var arrayOfLittleSquare:Array = new Array();var Xpos:Number = 50;var Ypos:Number = 50;var square:Sprite = new Sprite();addChild(square);for(var i:uint = 0; i<4; i++){var littleSquare:Sprite = new Sprite();addChild(littleSquare);arrayOfLittleSquare.push(littleSquare);littleSquare.graphics.beginFill(0x000000);drawShape(littleSquare,10,10);littleSquare.graphics.endFill();littleSquare.x = Xpos;littleSquare.y = Ypos;Xpos+=100;if(Xpos>150){Xpos = 50;Ypos+=100;}arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);//new line arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);//new line }drawDynamicShape(square) function dragSquares(e:MouseEvent):void{//new function e.target.startDrag();}function stopSquares(e:MouseEvent):void{//new function e.target.stopDrag();}function drawShape(sprite:Sprite,Width:Number, Height:Number):void{sprite.graphics.moveTo(-Width/2,-Height/2);sprite.graphics.lineTo(Width/2,-Height/2);sprite.graphics.lineTo(Width/2,Height/2);sprite.graphics.lineTo(-Width/2,Height/2);sprite.graphics.lineTo(-Width/2,-Height/2);}function drawDynamicShape(sprite:Sprite):void{sprite.graphics.clear();sprite.graphics.beginFill(0x0000FF);sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.endFill();}`

So far so good, now we just need to add an enterframe event that calls our drawDynamicShape() and you are done. When the mouse is down we add the enterFrame event, when the mouse is up we remove it, easy!

`var arrayOfLittleSquare:Array = new Array();var Xpos:Number = 50;var Ypos:Number = 50;var square:Sprite = new Sprite();addChild(square);for(var i:uint = 0; i<4; i++){var littleSquare:Sprite = new Sprite();addChild(littleSquare);arrayOfLittleSquare.push(littleSquare);littleSquare.graphics.beginFill(0x000000);drawShape(littleSquare,10,10);littleSquare.graphics.endFill();littleSquare.x = Xpos;littleSquare.y = Ypos;Xpos+=100;if(Xpos>150){Xpos = 50;Ypos+=100;}arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);} drawDynamicShape(square);function dragSquares(e:MouseEvent):void{e.target.startDrag();e.target.addEventListener(Event.ENTER_FRAME, redrawShape);//new line }function stopSquares(e:MouseEvent):void{e.target.stopDrag();e.target.removeEventListener(Event.ENTER_FRAME, redrawShape);//new line }function drawShape(sprite:Sprite,Width:Number, Height:Number):void{sprite.graphics.moveTo(-Width/2,-Height/2);sprite.graphics.lineTo(Width/2,-Height/2);sprite.graphics.lineTo(Width/2,Height/2);sprite.graphics.lineTo(-Width/2,Height/2);sprite.graphics.lineTo(-Width/2,-Height/2);}function redrawShape(e:Event):void{//new function that we use to call the drawDynamicShape function drawDynamicShape(square);}function drawDynamicShape(sprite:Sprite):void{sprite.graphics.clear();sprite.graphics.beginFill(0x0000FF);sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.endFill();}`

Now if you run this example you should see this:

And here is the document Class version:

`package{ import flash.display.Sprite;import flash.events.MouseEvent;import flash.events.Event; public class simple_lineTo_dynamic_shape extends Sprite{ var arrayOfLittleSquare:Array = new Array();var Xpos:Number = 50;var Ypos:Number = 50;var square:Sprite = new Sprite(); public function simple_lineTo_dynamic_shape(){ addChild(square);for(var i:uint = 0; i<4; i++){var littleSquare:Sprite = new Sprite();addChild(littleSquare);arrayOfLittleSquare.push(littleSquare);littleSquare.graphics.beginFill(0x000000);drawShape(littleSquare,10,10);littleSquare.graphics.endFill();littleSquare.x = Xpos;littleSquare.y = Ypos;Xpos+=100;if(Xpos>150){Xpos = 50;Ypos+=100;}arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_DOWN, dragSquares);arrayOfLittleSquare[i].addEventListener(MouseEvent.MOUSE_UP, stopSquares);}drawDynamicShape(square)}function dragSquares(e:MouseEvent):void{e.target.startDrag();e.target.addEventListener(Event.ENTER_FRAME, redrawShape);}function stopSquares(e:MouseEvent):void{e.target.stopDrag();e.target.removeEventListener(Event.ENTER_FRAME, redrawShape);}function drawShape(sprite:Sprite,Width:Number, Height:Number):void{sprite.graphics.moveTo(-Width/2,-Height/2);sprite.graphics.lineTo(Width/2,-Height/2);sprite.graphics.lineTo(Width/2,Height/2);sprite.graphics.lineTo(-Width/2,Height/2);sprite.graphics.lineTo(-Width/2,-Height/2);}function redrawShape(e:Event):void{drawDynamicShape(square);}function drawDynamicShape(sprite:Sprite):void{sprite.graphics.clear();sprite.graphics.beginFill(0x0000FF);sprite.graphics.moveTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.lineTo(arrayOfLittleSquare[1].x,arrayOfLittleSquare[1].y);sprite.graphics.lineTo(arrayOfLittleSquare[3].x,arrayOfLittleSquare[3].y);sprite.graphics.lineTo(arrayOfLittleSquare[2].x,arrayOfLittleSquare[2].y);sprite.graphics.lineTo(arrayOfLittleSquare[0].x,arrayOfLittleSquare[0].y);sprite.graphics.endFill();}}}`

Have fun with this and you can always contact me via my website for any questions.