flash display_list_depth_collapse

In ActionScript 1 and 2, when a graphic object is deleted, the objects placed above it conserve their depth. This behavior seems logic but gives us an optimization problem because depths remain unoccupied between graphic objects. In other words, the depths 6, 8 and 30 could be occupied whereas the intermediary depths could be unoccupied.

In ActionScript 3, no intermediary depth can remain empty in a display list.

To understand the display object collapse method let’s take an everyday example, a pile of plates. If we take away a plate from the bottom of the pile the plates which are above will descend by one level each. Within the display list, the display objects work in the same way.

When we delete a display object the objects situated above descend by one level. We say that the display objects collapse. Due to this, no depth between two display objects can remain unoccupied.

In taking this idea into consideration, let’s re-read our code made to delete all of the child objects contained in a DisplayObjectContainer:

var lng:int = numChildren;
for ( var i:int = 0; i< lng; i++ )
{
removeChildAt ( i );
}

Each iteration of the removeChildAt method deletes a child object, making all superior child objects descend by one index. The object at the top of a stack being deleted, the next one therefore becomes the first in the list of child objects. The same process then repeats for each iteration.

In the middle of each loop, our index points to an unoccupied index raising a RangeError type error. By starting with the top of a stack we do not involve any collapse of the pile. We can delete each object in the list:

var lng:int = numChildren-1;
for ( var i:int = lng; i>= 0; i-- )
{
removeChildAt ( i );
}
// display : 0
trace( numChildren );

The lng variable stores the index of the last child object, then we delete each child object starting at the top of the pile then descending for each iteration.

This technique works well but there is a more concise and elegant approach. If we don’t consider the automatic collapse as an inconvenience but rather as an advantage we can write:

while ( numChildren > 0 )
{
removeChildAt ( 0 );
}
// display : 0
trace( numChildren );

We delete with each iteration of the graphic object positioned at index 0. Because of the collapse each child object will pass via this index.

Worth remembering

• The deletion of a DisplayObject within a display list provokes a depth collapse.
• The depth collapse allows us to not leave unoccupied intermediary depths between graphic objects.