AS3 How to make only 1 movieclip clickable at a time when there are multiple movieclips

Question

Ok, so I have a page with 5 movieclips/buttons on it. When you mouse over each one they light up (OVER state) and when you click on them they expand (DOWN state). The problem is if you have multiple movieclips expanded (in the DOWN state) they overlap and it looks awful. I want to code them so only 1 can be expanded at a time. How can I do this? I imagine I need an IF statement on each button like "If any other movieclips are in the DOWN state, then disable DOWN for this movieclip, if no other buttons are in DOWN state then enable the DOWN state for this movieclip" or something like that but I don't know how to write it. Please help. Here is the code for one of the movieclips:

Step0btn.stop();

Step0btn.addEventListener(MouseEvent.MOUSE_DOWN, onStep0Press);
Step0btn.addEventListener(MouseEvent.MOUSE_OVER, onStep0Over);
Step0btn.addEventListener(MouseEvent.MOUSE_OUT, onStep0Out);

function onStep0Press(event:MouseEvent):void
{
    // toggle between frame 1 and 3 on button press
    Step0btn.gotoAndStop(Step0btn.currentFrame == 3 ? 1 : 3);
}

function onStep0Over(event:MouseEvent):void
{

    if (Step0btn.currentFrame != 3)

    {

        Step0btn.gotoAndStop(2);

    }

}

function onStep0Out(event:MouseEvent):void
{
    // only switch back to UP state if the button is "pressed"
    if (Step0btn.currentFrame != 3)
    {
        Step0btn.gotoAndStop(1);
    }
}

Ok we have solved the issue with the overlapping movieclips, however on the movieclip's DOWN state there is another movie clip that has this code:

Step0img.stop();

Step0img.addEventListener(MouseEvent.MOUSE_DOWN, onStep0imgPress, false, 999);

function onStep0imgPress(event:MouseEvent):void
{
    Step0img.gotoAndStop(2);
    event.stopImmediatePropagation();
}

This allowed me to click on the nested movieclip without triggering the MOUSE DOWN even and closing the expanded movieclip. I think disabling the MOUSECHILDREN may have also disabled this functionality.

BadFeelingAboutThis BadFeelingAboutThis · Accepted Answer · 2014-07-31T17:19:01

Here is one way this can be done: Replace the code above with this code on your button timelines (or better yet make a class file and have your buttons each have it as their base class like my answer to this question - then you only need to have the one code file that all your buttons share)

stage.addEventListener(MouseEvent.MOUSE_DOWN,globalMouseDown,false,0,true); //add a global mouse listener

function globalMouseDown(e:Event):void {
    //find out if the target is a descendant of this, if not, then something else was clicked.
    var tmpParent:DisplayObject = e.target as DisplayObject;
    while(tmpParent && tmpParent != stage){
        if(tmpParent == this) return;
        tmpParent = tmpParent.parent;
    }

    //something else was clicked that wasn't this, so go to the up state
    gotoAndStop(1);

}

stop();

addEventListener(MouseEvent.MOUSE_DOWN, onPress);
addEventListener(MouseEvent.MOUSE_OVER, onOver);
addEventListener(MouseEvent.MOUSE_OUT, onOut);

function onPress(event:MouseEvent):void
{
    // toggle between frame 1 and 3 on button press
    gotoAndStop(Step0btn.currentFrame == 3 ? 1 : 3);
}

function onOver(event:MouseEvent):void
{

    if (currentFrame != 3)
    {
        gotoAndStop(2);
    }
}

function onOut(event:MouseEvent):void
{
    // only switch back to UP state if the button is "pressed"
    if (currentFrame != 3)
    {
        gotoAndStop(1);
    }
}

AS3 How to make only 1 movieclip clickable at a time when there are multiple movieclips

1 Answers