A Tour of Depths Management Methods

Unlike in AS2, in ActionScript 3 there are no onoccupied depths or negative depths. In each container, all children are placed on the depths: 0, 1, 2, 3, ..., theContainer.numChildren-1. The Flash movie below illustrates the main depths control methods.

Download

The main methods of adding children and controlling their depth are:

  • theContainer.addChild(childName) -- If theContainer has no children initially and you use the method repeatedly for a number of children, they are added on consecutive increasing depths 0,1,2,..., theContainer.numChildren-1. If theContainer is not empty, the method will add the child on the next available depth.
  • theContainer.addChildAt(childName, depth) -- The method will add a child at the specified depth. The depth must be between 0 and theContainer.numChildren. Other children will be relocated to new depths to make room for the new child without leaving any depth unoccupied.
  • theContainer.setChildIndex(existingChildName, depth) -- The method will relocate an existing child to the specified depth. The depth must be between 0 and theContainer.numChildren-1. Other children will be relocated. See the Flash movie above.
  • theContainer.swapChildren(existingChildName, existingChildName) -- The name of the method is self-explanatory. See the Flash movie above.
  • theContainer.swapChildrenAt(occupiedDepth, occupiedDepth) -- The name of the method is self-explanatory. See the Flash movie above.
  • theContainer.getChildIndex(existingChildName) -- Returns the depth of a given child. Often used to reshuffle children. See the Flash movie above.
  • theContainer.removeChild(existingChildName) -- Removes a given child. Other children move to fill all the depths.
  • theContainer.removeChildAt(existingChildName,occupiedDepth) -- Removes a child from a given depth. Other children move to fill all the depths.

These are the basic methods, there are more of them. The main thing to remember is the all the children are always placed on depths 0,1,..,theContainer.numChildren-1. Thus the line:

theContainer.setChildIndex(existingChildName, theContainer.numChildren-1);

places the said child in front of all other children.

On the next two pages of this tutorial, we will show a 3D and a drag and drop examples where depths control is important.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.