Skip to main content
A
andrea.grell
Participating Frequently
October 12, 2020
Answered

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

  • October 12, 2020
  • 5 replies
  • 1349 views

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!!!

This topic has been closed for replies.
Correct answer kglad

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

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

5 replies

kglad
Community Expert
kgladCommunity Expert
Community Expert
October 15, 2020

you're welcome.

kglad
Community Expert
kgladCommunity Expert
Community Expert
October 15, 2020

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);

    A
    andrea.grellAuthor
    Participating Frequently
    October 15, 2020

    Thanks a lot!!!!!!!

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 14, 2020

    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.

    A
    andrea.grellAuthor
    Participating Frequently
    October 15, 2020

    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));

     

    🙂

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 12, 2020

    you're welcome.

      A
      andrea.grellAuthor
      Participating Frequently
      October 14, 2020

      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));
      });

      kglad
      Community Expert
      kgladCommunity ExpertCorrect answer
      Community Expert
      October 12, 2020

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

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

        A
        andrea.grellAuthor
        Participating Frequently
        October 12, 2020

        This works! Thanks a lot!

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices