Copy link to clipboard
Copied
I have two buttons on a canvas. They are slightly overlapping. When the user clicks on one button, I would like that button to be brought to the top (or in front) of the other button.
So, a click on a button should always bring it to the top so the whole button is visible to the user.
Thanks for any any help on this!
Copy link to clipboard
Copied
Hi.
You can use the addChild or setChildIndex method from the createjs.Container class. In this case, you're going to call one of these two methods from the buttons parent.
Examples:
addChild approach (ES5 syntax):
this.bringToFront = function(e)
{
e.currentTarget.parent.addChild(e.currentTarget);
};
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);
addChild approach (ES6 syntax):
this.bringToFront = e => e.currentTarget.parent.addChild(e.currentTarget);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);
setChildIndex approach (ES5 syntax):
this.bringToFront = function(e)
{
e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
};
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);
setChildIndex approach (ES6 syntax):
this.bringToFront = e => e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);
I hope this helps.
Regards,
JC
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Hello JC and ClayUUID (this is not bumping an old thread) 🙂
JC, your code is great but for a whole day I could not get it to work. I tried so many ways but all to no avail.
Just one line of code was missing as far as I was concerned:
stop() the parent movieclip first!
This came from ClayUUID on another thread.
I have made an HTML5 canvas fla and all it has is a single movieclip ("base") and two buttons ("b1" and "b2").
I have placed the buttons inside the "base".
Here is my code (in frame 1 of the stage timeline) for those who stumble upon this page.
this.stop();
root = this;
root.bringToFront = function(e)
{
e.currentTarget.parent.setChildIndex( e.currentTarget, e.currentTarget.parent.numChildren-1);
};
root.base.stop();
root.base.b1.on("click", this.bringToFront);
root.base.b2.on("click", this.bringToFront);
Not sure you even need to stop the root, just the parent movieclip.
Thanks JC and ClayUUID
Ron