Main Content

You are here:

Depth in AS3

Hello and welcome to today's tutorial, where we will be trying to understand depth in ActionScript. A key concept: every object on screen is on the display list. In simple terms, you can think of this as a shopping list of all the items you want on screen. It is based around an array system, so every item on the display list has a certain depth "index" - every object has a number attached to it that determine how far forawrd or back the object is shown.

The first object comes has an index of 0. An object at 1 would be further forward than the first object (it would be "on top"), and an object at 2 would be further forawrd than that. Okay? Good. These indices (the plural of index) have to whole numbers (integers) and there can't be any gaps. Two objects cannot share the same index.

So far, we have been using this.addChild() which is all well and good, but it is pretty simple - it just adds the object on at the end (on the top of the pile). So if you added three cricles overlapping, the one you added last would be on top, which isn't what we may want. So, how to rectify this? We use the addChildAt function, which is exactly the same as the addChild function, but takes an extra argument - the index of where we want to add this object.

A note: if you were to add an object at 0, and then one at 1, and then to add another one at 1, it would displace the one at 1 and push everything in fron of that forward one, so the one you had at 1 would move to 2, anything at 2 would go to 3 and so on. Well, it is a little complicated, so I think it is time for a practical example, perhaps with some nice circles.

By the way, in this I have a helper function that helps create the circle, but that shouldn't be too hard to understand. Create a project, same as always, one fla and one .as called "CircleDepths.as", go into the in the same directory and put "CircleDepths" into the document class.

Copy this lot into the .as file. The comments should help you get the gist, but I will explain more afterwards. Feel free to "Test Project" and see it.

package{
        import flash.display.*
        public class circleDepths extends Sprite {
        public function circleDepths(){
                var red:Shape = createCircle(0xFF0000, 100);
                red.x = 50
                red.y = 50
                var green:Shape = createCircle(0x00FF00, 100);
                green.x = 125
                green.y = 125
                var blue:Shape = createCircle(0x0000FF, 100);
                blue.x = 200
                blue.y = 200;
                //So we have our circles, now comes the fun bit:
                //adding them!
                //First the standard two:
                this.addChild(red);
                this.addChild(blue);
                //Red is at 0; Blue is at 1
                //Blue is higher.
                 this.addChildAt(green,1);
                //in the middle of those two
        }
        //Our 'helper' function to take the legwork out of it
        //Basically our circle from a couple of tutorials ago 
        public function createCircle(colour:uint, radius:Number):Shape{
                var shape:Shape = new Shape
                shape.graphics.beginFill(colour);
                shape.graphics.drawCircle(0,0,radius);
                shape.graphics.endFill();
                return shape;
        }
        }
}

The first change is to notice that this class extends sprite (not Movie Clip). This doesn't make a large difference, but you should know that sprite are basically Movie Clips without their own timelines. It is possibly best to use sprite if you don't need that timeline.

So we use our standard construction to make some circles, using the little helper function call createCircle. Then we place them so they overlap. Except that you can 't see them yet, because they are not on the display list. Yes, they are not on that shopping list of what we want to see.

this.addChild(red);
this.addChild(blue);

That adds red at 0, and blue at 1, so the blue one is on top. But suppose we want to add the green circle between the other two:

this.addChildAt(green,1);
this.addChildAt(thing to add, index);

So before we had 0: red and 1:blue. Now green slots in a t 1, pushing blue down to two - 0:red , 1:green, 2:blue - blue appears on top. Well, I think that's about it for now, but stay tuned for more ActionScript 3!

Harry.

Comments