How draw a line between two buttons?

Question

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

Answer 1

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[i].buttonMode = true;
            btns[i].addEventListener(MouseEvent.MOUSE_DOWN, grab);
            btns[i].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[j].x+(btns[j].width/2), btns[j].y+(btns[j].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();