Moving a component in the display list

You can change the position of an object in the display list, and its display depth, by calling the addChildAt() method and supplying the name of an object and the position where you want to place it as the method's parameters. For example, add the following code to the preceding example to place the NumericStepper on top and repeat the loop to display the components' new positions in the display list:

this.addChildAt(aNs, numChildren - 1);
i = 0;
while(i < numChildren) {
    trace(getChildAt(i).name + " is at position: " + i++);
}

You should see the following in the Output panel:

aNs is at position: 0
aButton is at position: 1
aCb is at position: 2
aButton is at position: 0
aCb is at position: 1
aNs is at position: 2

The NumericStepper should also appear in front of the other components on the screen.

Note that numChildren is the number of objects (from 1 to n) in the display list while the first position in the list is 0. So if there are three objects in the list, the index position of the third object is 2. This means that you can reference the last position in the display list, or the top object in terms of display depth, as numChildren - 1.

View comments on LiveDocs