Managing depths in AS2 was pretty annoying and time consuming. You’d spend so much time dedicating depth ranges for MovieClip groups, but in the end the limitations of AS2 really got the last laugh. Who’s laughing now?

Improving upon handling depths

With the introduction of Flash Player 9 and ActionScript 3.0, Adobe created an easy and powerful way to add, remove, and change MovieClips on the screen. It’s is called the display list.

Understanding the Display List

Basically, the role of the display list is to handle managing where your MovieClips are placed in depth when visually adding them to the Flash stage. To learn more on this topic, the Yahoo Flash Developer has a thorough introduction article to understanding the display list.

What happened to swapDepths and getNextHighestDepth?

The swapDepths and getNextHighestDepth methods no longer exist in ActionScript 3.0. Instead you would rely using the DisplayObjectContainer methods associated with a MovieClip added to the display list.

Swapping depths using AS2

function arrangeBoxes():Void
{
for (var i:Number = 0; i < 3; i++)
{
//Attaching the MC from th library for the duration of the loop
var box:MovieClip = this.attachMovie("box", "box" + i + "_mc", this.getNextHighestDepth(), {_x: ((i * 80) + 100), _y: 100});
var boxColor:Color = new Color(box);
boxColor.setRGB(Math.random() * 0xFFFFFF);
box.onRollOver = function():Void
{
//Focused box will achieve to the next highest depth
this.swapDepths(this._parent.getNextHighestDepth());
}
}
}
arrangeBoxes();

If you noticed in the AS2 solution, we are basically making the interacted object obtain the next highest depth available on the stage. Sounds correct and automated but there is nothing really stopping this from reaching a depth of 9999 with only 3 objects on stage. Basically, this is no where near an efficient solution to depth swapping.

Swapping depths using AS3

function arrangeBoxes():void
{
//For loop will create and place three boxes onto the stage
for (var i:int = 0; i < 3; i++)
{
var boxColor:ColorTransform = new ColorTransform();
boxColor.color = (Math.random() * 0xFFFFFF);
//Define a new box to be added to the stage
var box:Box = new Box();
box.x = ((i * 80) + box.width);
box.y = 100;
box.transform.colorTransform = boxColor;
box.buttonMode = true;
box.addEventListener(MouseEvent.MOUSE_OVER, swapMyDepth);
this.addChild(box);
}
}

function swapMyDepth(evt:MouseEvent):void
{
this.setChildIndex(Box(evt.target), (this.numChildren – 1));
}

arrangeBoxes();

I am just amazed at how much easier and efficient the swapping depth syntax appears in AS3. In the case of ActionScript 3.0, this solution literally swaps the depth of targeted objects. There is no “false advertising” of swapping depths.

Overall, there is very little left for the designer/developer to manage when dealing with object depth. One less headache to deal with. Phewww!

Download source

Feedback:

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.