# Help W/ Drag & Drop MC & Connected Lines

**URL:** https://forum.kirupa.com/t/help-w-drag-drop-mc-connected-lines/274828
**Category:** flash
**Created:** [November 5, 2008, 2:08pm UTC](https://forum.kirupa.com/t/help-w-drag-drop-mc-connected-lines/274828 "2008-11-05T14:08:55Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![gphilly77](https://avatars.discourse-cdn.com/v4/letter/g/5e9695/32.png) [@gphilly77](https://forum.kirupa.com/u/gphilly77)
#### Post date: [November 5, 2008, 2:08pm UTC](https://forum.kirupa.com/t/help-w-drag-drop-mc-connected-lines/274828/1 "2008-11-05T14:08:55Z")

</div>

I have the following code that creates a starting point onclick and then subsequent points onclick. Basically, like how the pen tool in Photoshop works or how Google Earth provides the ability to select the Tools \> Ruler and draw a point to point path on the map.

Here is an example of how the code currently works:  
[[COLOR=#336699]http://www.mapyourhike.com/Test/PenTool.html[/COLOR]](http://www.mapyourhike.com/Test/PenTool.html)

Here is the code:

[FONT=Courier New]  
var routeContainer:Sprite;  
var pointContainer:Sprite;  
var mcObjectArray:Array = new Array();  
var pointSpriteNameCounter:Number;  
var fillColor:uint;  
var colorTransform:ColorTransform;  
var pointColor:uint;  
var isRouteStart:Boolean;

setDrawingMode();

function setDrawingMode():void  
{  
pointSpriteNameCounter = 0;

routeContainer = new Sprite();  
routeContainer.graphics.beginFill(0xCCCCCC,1);  
routeContainer.graphics.drawRect(0,0,400,400);  
routeContainer.graphics.endFill();  
addChild(routeContainer);

pointContainer = new Sprite();  
addChild(pointContainer);

routeContainer.addEventListener(MouseEvent.MOUSE\_D OWN, addPoint);  
}

function createStartPoint():Sprite  
{  
var pointMC:MovieClip = new MovieClip();  
fillColor = 0x2ee03e;  
pointMC.graphics.lineStyle(1,0x000000,1,true,LineS caleMode.VERTICAL,CapsStyle.ROUND,JointStyle.ROUND ,2);  
pointMC.graphics.beginFill(fillColor,1);  
pointMC.graphics.drawCircle(0,0,10);  
pointMC.x = mouseX;  
pointMC.y = mouseY;  
mcObjectArray.push(pointMC);

pointMC.addEventListener(MouseEvent.MOUSE\_DOWN,sta rtDragListener);  
pointMC.addEventListener(MouseEvent.MOUSE\_UP,endDr agListener);  
return pointMC;  
}

function createEndPoint():Sprite  
{  
var pointMC:MovieClip = new MovieClip();  
fillColor = 0xe82626;  
pointMC.graphics.lineStyle(1,0x000000,1,true,LineS caleMode.VERTICAL,CapsStyle.ROUND,JointStyle.ROUND ,2);  
pointMC.graphics.beginFill(fillColor,1);  
pointMC.graphics.drawCircle(0,0,10);  
pointMC.x = mouseX;  
pointMC.y = mouseY;  
mcObjectArray.push(pointMC);

pointMC.addEventListener(MouseEvent.MOUSE\_DOWN,sta rtDragListener);  
pointMC.addEventListener(MouseEvent.MOUSE\_UP,endDr agListener);

return pointMC;  
}

function addPoint(e:MouseEvent):void  
{  
pointColor = 0x000000;

pointSpriteNameCounter +=1;

if(pointSpriteNameCounter==1)  
{  
isRouteStart = true;  
addChild(createStartPoint());  
}  
else  
{  
isRouteStart = false;  
addChild(createEndPoint());  
}

if(mcObjectArray.length \> 1)  
{  
routeContainer.graphics.lineStyle(2,0x000000,1,tru e);  
routeContainer.graphics.moveTo(mcObjectArray[mcObjectArray.length-1].x, mcObjectArray[mcObjectArray.length-1].y);  
routeContainer.graphics.lineTo(mcObjectArray[mcObjectArray.length-2].x, mcObjectArray[mcObjectArray.length-2].y);

if(pointSpriteNameCounter\>2)  
{  
//recolor the points b/w start and end points  
colorTransform = mcObjectArray[mcObjectArray.length-2].transform.colorTransform;  
colorTransform.color = pointColor;  
mcObjectArray[mcObjectArray.length-2].transform.colorTransform = colorTransform;  
mcObjectArray[mcObjectArray.length-2].scaleX = .15;  
mcObjectArray[mcObjectArray.length-2].scaleY = .20;  
}  
}  
}

function startDragListener(e:MouseEvent):void  
{  
e.currentTarget.startDrag();  
}

function endDragListener(e:MouseEvent):void  
{  
e.currentTarget.stopDrag();  
}

[/FONT]  
The requirements of how I want the tool to work are below:

1. Provide ability to select a point on the path and drag and drop it and the line(s) connected to it follow it.

2. Provide ability to right click a point on the path and get a menu w/ an option to delete the point. Deleting the point would remove any lines connected to it.

Thanks alot for the input and help!