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

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.

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