The button is still active even when I remove the cursor from it, ActionScript 3

Question

Ok so I have my game but i have a issue that whenever I press the button, while the button is still being pressed if i remove my cursor from it without releasing the mouse button it the button is still active. How can I resolve it to make it that whenever the mouse is not in the button's hit zone it is not active----to explain it better and simple..If I press the button adn dont let go of it and if I were to drag the mouse off the buttons zone and let go the button will still be active, how can I resolve that?. Here is my code that make the player walk.

    var leftPressed:Boolean = false;
var rightPressed:Boolean = false;

var upPressed:Boolean = false;
var shootDown:Boolean = false;

var onGround:Boolean = true;


var level:Number = 1;

var bullets:Array = new Array();
var container_mc:MovieClip; 
var enemies:Array = new Array();

var score:Number = 0;

var tempEnemy:MovieClip;

var tempLaser:MovieClip;

var timesHit:uint = 0;

// BUTTON EVENTS EITHER CLICKED OR NOT

left_btn.addEventListener(MouseEvent.MOUSE_DOWN, moveLeft);
right_btn.addEventListener(MouseEvent.MOUSE_DOWN, moveRight);
up_btn.addEventListener(MouseEvent.MOUSE_DOWN, moveUp);
shoot_btn.addEventListener(MouseEvent.MOUSE_DOWN, shootPressed);

left_btn.addEventListener(MouseEvent.MOUSE_UP, leftUp);
right_btn.addEventListener(MouseEvent.MOUSE_UP, rightUp);
up_btn.addEventListener(MouseEvent.MOUSE_UP, upUp);


player.gotoAndStop('still');


stage.addEventListener(Event.ENTER_FRAME,onenter);

function onenter(e:Event):void{
    if (rightPressed == true && leftPressed == false){
        player.x += 8;
        player.scaleX = 1;
        player.gotoAndStop("walking");
        cloud.x -= 8;


    } else if (leftPressed == true && rightPressed == false){
        player.x -= 8;
        player.scaleX = -1;
        player.gotoAndStop('walking');
        cloud.x += 8;

   } else if(upPressed == true && leftPressed == false && rightPressed == false){


       }
        else{  
        rightPressed = false;
        leftPressed = false;
        player.gotoAndStop('still')}

}
// **** MOVEMENT CONTROLS *********



function shootPressed(e:MouseEvent):void{
    shootDown = true;
    if(shootDown == true){
        fireBullet();
        }

    }


function fireBullet():void
{
    var playerDirection:String;
    if(player.scaleX < 0){
        playerDirection = "left";
    } else if(player.scaleX > 0){
        playerDirection = "right";
    }
    var bullet:Bullet = new Bullet(player.x, player.y, playerDirection);
    //bullets = new Array();
    bullet.y = player.y + 8;
    stage.addChild(bullet);
    bullets.push(bullet);
    trace(bullets);

}

// BUTTON FUNCTIONS

function moveLeft(e:MouseEvent):void
{
    if(MouseEvent.MOUSE_DOWN){
    leftPressed = true;
    }else if (MouseEvent.MOUSE_UP) {
        leftPressed = false;
        }

}
function moveRight(e:MouseEvent):void
{
    if (MouseEvent.MOUSE_DOWN){
    rightPressed = true;
    }else if (MouseEvent.MOUSE_UP){
        rightPressed = false;
        }

}

function moveUp(e:MouseEvent):void
{
    if(MouseEvent.MOUSE_DOWN){
        upPressed = true;
        onGround = false;
        player.y -= 100;
        } 



}



function leftUp(e:MouseEvent):void
{
    leftPressed = false;
}
function rightUp(e:MouseEvent):void
{
    rightPressed = false;
}
function upUp(e:MouseEvent):void
{
    upPressed = false;
 if(upPressed == false){
     player.y += 100;

     }
}

Answer 1

This is, I think, what you were looking for. That should be enough.

left_btn.addEventListener(MouseEvent.MOUSE_DOWN, moveLeft);
left_btn.addEventListener(MouseEvent.MOUSE_UP, LeftUp);

function moveLeft(e:MouseEvent):void
{
  leftPressed = true;
  left_btn.addEventListener(MouseEvent.MOUSE_OUT, LeftOut);
}

function leftUp(e:MouseEvent):void
{
  leftPressed = false;
  left_btn.removeEventListener(MouseEvent.MOUSE_OUT, LeftOut);
}

function leftOut(e:MouseEvent):void
{
  leftPressed = false;
  left_btn.removeEventListener(MouseEvent.MOUSE_OUT, LeftOut);
}

MOUSE_OUT simply trigger when the mouse is out of your Object so you only have to add an EventListener with this type of Event. Of course, you may understand that it's not that smart to listen to this event if you didn't clicked on your btn before, that's why I choose to add the MOUSE_OUT only when MOUSE_DOWN is listened. Since what you want is only to set leftPressed when you Up your mouse I guess that you want the same for when your mouse is out. After this, I remove useless listeners (MOUSE_OUT) to be able to listen to them again and because it's a common waste of memory.

But, I really can't understand why you do :

function moveLeft(e:MouseEvent):void
{
   if(MouseEvent.MOUSE_DOWN){
       leftPressed = true;
   }else if (MouseEvent.MOUSE_UP) {
       leftPressed = false;
   }
}

What is the use of that ?!

Answer 2

Apart from the mouseup event you need to do something with the mouse out event. If you don't, the mouse up event is never triggered when the cursor moves from the button while the mouse is down ("drag out").

use the event MouseEvent.MOUSE_OUT or MouseEvent.RELEASE_OUTSIDE

The best way is to add eventlisteners to the MOUSE_UP event and either the MOUSE_OUT or RELEASE_OUTSIDE when the MOUSE_DOWN event is triggered.

Code example:

left_btn.addEventListener(MouseEvent.MOUSE_DOWN, handleButtonDown);


function handleButtonDown(e:MouseEvent):void 
{
   // activate "up" listeners
   e.target.addEventListener(MouseEvent.MOUSE_UP, handleButtonUp);
   e.target.addEventListener(MouseEvent.MOUSE_OUT, handleButtonUp);
   e.target.addEventListener(MouseEvent.RELEASE_OUTSIDE, handleButtonUp);

   // call your button action function
   // e.target is your button
   buttonDownAction(e.target);

}


function handleButtonUp(e:MouseEvent):void 
{
   // activate "up" listeners
   e.target.removeEventListener(MouseEvent.MOUSE_UP, handleButtonUp);
   e.target.removeEventListener(MouseEvent.MOUSE_OUT, handleButtonUp);
   e.target.removeEventListener(MouseEvent.RELEASE_OUTSIDE, handleButtonUp);

   // call your button action function
   // e.target is your button
   buttonUpAction(e.target);

}

function buttonDownAction(button:MovieClip) {
   switch(button) {
      case left_btn: 
          // do your thing here

      case right_btn:
          // do something else here
    }
}

in this example I made the handleButtonDown and handleButtonUp a bit more generic so you can use these 2 functions for all your buttons.

Hope it helps you, good luck!