• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Oct 12, 2020 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!!!

TOPICS
Code

Views

853

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
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 12, 2020 Oct 12, 2020

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

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

Votes

Translate

Translate
Community Expert ,
Oct 12, 2020 Oct 12, 2020

Copy link to clipboard

Copied

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

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

Votes

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
community guidelines
Community Beginner ,
Oct 12, 2020 Oct 12, 2020

Copy link to clipboard

Copied

This works! Thanks a lot!

Votes

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
community guidelines
Community Expert ,
Oct 12, 2020 Oct 12, 2020

Copy link to clipboard

Copied

you're welcome.

Votes

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
community guidelines
Community Beginner ,
Oct 14, 2020 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));
});

Votes

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
community guidelines
Community Expert ,
Oct 14, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Oct 15, 2020 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));

 

🙂

Votes

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
community guidelines
Community Expert ,
Oct 15, 2020 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);

Votes

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
community guidelines
Community Beginner ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

Thanks a lot!!!!!!!

Votes

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
community guidelines
Community Expert ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

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
community guidelines