How to hide a button on layer below other object so that the button is not clickable?

[SSSSSSBenay]

Hello everyone,

I am making the transition from Flash/AS3 to HTML5 Canvas and there is a technique that I often used with layering in Flash that I am unable to figure out in HTML5. Basically– I have 10 buttons on the stage, and when each button is clicked, a separate movieclip plays which takes up the majority of the stage. I only want one movieclip to be able to be played at a time, however all buttons are visible on the screen at all times. In Flash/AS3, I accomplished this by simply creating layers, and putting the buttons on the bottom layer, and putting the movieclips on the top layer so that when one movieclip plays, it essentially covers up the other buttons so that they can not be clicked until the movieclip finished and faded out of the screen. I am trying to do this same thing in HTML5 Canvas and it seems that no matter what layer the buttons are on, even if there is a movieclip covering them up on a higher layer, the buttons remain clickable (through the movieclip). Is there a way I can cover up a button so that it is not clickable? Thanks...

[Ares Hovhannesyan]

You can add "hide" property to that button or you can place the same button on different frames and use timline events to move them from the frame "visible"  to "hide" frame.

"visible" is the label name for that frame where that button is visible or exist

"hide" is the label name for that frame where that button is non visible or do not exist

[kdmemory]

H

Isn't there somehow a contradiction?

     "when each button is clicked, a separate movieclip plays which takes up the majority of the stage"

     "putting the movieclips on the top layer so that when one movieclip plays, it essentially covers up the other buttons"

     "however all buttons are visible on the screen at all times."

Do your movieclips have a lot of transparent areas through which you can see the 10 buttons?

But generally you can use a property on the main timeline to keep a record about whether any movieclip is playing or not.

Start with this in frame 1

if (!started) {
     this.mcIsPlaying = false;
     started = true;
}

Now a code for a button (all buttons) should be something like this

this.button1.addEventListener("click", button1Handler.bind(this));
function button1Handler(e) {
     if (! this.mcIsPlaying) {
          this.mc1.play();
          this.mcIsPlaying = true;
     }
}

Now I guess your movieclips contain multiple frames with some kind of animation and in the last frame a this.stop() code in order not to loop.

So extend your code in the last frame with this:

this.stop();
exportRoot.mcIsPlaying = false;

So your movieclip fades out, reaches the last frame with the above script and sets this.mcIsPlaying to false and the buttons will find the condition to play another movieclip.

[GogetaX · Accepted solution]

if you want to ignore mouse interaction with a MovieClip/button,

just add

MyMovieClip.mouseEnabled = false;