Question

I am trying to create to movable instances, that are draggable, and which have a line connecting them which updates automatically.

The thing is: The original line just goes randomly and doesn’t update as the instances (mc1, mc2) are being dragged.
Here is the code I have got so far:

 mc1.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
{
    e.currentTarget.startDrag();
});

mc1.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
{
    e.currentTarget.stopDrag();
});
mc2.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
{
    e.currentTarget.startDrag();
});

mc2.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
{
    e.currentTarget.stopDrag();
});

var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x000000);
mc.graphics.lineStyle(2,0x000000);

//start drawing the line
mc.graphics.moveTo(mc1.x,mc1.y);
mc.graphics.lineTo(mc2.x,mc2.y);
mc.graphics.endFill();

//Position your new movie clip
addChild(mc);

Can anyone tell me where have I got it wrong?

Thanks a lot of any help !!!!

Answer 1

What you need to do is capture the movement of the users mouse as (s)he is dragging the MovieClip.

First create a isDragging variable var isDragging:Boolean = false; and set this to true when mouse down and false when mouse up.

Then add a MouseEvent.MOUSE_MOVE event listener to the line timeline

addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent):void
{
    if (isDragging) {
        drawConnectiveLine(mc1, mc2);
    }
    return;
});

The method drawConnectiveLine will update the line vector shape to move to {x, y} of the movieclips.

function drawConnectiveLine(d:DisplayObject, d2:DisplayObject):void {
    mc.graphics.clear();
    mc.graphics.lineStyle(2,0);
    mc.graphics.moveTo(d.x,d.y);
    mc.graphics.lineTo(d2.x,d2.y);
}

Modifications to your pre-existing script:

var isDragging:Boolean = false;
var mc:MovieClip = new MovieClip();
mc.graphics.lineStyle(2,0);
mc.graphics.moveTo(mc1.x,mc1.y);
mc.graphics.lineTo(mc2.x,mc2.y);
addChild(mc);

mc1.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
{
    isDragging = true;
    e.currentTarget.startDrag();
});

mc1.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
{
    isDragging = false;
    e.currentTarget.stopDrag();
});

mc2.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
{
    isDragging = true;
    e.currentTarget.startDrag();
});
mc2.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
{
    isDragging = false;
    e.currentTarget.stopDrag();
});
addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent):void
{
    if (isDragging) {
        mc.graphics.clear();
        mc.graphics.lineStyle(2,0);
        mc.graphics.moveTo(mc1.x,mc1.y);
        mc.graphics.lineTo(mc2.x,mc2.y);
    }
});