The Display List in a Flash CS3 Movie

The "Display List" is the hierarchy of graphical objects in your movie to be displayed on screen at runtime. The hierarchy is created via parent-child relationship between objects. Parts of this hierarchy are created automatically by the Flash Player. For example, the top object in the hierarchy, called the Stage, as well as the MainTimeline are created by the Player. Other parts you create knowingly or unkowingly when you draw objects at authoring time. When you create parent-child relationships between objects via "addChild" method in your ActionScript 3 program, you consciously create and control parts of the Display List.

Here is the Display List of our "solar system" movie shown on the previous page.

Display List for the Solar System Example

As you see, when you draw or create text fields during authoring time, your are adding children of the MainTimeline to the Display List. The Stage (discussed in detail on the next page) has usually only one child, the MainTimeline. The children that you are creating at authoring time are added to MainTimeline on depths 0 to (number of children)-1. No depths are skipped or unoccupied. You can create display objects programmatically, like the sprite "sun" in our solar system, and add them to the Display List via:

 

this.addChild(sun);

 

or equivalently:

 

addChild(sun);

 

The addChild method evoke above adds "sun" to the List as a child of the MainTimeline at the next available depth. "this" in the above context refers to the MainTimeline.

It is often hard to figure out the depth, the order, and even the number of children created at authoring time. For example, the two lines that we drew, constitute one child of the MainTimeline. It is much easier to keep track of children created programatically, placed in a programmaticaly created Sprite or a MovieClip. That is what we will do in our upcoming tutorial on depths management.

To figure out what object has what children, add the following code at the end of the script in the fla file from the previous page, children.fla:

 

trace("Number of children of Stage: ");

trace(stage.numChildren);

trace("What are children of Stage: ");

trace(stage.getChildAt(0));

trace("What does the keyword this refer to? ");

trace(this);

trace("Number of children of MainTimeline: ");

trace(this.numChildren);

trace("What are children of MainTimeline: ");

trace(this.getChildAt(0));

trace(this.getChildAt(1));

trace(this.getChildAt(2));

trace(this.getChildAt(3));

trace(this.getChildAt(4));

trace("How many children does the sprite sun have: ");

trace(sun.numChildren);

 

When you test the movie, the Output window reads:

Number of children of Stage:

1

What are children of Stage:

[object MainTimeline]

What does the keyword this refer to?

[object MainTimeline]

Number of children of MainTimeline:

5

What are children of MainTimeline:

[object Shape]

[object StaticText]

[object StaticText]

[object StaticText]

[object Sprite]

How many children does the sprite sun have:

2

The Stage has one child, MainTimeline. The MainTimeline has 5 children: the three static text boxes, the two lines combined into one child (a shape), and one sprite which is our programmatically created "sun".

Download

Download the fla file with the above code and test it.

What exactly is the Stage? How does "Stage" differ from "stage"? We discuss this question in the next section.

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.