Flash CS3 Tutorial – ActionScript 3 Depths

One of the many things that have changed in ActionScript 3 has been the way that Flash handles depths, or the stacking order of objects on the stage. In ActionScript 2, there was a practically unlimited number of depths into which you could place an object. These depths determine what objects appear in front of other objects. An object with a depth of 100, for example, would cover up an object with a depth of 50. But in ActionScript 2, these depths didn't have to be consecutive. In other words, if you only had 2 objects on the stage, you could very well set one of them to a depth of zero and set the other one to a depth of 1000.

Well, in ActionScript 3, things are a little different. The stacking order is still determined by the index of the depth (higher numbers cover up lower numbers), but in AS 3, the available depths are limited by the number of objects on the stage. In other words, if there are only two objects on the stage, there are only two available depths--0 and 1.

Let's take a look at a quick exercise to illustrate how depths are handled in ActionScript 3:

1. Draw a few shapes and convert them to movie clips. In this example, I've created a red square, a green circle, a blue triangle, and a yellow pentagon. These movie clips have instance names of red_mc, green_mc, blue_mc, and yellow_mc respectively. Once you put your movie clips on the stage, place them in such a way that they overlap each other, like so:

In this example, we can tell just by looking at the shapes what the stacking index is for each of the shapes. The red square is at the bottom of the stacking order, so its index is 0. The green circle--just above the red square--has an index of 1, the blue triangle has an index of 2, and the yellow pentagon has an index of 3. So, there are 4 shapes on the stage, and the highest index number is 3, because the indexes start at 0.

So, how can we change the stacking order? In this example, we're going to use the setChildIndex method in order to swap the depths around. But first, we need to detect how many objects are on the stage so we'll know how many depths are available. Well, we can do this very easily using the numChildren property. Create another layer for your Actions, click on frame one of the Actions layer, and hit Opt+F9 (or just F9 if you're using a PC) and type the following line of code into your Actions:

trace(this.numChildren);

If you test your movie now (Cmd+Enter or Ctrl+Enter on PC), you'll get a pop up window displaying the number of objects on the stage. If you subtract one from this number, you'll have the highest possible stacking index. So let's ditch this line of code and create some functionality to allow the user to click on each of the movie clips. When each movie clip is clicked, it will be brought to the top of the stacking order. Replace the above line of code with the following:

On line 1, we're subtracting 1 from the total number of objects on the stage in order to calculate the highest possible stacking index, and we're storing this value in a variable called maxIndex.

On lines 3-6, we're adding event listeners to all of our movie clips so that when we click on each of these buttons, Flash will call on the function called sendToTop.

Inside the sendToTop function, we're pointing to the main timeline with the keyword this and using the setChildIndex method in order to change the stacking index of the movie clip that was clicked on. Inside the parentheses for the setChildIndex method, we need two things: the movie clip we're set the index for and the index number that we're changing it to. For the movie clip, we're pointing to e.currentTarget. The "e" refers to the event variable being sent from the event listener, and the "currentTarget" refers to the object that triggered the event. So, if the red movie clip was clicked, then "e.currentTarget" refers to this red movie clip. However, the "currentTarget" property is stored with a data type of Object. The problem with this is that the setChildIndex method is looking for a data type of DisplayObject. So, we need to use "as MovieClip" in order to essentially convert it from an Object reference to a MovieClip reference. (A MovieClip is a type of DisplayObject.) And then, after the comma, we're pointing to the maxIndex variable that we created in line 1. This will move the clicked movie clip to the top of the stacking order, resulting in the following effect.

Download the project file here: setChildIndex.zip