AS2 → AS3: Depth Management

Posted on

2/27/2008 in AS2 to AS3 • Beginner

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.

PLAIN TEXT

Actionscript:

function manageBoxes():Void
{
for (var i:Number = 0; i <3; i++)
{
var box:MovieClip = this.attachMovie("box", "box" + i + "_mc", this.getNextHighestDepth(), {_x: ((i * 80) + 100), _y: ((i * 80) + 100)});
var c:Color = new Color(box);
c.setRGB(Math.random() * 0xFFFFFF);
box.onRollOver = function():Void
{
this.swapDepths(this._parent.getNextHighestDepth());
};
}
}
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:

PLAIN TEXT

Actionscript:

function doSwapDepths($evt:MouseEvent):void
{
this.setChildIndex(Box($evt.target), (this.numChildren - 1));
}
function manageBoxes():void
{
for (var i:int = 0; i <3; i++)
{
var c:ColorTransform = new ColorTransform();
c.color = (Math.random() * 0xFFFFFF);
var box:Box = new Box();
box.x = box.y = ((i * 80) + 100);
box.transform.colorTransform = c;
box.buttonMode = true;
box.addEventListener(MouseEvent.MOUSE_OVER, doSwapDepths);
this.addChild(box);
}
}
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.