07.23Making a DisplayObject, Sprite or Movieclip (or any other subclasses of DisplayObject) be always on top in ActionScript 3
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 :
-
// don't forget to do this at the top of your file
-
import flash.events.Event;
-
-
// object code goes here.. and inside of some initialization function you add this line
-
// (be sure the object has been added to some parent before calling this line!)
-
-
parent.addEventListener(Event.ADDED, alwaysOnTop);
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
-
protected function alwaysOnTop(evt:Event):void
-
{
-
if(parent.numChildren-1> parent.getChildIndex(this))
-
parent.swapChildrenAt(parent.numChildren-1, parent.getChildIndex(this));
-
}
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
Thanks for sharing - saved me hours of head scratching :o)
November 29th, 2007 at 11:26 am
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 20th, 2008 at 3:35 pm
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.
February 20th, 2008 at 6:21 pm
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
June 19th, 2008 at 11:35 am
thank you!
August 24th, 2008 at 10:02 am
# tl.addEventListener(Event.ADDED, alwaysOnTop);
# function alwaysOnTop(e:Event){
if(tl.numChildren-1> tl.getChildIndex(guideMC)){
tl.setChildIndex(guideMC, tl.numChildren-1);
}
}
December 19th, 2008 at 6:22 am
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);
}
}
December 19th, 2008 at 6:26 am
I’m glad I saw this, kudos!
April 20th, 2009 at 6:22 pm
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 14th, 2009 at 2:27 pm
Ah, answered my own question - I needed to set mouseEnabled = false on the top movie clip.
May 14th, 2009 at 2:29 pm
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!
June 4th, 2010 at 5:21 am