as3 MOUSE_UP stopDrag() not functioning

Question

I am working on a basic as3 slingshot game which uses startDrag() and stopDrag() to let the user pull an object and fire. when the object is not stretching the "elastic" the MOUSE_UP function works as it should, but when it is below the set points and is stretching the string the MOUSE_UP function is not being called.

• vars

  var gravity = 0.1;
  var angle1:Number = 0;
  var angle2:Number = 0;
  var radius:Number = 1;
  var elasticCoefficient:Number = 0.002;
  var released:Boolean = true;
  var forced:Boolean = false;
  var acc:Object = {x:0 , y:0}; 
  var vel:Object = {x:0 , y:0};
  var elastic:MovieClip = new MovieClip();
  

• the ENTER_FRAME code is

  function doConstantly(e:Event):void
  {
      acc.x = 0;
      acc.y = gravity;
  
      if(released == true) 
      {
          vel.x += acc.x; 
          vel.y += acc.y; 
          ball.x += vel.x;
          ball.y += vel.y
      }
  
  
      if(ball.y > stage.stageHeight + 500 || ball.y < -50)
      {
          resetLevel();
      }
  
  
      elastic.graphics.clear();
      elastic.graphics.lineStyle(2, 0xFFF2BD);
  
  
      if(ball.y > point1.y && ball.x < point2.x)
      {
              forced = true;
  
          var x1:Number = ball.x - point1.x;
          var y1:Number = ball.y - point1.y;
          var x2:Number = point2.x - ball.x;
          var y2:Number = point2.y - ball.y;
          var distance1:Number = Math.sqrt(x1 * x1 + y1 * y1);
          var distance2:Number = Math.sqrt(x2 * x2 + y2 * y2);
          angle1 = Math.atan2(y1,x1);
          angle2 = Math.atan2(y2,x2);
          var xOffset:Number = Math.cos(angle1 + Math.PI / 2) * radius;
          var yOffset:Number = Math.sin(angle1 + Math.PI / 2) * radius;
          var xOffset2:Number = Math.cos(angle2 + Math.PI / 2) * radius;
          var yOffset2:Number = Math.sin(angle2 + Math.PI / 2) * radius;
          angle1 +=  Math.sin(radius / distance1);
          angle2 +=  Math.sin(radius / distance2) * -1;
          elastic.graphics.moveTo(point1.x, point1.y);
          elastic.graphics.lineTo(ball.x+xOffset, ball.y+yOffset);
          elastic.graphics.moveTo(point2.x, point2.y);
          elastic.graphics.lineTo(ball.x+xOffset2, ball.y+yOffset2);
      }
      else
      {
          forced = false;
  
          if(forced == true){trace("forced is true")}
          if(forced == false){trace("forced is false")}
          elastic.graphics.moveTo(point1.x, point1.y);
          elastic.graphics.lineTo(point2.x, point2.y);
      }
  
      if (released == true && forced == true)
      {
          acc.x +=  distance1 * Math.sin(angle2) * elasticCoefficient;
          acc.y +=   -  distance1 * Math.cos(angle1) * elasticCoefficient;
          acc.x +=  distance2 * Math.sin(angle1) * elasticCoefficient;
          acc.y +=   -  distance2 * Math.cos(angle2) * elasticCoefficient;
  
          vel.x +=  acc.x;
          vel.y +=  acc.y;
      }
  }
  

• and the mouse events

  function ballMouseDown(event:MouseEvent)
  {
  //call function to reset level
  resetLevel();
  //follow mouse
  ball.x = mouseX;
  ball.y = mouseY;
  ball.startDrag();
  //set released to false so that gravity wont affect the ball when clicked
  released = false;
  }
  function ballMouseUp(event:MouseEvent)
  {
  trace("mouse up function called")
  released = true; //gravity will affect the ball when released
  ball.stopDrag();
  }
  

Thanks.

Answer 1

Try adding the MOUSE_UP handler to the stage instead - at the moment, you will need to release your mouse while it is over the ball which may not be the case.

Update your MOUSE_DOWN handler to attach the listener to the stage:

function ballMouseDown(e:MouseEvent):void
{
    // ...your current code.

    stage.addEventListener(MouseEvent.MOUSE_UP, ballMouseUp);
}

And removing the listener when the handler is triggered:

function ballMouseUp(e:MouseEvent):void
{
    // ...your current code.

    stage.removeEventListener(MouseEvent.MOUSE_UP, ballMouseUp);
}