Understanding how AS3 manages Depths

March 29, 2008 by Emanuele Feronato
Filed Under Flash • 20 Comments 

This tutorial will explain you how to manage AS3 sprites and depths, and what’s changed from AS2 to AS3.

In every Actionscript version, when two movieclips (or objects, shapes, texts…) overlap, the one with the greater depth stands in front of the other. You can think about depth as a Z coordinate.

The first difference between AS2 and AS3 is that AS2 allows you to leave “holes” in depths.

For example, you can declare the first object with a depth of 2 and the second one with a depth of 200… no matter if there isn’t any object with a depth between 3 and 199. In AS3, this is no longer possible.

To add an object to the stage, you must use addChild(object_name).
addChild() assigns the first free depth available, just like AS2 MovieClip.getNextHighestDepth()

So let’s add some objects to a movie:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package {
	import flash.display.Shape;
	import flash.display.Sprite;
	public class depths extends Sprite {
		public function depths() {
			var blue_box:Shape = new Shape();
			var red_box:Shape = new Shape();
			blue_box.graphics.lineStyle(1);
			blue_box.graphics.beginFill(0x0000FF, 1);
			blue_box.graphics.drawRect(200,150,100,100);
			red_box.graphics.lineStyle(1);
			red_box.graphics.beginFill(0xFF0000, 1);
			red_box.graphics.drawRect(220,170,100,100);
			addChild(blue_box);
			addChild(red_box);
		}
	}
}

This is the result: the red box is in front of the blue box because the red one was the last placed on the screen.

Understanding AS3 Shapes, Sprites and Depths

If you switch line 14 with line 15, the blue one will be the one on the top:

Understanding AS3 Shapes, Sprites and Depths

Sno now we know that the first child added with addChild() is placed at depth 0, the second one is placed at depth 1, and so on.

To know the depth value of an object, you can use getChildIndex(object_name);. So if you add this line:

trace(getChildIndex(red_box));

You will get a 1 in your output window.

To add an object at a specific depth position, you can use addChildAt(object_name, depth)

So let’s try this script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package {
	import flash.display.Shape;
	import flash.display.Sprite;
	public class depths extends Sprite {
		public function depths() {
			var blue_box:Shape = new Shape();
			var red_box:Shape = new Shape();
			blue_box.graphics.lineStyle(1);
			blue_box.graphics.beginFill(0x0000FF, 1);
			blue_box.graphics.drawRect(200,150,100,100);
			red_box.graphics.lineStyle(1);
			red_box.graphics.beginFill(0xFF0000, 1);
			red_box.graphics.drawRect(220,170,100,100);
			addChild(blue_box);
			addChildAt(red_box,0);
		}
	}
}

Even if the red box was added after the blue box, it’s the blue one to stay on top because the red one was placed at depth zero.

Understanding AS3 Shapes, Sprites and Depths

That’s because if the specified depth is already taken by an existing object, then the new object is placed behind the existing one, whose depth is increased by one. So at the end of the script, the red box has depth zero, while the blue one has depth 1

You may ask: what if I change line 14 with

addChildAt(blue_box,1);

You can’t… you will get an error because as I said at the beginning of this post, you can’t leave “holes” in depth. So you can’t place an object at depth 1 if there isn’t an object at depth 0.

Using getChildIndex in a real life example, you can change line 15 with

addChildAt(red_box,getChildIndex(blue_box));

And you will get the same result.

Now, let’s see how to change depths dynamically.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
	import flash.display.Shape;
	import flash.display.Sprite;
	public class depths extends Sprite {
		public function depths() {
			var blue_box:Shape = new Shape();
			var red_box:Shape = new Shape();
			blue_box.graphics.lineStyle(1);
			blue_box.graphics.beginFill(0x0000FF, 1);
			blue_box.graphics.drawRect(200,150,100,100);
			red_box.graphics.lineStyle(1);
			red_box.graphics.beginFill(0xFF0000, 1);
			red_box.graphics.drawRect(220,170,100,100);
			addChild(blue_box);
			addChildAt(red_box,getChildIndex(blue_box));
			swapChildren(red_box,blue_box);
		}
	}
}

At line 16 the swapChildren method swaps red box’s depth with the blue box one. So we’ll have the red box in front again

Understanding AS3 Shapes, Sprites and Depths

Another way to change depths dynamically is changing line 16 with:

setChildIndex(blue_box,0);

Putting the blue box to depth zero again and make the red one stay on the top of the screen.

This was a brief introduction to AS3 depths. Obviously, more complex tutorials will come shortly.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.75 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

20 Responses to “Understanding how AS3 manages Depths”

  1. EagleVision on March 29th, 2008 11:08 pm

    I don’t have AS3 yet.
    But I might get it soon…

    (oooh…first post!)

  2. quentin on March 29th, 2008 11:54 pm

    kool tutorial.

    will you make a tutorial to manage many movieclips with the same code?

  3. Eblup on March 29th, 2008 11:59 pm

    a lot of people and i use movie clips and it is becoming yore downfall. :{

  4. colbycheeze on March 30th, 2008 12:11 am

    As simple of a tutorial as that was, I actually learned something. I haven’t yet even messed with depth management in AS3 because I’ve been so caught up doing other advanced stuff haha! Thanks :)

  5. Frederik J on March 30th, 2008 8:23 am

    Really nice. I got confused by AS3, because of that use. I thought it was something to do with XML :-)! But REALLY helpful!

    @Eblup:
    No, its becoming your downfall. Code in frames IS the way. It cleaner, easier to control and you always know where the code is, and how much of it there is!

    /Frederik J

  6. Hawdon on March 30th, 2008 9:26 am

    Im getting an error while trying to get on the forum…
    Like this:

    General Error
    SQL ERROR [ mysql4 ]

    UPDATE command denied to user ‘Sql136232′@’62.149.140.125′ for table ‘phpbb_sessions_keys’ [1142]

    An sql error occurred while fetching this page. Please contact an administrator if this problem persists.

    It might go away with time… will see…

  7. abhilash on March 30th, 2008 11:22 am

    @ emanuele
    please help me like hawdon,i am also getting an error-

    SQL ERROR [ mysql4 ]

    UPDATE command denied to user ‘Sql136232′@’62.149.140.126′ for table ‘phpbb_users’ [1142]

    An sql error occurred while fetching this page. Please contact an administrator if this problem persists.

    wat is the problem??

  8. Emanuele Feronato on March 30th, 2008 11:27 am

    yes, it’s a writing issue on the db, should be fixed today

  9. Rich on March 30th, 2008 1:42 pm

    I think it’s worth adding that addChild() can be used on any display object container. I.e. those 2 boxes could have been added to an existing sprite, which itself was then added to the stage.

    This gives you massive amounts of flexibility with the ordering and sequencing of child elements.

  10. Alejandro on March 31st, 2008 6:24 am

    Great tutorial!

    It will be intersting to see how do you handle an isometric view with this depth system.. You know the old style, when you leave “holes” to be able to place another objects later.

  11. Pedro Taranto on March 31st, 2008 7:38 am

    yeah, i am look for a isometric depth sort solution without success

  12. Omri, XPOGames.com on April 1st, 2008 10:18 am

    Hey Emanuele,

    Please contact me to info@xpogames.com as I’ve an interesting deal to offer you.

    Thanks,
    -Omri, XPOGames.com

  13. Shaun on April 2nd, 2008 7:11 pm

    Your tutorials are awesome. I recently switched from AS2 to AS3. So this is helping me a lot. Keep it up.

  14. Muhammad Umer on April 25th, 2008 3:10 pm

    HI i don’t get ASC3 it is so hard can you write tutorial on how to move to asc3 from asc2 can any one tell how to make/use physics in Flash i was trying to make a motor bike game in which player have to jump from a hill and then make stunts but i was unable to do this because hittest don’t work for this well i can make ping ball game…..And in last Help!

  15. Metal Weather on October 13th, 2008 4:31 pm

    Thanks Dude ! Clean explanations, clean example, you saved me a lot of time !

  16. Mukesh on October 19th, 2008 2:37 pm

    Your tutorials are very well written and with relevant examples. I have checked displacement map, and the one with ball rolling and this is the third one. I liked them all.

    I have a question about this one. While working through Flash, what happens to objects placed in layers? I have a flash file and it has two objects directly placed on Stage in two separate layers. The third layer has some actionscript code using which I add some more items. But the items that I add through actionscript are going to the bottom of stack.
    Why is that? Is that expected behaviour? If I want to have all those items on the top of everything, what should I do? I can’t afford to increase depths of all as I create many objects dynamically and it would be very inefficient to keep changing depth of everyone by calculating again.

    Please clarify if I have misunderstood things.

    Thanks,
    Mukesh

  17. Mukesh on October 19th, 2008 3:04 pm

    Also, I have one more question about AS3, which is not related to this topic. Should I ask it here, or should I contact you separately about that? If latter, then how do I contact you?

  18. raviraj on April 4th, 2009 10:40 am

    Cool stuff , dude … Thanks a ton !

  19. Bhatia on April 29th, 2009 10:05 pm

    Hi

    I am trying to build a flash application which has number of movie clips like an image thumbnail list which is loading images dynamically inside it and after the image is selected i want to bring it to stage

    i tried using levels to place my movie but dint worked for me like addClipAt(moviename, depth)

    Tried some alternative like stage.addclip(moviename) or stage.addClipAt(moviename,depth) with this i am able to place the movie on stage but can not refer to it like moving it or using it any way i dont know how to call it back ??

    Any Help or suggestion would be really helpfull to me

Leave a Reply




Trackbacks

  1. Tutorial | Understanding how AS3 manages Depths « Flash Enabled Blog on March 31st, 2008 1:48 pm

    [...] Read Tutorial No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

flash games company