AS2 → AS3: Depth Management

Download Example Files

Managing depths in AS2 was pretty cumbersome and annoying. You had to use methods like getNextHighestDepth() or keeping track of depths manually to make sure everything appeared on the stage properly and didn't overwrite each other. Enter AS3 FTW!

AS3 has a built in depth management system so you don't have to mess with ugly methods or keeping track of depths manually any longer. In the following example, I'm going to attach 3 boxes to the stage and on rolling over each one, it'll bring that box to the highest depth on the stage.

Let's take a look at the AS2 syntax.

Actionscript:
  1. function manageBoxes():Void
  2. {
  3.     for (var i:Number = 0; i <3; i++)
  4.     {
  5.         var box:MovieClip = this.attachMovie("box", "box" + i + "_mc", this.getNextHighestDepth(), {_x: ((i * 80) + 100), _y: ((i * 80) + 100)});
  6.         var c:Color = new Color(box);
  7.         c.setRGB(Math.random() * 0xFFFFFF);
  8.        
  9.         box.onRollOver = function():Void
  10.         {
  11.             this.swapDepths(this._parent.getNextHighestDepth());
  12.         };
  13.     }
  14. }
  15.  
  16. manageBoxes();

As you can see when I create the box MovieClip I have to assign its depth to this.getNextHighestDepth(). Then, when rolling over a box, I have to swapDepths() to the next highest depth available in the container clip, in this case the root timeline. The code for this is ugly and if you're new to Flash kind of hard to understand.

Here is that same example in AS3:

Actionscript:
  1. function doSwapDepths($evt:MouseEvent):void
  2. {
  3.     this.setChildIndex(Box($evt.target), (this.numChildren - 1));
  4. }
  5.  
  6. function manageBoxes():void
  7. {
  8.     for (var i:int = 0; i <3; i++)
  9.     {
  10.         var c:ColorTransform = new ColorTransform();
  11.         c.color = (Math.random() * 0xFFFFFF);
  12.        
  13.         var box:Box = new Box();
  14.         box.x = box.y = ((i * 80) + 100);
  15.         box.transform.colorTransform = c;
  16.         box.buttonMode = true;
  17.         box.addEventListener(MouseEvent.MOUSE_OVER, doSwapDepths);
  18.        
  19.         this.addChild(box);
  20.     }
  21. }
  22.  
  23. manageBoxes();

As you can see here, simply calling addChild() on the box we just created will automatically put it at the next highest depth available. When we want to swap the depth, we simply tell the current container (in this case the root timeline as well) to put the box at however many children there are minus one (remember, children are indexed from 0, so if you get the number of children you have to subtract one to get where the last child is at). The great and convenient thing about this is that you can also just take a child and stick it into an index of an existing child. Therefore, if you want to put a box at index 1 where another box currently resides, that box thats currently at index 1 gets moved down to index 0 and the box you had at index 0 overtakes index 1. This is great because you can control where boxes are put in the stack.

The one thing to remember when using this depth management in AS3 is that you cannot put anything on an index that is just a random number. For instance, in AS2, you were able to put a MovieClip at index 9999. In AS3, if indexes 0 through 9998 aren't taken up, you can't do that and you have to put the clip at whatever the next highest index is. By simply calling addChild(), Flash will automatically do that for you and you don't even have to think twice about what the next highest depth is.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

9 Comments

Mmm thanks for this clear explanation, genius.

This was perfect. This is the best explanation out there that I have come across. Thanks!

Hey thats great, thx for sharing!

can anyone help out swapping the depths of MC's when they are already on the time line? i have multiple btns which need to come to the top 'level' on rollover.

the rollover function is working perfectly, but they are not switching levels?

please help!

If you'd like to bring something to the top of the display list, all you have to do is addChild it again:

Actionscript:
  1. container.addChild(clip);

this will put clip at the top of the display list on container.

Thanx for you explanation.

But why is it better to do this with AS3 when you can do this in AS2 with 16 rows of code and the better AS3 version need 23 rows of code ... sorry dosn't get that.

Is it a better performance in the end?

@Andre: The code to do the actual swapping is only one line just like the AS2 code. I'm not trying to say one is better than the other, just trying to show how to do said tasks in AS3.

Hi can you please comment this code: (Box($evt.target) Is it a concat or something like that?

Thanks

@Mauro: That's a casting operation, I'm casting the target of the event to the Box class so it knows thats what it should be and i will get the code hinting in the editor that I use that goes along with the Box class.

Hi ,thanks for this great explanation,
The editor does not highlight the Box Class, and when i run it throw an exception : "Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:MovieClip "
can you Advise please ?

Leave a comment

(required)

(required)