- Home
- Tutorials
- Flash
- Intermediate
- Preloading in ActionScript 3.0, the Easy Way

Display List: Display hierarchy
Let’s briefly review the display list hierarchy of the ActionScript 3.0 Display API. The Display API has three “abstract” classes starting with the “DisplayObject” class. The “InteractiveObject” class directly inherits from the “DisplayObject” class, and the “DisplayObjectContainer” directly inherits from the “InteractiveObject” class:

All the other classes you see in the diagram are derived from one of these three “abstract” classes. These are non-abstract classes, and they are the only classes you can extend.
In a flash application, any object you “see” comes from one of the non-abstract classes, i.e., video, bitmap, shape, static text, morphshape, textField, simplebutton, stage, sprite, or movieclip. The loader class is special in that we can’t “see” it, but it loads one of the other instantiated non-abstract classes that we can see.
So, in our Preloader.fla, how many display objects do we have? We can see that there are two object on the stage, the “arrows” movieclip and the “percent” dynamic text field. These two objects, either directly or indirectly, from one of the non-abstract class in the above diagram, are automatically instantiated when Preloader.swf runs.
If you click on the ActionScript content in the “actions” layer of Preloader.fla, you’ll see we’re instantiating the loader class:
var loader:Loader = new Loader();
Now, when the preloader starts, the flash runtime creates in memory all our variables and functions, i.e., the “loader” object, the “loop” and “done” functions defined in our script.
The flash runtime also creates a display list, i.e., a hierarchical list of all visible objects in our flash application.
The root of the display list is an instance of the Stage class. The flash runtime automatically creates it.
Now, all display objects, i.e., our “arrows” movieclip and “percent” dynamic text objects, are displayed at some “depth” in some “display object container,” but what are those depths?
These two trace statements show that the “arrows” and “percent” objects are at depths 0 and 1 respectively in their “instantiated DisplayObjectContainer” object:
trace("depth of 'percent' dynamic text object = "+getChildIndex(percent));
trace("depth of 'arrows' movieclip object = "+getChildIndex(arrows));
But what exactly is their “instantiated DisplayObjectContainer” object? Is it the stage? A sprite? The Loader? A movieclip?
In ActionScript 3.0, all “instantiated DisplayObjectContainer” objects have a variable called “root.” “root” is just a reference to the DisplayObjectContainer itself. Each object in the DisplayObjectContainer has access to the DisplayObjectContainer’s “root” variable. These two trace statements help us discover what the DisplayObjectContainer is for the “arrows” movieclip and “percent” dynamic text:
trace("the 'percent' object descends/is contained in this specific<span> </span>DisplayObjectContainer:"+percent.root);
trace("the 'arrows' object descends/is contained in this specific<span> </span>DisplayObjectContainer:"+arrows.root);
These statements return:
the 'percent' object descends/is contained in this specific DisplayObjectContainer: [object MainTimeline]
the 'arrows' object descends/is contained in this specific DisplayObjectContainer: [object MainTimeline]
So, the “instantiated DisplayObjectContainer” object that contains “arrows” and “percent” is the SWF file itself because that has a “main timeline.” (If a .fla file has content in its timeline, the ActionScript 3.0 compiler automatically creates a document class inherited from the flash.display.Movieclip class. If the timeline is empty, it creates a document class inherited from the flash.display.Sprite class ).
The trace statements are telling us the “arrows” movieclip and “percent” dynamic text objects are inside the SWF file, an instantiated movieClip class. This why the trace of "percent.root" & "arrrow.root" return “MainTimeline” as the container object.
But isn’t it true that the Stage class is always the root of the display list? Exactly right!
Along with automatically instantiating a movieClip class, the flash runtime engine instantiates a stage class. The stage object is always the outermost container for all displayable objects like the “arrows” and “percent” objects.
So if a stage object is the root of our display list, what is the first child, if any, at depth 0? This trace statement gives us the answer:
trace(stage.getChildAt(0)+"is the display object contained inside the stage");
It returns:
[object MainTimeline] is the display object contained inside the stage
So, from a “object” hierarchy perspective, the instantiated MoveClip class called “arrows” and the instantiated TextField class called “percent” are “inside” the “Main Timeline” object, which is the instantiated MovieClip class of the SWF file. In the terminology of object-oriented design, this is called “object composition” where one object is “composed” of one or more other objects.
Therefore, we really have only one display list. The deal is that the children are in a “relative” display list (if you will) that starts with the main Timeline (i.e., movieClip) object. In short, the “arrows” and “percent” objects are “contained” in the “Main Timeline” object, which is the instantiated MovieClip class of the SWF file, and the “Main Timeline” object is “contained” in the instantiated Stage class.
And where is our instantiated Loader class, the “loader” object?
Well, the “loader” object definitely exists in memory, and from an object hierarchy perspective, it is “inside” the instantiated MovieClip object of the SWF file.
This may be obvious, but from a display list perspective, at the execution point in the script when we create a new Loader object, the “Main Timeline” is NOT considered a “display container” for the “loader” object. However, it is “in” the main Timeline (i.e., movieClip) object, i.e., the main Timeline (i.e., movieClip) object is “composed” of the loader object.
Neither is the “loader” object part of the display list. The “loader” object has access to a “root” variable, but the value of that variable is “null.” For example, this:
trace("the 'loader' object descends/is contained in this specific DisplayObjectContainer: "+loader.root);
returns this:
the 'loader' object descends/is contained in this specific DisplayObjectContainer: null
The reason for this is simple: we much add the “loader” object to some container using a method called addChild(), but we’ll get to that in a minute.

