Making a DisplayObject, Sprite or Movieclip (or any other subclasses of DisplayObject) be always on top in ActionScript 3

11 actionscript,as3,flash,work  |   July 23, 2007  |     1434

Hi. I’m making a little rating visual control for a client and had to ensure this control would always stay on top of everything else. This basically means that whenever another control is added to the display list of it’s parent, i need to ensure my control stays last in the list.

You need to listen to the flash.events.Event.ADDED event on the container like so :

Now, to code the alwaysOnTop function, what we need to do is find out where our object is in the display list; if it’s not last we need to swap it to the last position like so

there is one case, if another object swaps itself to your position, where the display list is changed. The event Event.ADDED is triggered by the functions “addChild” and “addChildAt”. There is no event (in my humble knowledge) which tells you when the display list order has changed. Therefore it would be a good idea to have a centralized timer which would ensure all controls which must stay on top do actually stay on top by calling their “alwaysOnTop” functions at a regular interval.

Comments and questions are welcome!

🙂

Martin

Comments
  • November 29, 2007 at 11:26 am

    slopes

    Thanks for sharing – saved me hours of head scratching :o)

  • February 20, 2008 at 3:35 pm

    Brandon

    Martin, can you please tell me how I can add this to my code…I am new to AS3 and a bit confused.

    I have a MC called emails that needs to go over top of an FLC player called video…

    Please help!

  • February 20, 2008 at 6:21 pm

    mlegris

    If you know the instance name of both your MC’s, from the parent (the container of both), once they are both instantiated, do :
    [code]
    swapChildren(name1, name2);
    [/code]

    The other thing you can do is simply call the addChild() function in the proper order. First add your FLV player, then your Email MC.

    Hope this helps.

  • June 19, 2008 at 11:35 am

    rompelstilchen

    you should remove the event listener in case of the object is remove.

    use :
    addEventListener(Event.REMOVED_FROM_STAGE, function(e){parent.removeEventListener(Event.ADDED, alwaysOnTop);})

    Hope this helps

  • August 24, 2008 at 10:02 am

    Jan

    thank you!

  • December 19, 2008 at 6:22 am

    Joe

    # tl.addEventListener(Event.ADDED, alwaysOnTop);
    # function alwaysOnTop(e:Event){
    if(tl.numChildren-1> tl.getChildIndex(guideMC)){
    tl.setChildIndex(guideMC, tl.numChildren-1);
    }
    }

  • December 19, 2008 at 6:26 am

    Joe

    Sorry, bad post above. During testing I will put a guide layer on top when I am doing a liquid layout.

    Another way to do it:

    var tl=this;

    tl.addEventListener(Event.ADDED, alwaysOnTop);

    function alwaysOnTop(e:Event){

    if(tl.numChildren-1> tl.getChildIndex(guideMC)){

    tl.setChildIndex(guideMC, tl.numChildren-1);

    }

    }

  • April 20, 2009 at 6:22 pm

    Synnott

    I’m glad I saw this, kudos!

  • May 14, 2009 at 2:27 pm

    Bobby

    This worked great, except now movieclips below it that I’m attaching dynamically aren’t firing mouse click events, even when I set the mouseChildren property to true for the clip that’s always on top.

  • May 14, 2009 at 2:29 pm

    Bobby

    Ah, answered my own question – I needed to set mouseEnabled = false on the top movie clip.

  • June 4, 2010 at 5:21 am

    Cassie

    I know this was posted years ago, but I was tearing my hair out and this solved my problem in an instant! Thank you so much!

Leave a Reply