Main Content

You are here:

Altering Depth

Hello and welcome. You may remember some time ago we looked at depth in AS3, and learnt a bit about how Flash displays objects with depths. If I remember correctly, we had three circles, one on top of another. Of course, it is quite likely that you want to change where things are in the future, so today we are going to learn about the getChildIndex() and setChildIndex() functions. We shall with two things that most people will know - "Bring to Front" and "Send to Back". I am using an imaginary object (eg a circle) called example.

Send to back - undoubtedly the easiest function to perform, you use the setChildIndex()function, which takes too arguments, an existing object on the display list, and an index to set it to. To "send to back" something, just set its depth to 0:


Bring to front - like the Send to Back function but a little harder because we have to assess where exactly the front is! With everything piling on top of everything else, it is perhaps a little difficult. Have no fear though- we can use a nice thing called numChildren to help us. numChildren equals the numberof items there are on the display list, but the first one is numbered 0, so we will have to deduct one from that:

setChildIndex(example,numChildren - 1);

Relative to something else - hmm.. no. I can't find a send-to-just-behind function. Looks like I'm going to have to find out the depth index of the other object (theotherthing in our case) with the getChildIndex() function, which requires one argument - the object to find the index of.

var otherindex = getChildIndex(theotherthing);
//Behind that thing:
setChildIndex(example, otherindex)
//^ pushes the other thing forward
//In front:
setChildIndex(example, otherindex + 1);

Actually, I don't think two functions in one tutorial is that bad, but hey, make up your own mind. I know this has been a little dull, believe me (I had to write it), but you will seriously want to remember these two functions.

Hopefully the next tutorial will be a bit more visual!