JavaScript Workshop » ActionScript 3.0: Display List

The key to successful manipulating graphics on the Stage is to understand what is known as the display list. The display list is the hierarchy of visible objects on the Stage. The display list lets Flash keep track of what the user sees, the visual relationships between objects, and the stacking order (or overlapping) of the objects.

Conceptually, it's much like the folder structure on your computer desktop, and can be represented as a tree structure. The top-level element is the Stage. Each time you play a Flash movie in a Web browser, the Flash Player opens your SWF and places it on the Stage. So the Stage is the container that holds your main SWF.

Inside your main SWF you can place other elements, such as buttons, text, video, bitmaps and other objects --- all of which are part of a big class known as DisplayObject.

You can also have elements on your main SWF that contain DisplayObject objects. These are known as DisplayObjectContainer objects, and include objects like a Sprite object, a Loader object, a MovieClip object, and the Stage itself. So you can think of the main SWF on the Stage as your desktop, the DisplayObjects as individual files, and the DisplayObjectContainers as folders that can contain additional folders or files.

One of the most important methods of the DisplayObjectContainer class is called addChild() This method adds an element (either another DisplayObjectContainer or DisplayObject) to the display list and makes it visible. As you add more DisplayObjects and DisplayObjectContainers to your display list, you need to keep track of how they overlap. Flash keeps track of each object with a number, known as an index, that begins at 0 and increases in whole numbers.

The Adobe online article on Display list programming should give you lots of more information to help you understand this new ActionScript 3.0 architecture.

View this video (.zip) for an overview of how the Display List object works.

Watch these videos (zip) for more details and examples:

Using the addChild method
Using the removeChild method
Referencing a Display Object by index number
Referencing a Display Object by name
Controlling Display Objects in different timelines
Controlling Display Objects in different movies
Using addChild to change parents