Highlighted

Animate (Canvas HTML5) Bring Movieclip to front by clicking on a Button

Community Beginner ,
Oct 12, 2020

Copy link to clipboard

Copied

Hello all, I am fairly new to Animate 2020 and have a little project in HTML5/Canvas with a few buttons on a stage. It's like a computer desktop with some icons to click on. Each button displays a movieclip (the "windows" on the desktop) when it's clicked. Like with a real computer desktop, the window which is opening when the button is clicked should be in the very front.

I found this Javascript which worked quite nicely, but only brings then button itself (instance name is "myButton") to the front:

 

   this.bringToFront = function(e){
          e.currentTarget.parent.addChild(e.currentTarget);

   };
   this.myButton.on("mousedown", this.bringToFront);

 

I tried this, with "myMC" being the Movieclip which I actually want to bring to the front, but that didn't work:

this.myButton.on("mousedown", this.myMC.bringToFront);

 

Can anyone help? Thanks a lot!!!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

function bringToFront(e) {
          this.myMC.parent.addChild(this.myMC);

   };
   this.myButton.addEventListener("mousedown", bringToFront.bind(this));

TOPICS
Code

Views

70

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate (Canvas HTML5) Bring Movieclip to front by clicking on a Button

Community Beginner ,
Oct 12, 2020

Copy link to clipboard

Copied

Hello all, I am fairly new to Animate 2020 and have a little project in HTML5/Canvas with a few buttons on a stage. It's like a computer desktop with some icons to click on. Each button displays a movieclip (the "windows" on the desktop) when it's clicked. Like with a real computer desktop, the window which is opening when the button is clicked should be in the very front.

I found this Javascript which worked quite nicely, but only brings then button itself (instance name is "myButton") to the front:

 

   this.bringToFront = function(e){
          e.currentTarget.parent.addChild(e.currentTarget);

   };
   this.myButton.on("mousedown", this.bringToFront);

 

I tried this, with "myMC" being the Movieclip which I actually want to bring to the front, but that didn't work:

this.myButton.on("mousedown", this.myMC.bringToFront);

 

Can anyone help? Thanks a lot!!!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

function bringToFront(e) {
          this.myMC.parent.addChild(this.myMC);

   };
   this.myButton.addEventListener("mousedown", bringToFront.bind(this));

TOPICS
Code

Views

71

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 12, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

function bringToFront(e) {
          this.myMC.parent.addChild(this.myMC);

   };
   this.myButton.addEventListener("mousedown", bringToFront.bind(this));

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 1
Community Beginner ,
Oct 12, 2020

Copy link to clipboard

Copied

This works! Thanks a lot!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 12, 2020 1
Community Beginner ,
Oct 14, 2020

Copy link to clipboard

Copied

Hello again,

now I've taken it one step further... what if the Button ("myButton") is nested in another Movieclip ("myMovieclipWithButton")? And on click it should bring "MyMC" to front?

I know it's somehow logical and since the button and the target are not on the same "level" anymore on the stage I would need to point the button to ".parent" somehow... somewhere... I tried different things (just adding "parent" here and there, to be truthful), but since I can't reeeeaaallly wrap my head around who is Parent and who is Child, it didn't work.

 

function bringToFront(e) {
this.myMC.parent.addChild(this.myMC);
};
 this.myMovieClipWithButton.myButton.addEventListener("mousedown", bringToFront.bind(this));
});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2020 0
Adobe Community Professional ,
Oct 14, 2020

Copy link to clipboard

Copied

if myMC and myMovieClipWithButton are both on the timeline that contains your code, the code you showed is correct.

 

if it doesn't work open the developer console and check for error messages.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2020 0
Community Beginner ,
Oct 15, 2020

Copy link to clipboard

Copied

It did work after all! I seemed to have a problem with another part of the code, which interacted with the bringToFront one...

 

Is it possible to do this without the button, like when a specific frame is loaded?

I have two MCs (MC1 and MC2), where MC2 becomes visible when the animation in MC1 is finished by the following code in the last frame:

this.parent.MC2.visible = true;
this.parent.MC2.gotoAndStop(1);
this.gotoAndStop(0);

 

I tried to add the following to the last frame of MC1, and also I tried to put it in the first frame of MC2, but both didn't work:

 

function bringToFront(e) {
this.MC2.parent.addChild(this.MC2);
};
this.MC2.on("load", bringToFront.bind(this));

 

🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2020 0
Adobe Community Professional ,
Oct 15, 2020

Copy link to clipboard

Copied

if you want mc2 to move to the front when mc1 completes play, on the last frame of mc1 use:

 

this.parent.MC2.parent.addChild(this.parent.MC2);

this.parent.MC2.visible = true;
this.parent.MC2.gotoAndStop(1);
this.gotoAndStop(0);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2020 1
Community Beginner ,
Oct 15, 2020

Copy link to clipboard

Copied

Thanks a lot!!!!!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2020 0
kglad LATEST
Adobe Community Professional ,
Oct 15, 2020

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 15, 2020 0