How draw a line between two buttons?

[Jaason312]

Hi.

I want to make two movable buttons connected  with a line. When changing position of any button you'll change look of  the line of course.  I know how to draw a line but after MOUSE_DOWN, and  I don't know how to remove an old one line, and how make this line to  be shown all the time?

My code

btn2.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler3);
btn2.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler3);
btn3.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler3);
btn3.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler3);

// Define a mouse down handler (user is dragging)
function mouseDownHandler3(evt:MouseEvent):void {
   var object = evt.target;
   // we should limit dragging to the area inside the canvas
   object.startDrag();
}
function mouseUpHandler3(evt:MouseEvent):void {
   var obj = evt.target;
      obj.stopDrag();
      //spisujemy x,y
      var x2Pos:Number = btn2.x;
      var y2Pos:Number = btn2.y;
      var x3Pos:Number = btn3.x;
      var y3Pos:Number = btn3.y;
      trace (x3Pos);
      trace (y3Pos);
      var roundObject:Shape = new Shape();
      roundObject.graphics.lineStyle(2, 0x990000, .75);
      roundObject.graphics.moveTo(x2Pos, y2Pos);
      roundObject.graphics.lineTo(x3Pos, y3Pos);
      this.addChild(roundObject);
      //this.removeChild(this.getChildAt(this.numChildren -1));
}

Source .FLA: http://www.mediafire.com/?y2tyzz4zxun

[Ned Murphy · Accepted solution]

Here's a solution that you can adapt for two or more buttons....

var btns:Array = [btn2, btn3]; //instances on stage

//set btn handlers
function setBtns():void {
      for(var i=0; i<btns.length; i++) {
            btns.buttonMode = true;
            btns.addEventListener(MouseEvent.MOUSE_DOWN, grab);
            btns.addEventListener(MouseEvent.MOUSE_UP, drop);
      }
}

 
setBtns();

//draws lines btween all btns while a drag is occurring
function drawLines(e:Event=null):void {
      graphics.clear();
      graphics.lineStyle(2, 0xFF0000);
      graphics.moveTo(btns[0].x+(btns[0].width/2), btns[0].y+(btns[0].height/2));

      for(var j=btns.length-1; j>=1; j--) {
            graphics.lineTo(btns.x+(btns.width/2), btns.y+(btns.height/2));
      }
}

//handlers
function grab(event:MouseEvent):void {
      event.target.startDrag();
      addEventListener(Event.ENTER_FRAME, drawLines);

}

function drop(event:MouseEvent):void {
    event.target.stopDrag();
    removeEventListener(Event.ENTER_FRAME, drawLines);

}

drawLines();

[Guest]

Hi,

There is a requirement where when there is a drag drop between the entries of 2 lists, a line should be draw between the 2 list entries indicating a link between them. When the list is scrolled, the line drawn should be scrolled as well keeping the line(link) between those 2 entries of the lists.

Please kindly let me know how it could be accomplished.

Thanks,

Sai

[funkysoul]

What you are asking for here, is not a simple snippet like nedmurphy posted, you are asking for a rather "complicated" solution which is of course doable but requires a few more lines of code.

So you can get an idea of what you need:

1. Every button needs to to know to which button he's linked (array, multidimensional array)
2. Every button needs to have an anchor point (center, bottom edge, whatever ).
3. As soon as the drag method is started you need to catch the mouse position ( best with an enterframe or mouse move listener) capture the position of the other end of the line and redraw the line on every mouse move based on the start of the line position and the current sprite which is being dragged anchor point.

This sounds complicated but it isn't really, the difficult part starts when you need to avoid other buttons which would be in the way, then it can get really complicated

I hope you got an idea on what you need to build and Ned's code is perfect start for this.

[funkysoul]

does this help?
http://blog.six4rty.ch/2010/07/13/as3-drawing-dynamic-anchor-lines/

[Jaason312]

Thanks,

[Ned Murphy]

You're welcome