Understanding how AS3 manages Depths
Filed Under Flash •
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:
-
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.
If you switch line 14 with line 15, the blue one will be the one on the top:
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:
-
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.
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.
-
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
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.
Tell me what do you think about this post. I'll write better and better entries.
(1 votes, average: 4 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
15 Responses to “Understanding how AS3 manages Depths”
Leave a Reply
-
Latest MochiAds Games
I don’t have AS3 yet.
But I might get it soon…
(oooh…first post!)
kool tutorial.
will you make a tutorial to manage many movieclips with the same code?
a lot of people and i use movie clips and it is becoming yore downfall. :{
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 :)
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
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…
@ 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??
yes, it’s a writing issue on the db, should be fixed today
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.
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.
yeah, i am look for a isometric depth sort solution without success
[...] 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 [...]
Hey Emanuele,
Please contact me to info@xpogames.com as I’ve an interesting deal to offer you.
Thanks,
-Omri, XPOGames.com
Your tutorials are awesome. I recently switched from AS2 to AS3. So this is helping me a lot. Keep it up.
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!