AS3 movieclip buttons inside of movieclip buttons

Question

I have a movie clip that is tied to some mouse action. When you click on the movie clip, the image expands to show some text and another image. I need to be able to click on that new image and exapand it, but I can't click on it because I already coded the inital movie clip to open and close on a mouse click. How can I ignore that initial mouse click? I have been looking for answers and have come up with mousechildren which I haven't been able to get to work and also putting buttons on another layer, but I can't seem to wrap my head around it.

Here is the code for the initial movie clip:

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);
    }
}

Then inside that I have the other movie clip with this code:

step0img.stop();

step0img.addEventListener(MouseEvent.MOUSE_DOWN, onStep0imgPress);

function onStep0imgPress(event:MouseEvent):void
{
    step0img.gotoAndStop(1);

}

This part is completely ignored because of the coding on the initial movieclip. How can I change this?

UPDATE

Ok, so here is the new code:

Step0img.stop();

Step0img.addEventListener(MouseEvent.MOUSE_DOWN, onStep0imgPress);

function onStep0imgPress(event:MouseEvent):void
{
    if(event.target == this.Step0btn.Step0img){
        //the click was actually the image
        this.Step0btn.Step0img.gotoAndStop(1);
    }else{
       // toggle between frame 1 and 3 on button press
       this.Step0btn.gotoAndStop(this.Step0btn.currentFrame == 2 ? 1 : 2);
    }
}

It doesn't give me any errors when I debug and the movie plays fine, except when I click the button I just coded. It doesn't work and I get this error:

TypeError: Error #1010: A term is undefined and has no properties.
    at SMARTTTraining_fla::step0_btn_7/onStep0imgPress()[SMARTTTraining_fla.step0_btn_7::frame3:7]

Can you explain the hierarchy of your step buttons? From your error and code, it's looks to be like this: MainTimeline -> step0_btn_7 -> Step0btn -> Step0img Is that correct? are you sure all your instance names are spelled correctly? There is discrepancy between your updated code and original posted code with case sensitivity. — BadFeelingAboutThis

BadFeelingAboutThis BadFeelingAboutThis · Accepted Answer · 2014-07-29T22:18:20

Here are two ways you can accomplish what you'd like.

Just use the one click listener on the parent and check the target of the event (the target is the farthest down display object that was clicked, as opposed to currentTarget which is the object the listener was attached to)
```
function onStep0Press(event:MouseEvent):void
{
    if(event.target == step0btn.step0img){
        //the click was actually the image
        step0btn.step0img.gotoAndStop(1);
    }else{
       // toggle between frame 1 and 3 on button press
       step0btn.gotoAndStop(step0btn.currentFrame == 3 ? 1 : 3);
    }
}
```
One thing to note on this method, is if step0img has children, they may be the target of the event. you may need to do something like step0img.mouseChildren = false to prevent them from being the target.

Listen on the image with a higher priority, then cancel the event so it doesn't bubble up to the parent.

step0img.addEventListener(MouseEvent.MOUSE_DOWN, onStep0imgPress, false, 999); //the 999 is an arbitrary number, listeners with a higher priority will be handled first, if they have the same priority (default is 0), then they will be handled backwards from order the listeners were added.

function onStep0imgPress(event:MouseEvent):void
{
    step0img.gotoAndStop(1);
    event.stopImmediatePropagation(); //this will stop the event from triggering any other listeners for it.
}

AS3 movieclip buttons inside of movieclip buttons

1 Answers