When you create your animation using the Flash authoring tool, you draw objects on the stage or drag them from the Library. Often, you put one object inside another. For example, you might place a shape and some text inside a movie clip that's on the stage. Then you can move or transform the movie clip and its content as a whole. When you want one displayed object to appear in front of or behind another, you use Flash's Modify→Arrange commands. To a designer, it all seems pretty natural. But what happens when you put on your ActionScript programmer's hat and want do those same display-related chores using only ActionScript? The key is the Display List, and that's the sole topic of this chapter.
The Display List is exactly what its name implies. It's a running list of the objects displayed on the stage during a Flash animation. You make things visible by adding them to the Display List and make them disappear by removing them from the list. The Display List keeps track of the stacking order of objects on the stage, managing the way they overlap one another. This chapter shows you how to add and remove items from the Display List and how to manage the stacking order. You'll learn a lot about the DisplayObject and DisplayObjectContainer classes. At the end of the chapter (DisplayObjectContainer Properties), there's a handy reference for some of the most common properties and methods related to Display List tasks.
Simply put, anything that appears on the stage in Flash Player is a display object. That includes shapes, lines, text fields, and movie clips. Because they're displayable, these objects have a lot of similar properties, including x/y coordinates that mark their position on the stage. They have width and height properties, which you can see in the Properties panel whenever you select them. If you're following the ActionScript discussion that began in Chapter 12, then it's probably clear that displayable objects inherit these similar properties from some ancestor class (Object-Oriented Thinking). In fact, they're all descendants of a class called, appropriately enough, DisplayObject. As you work in ActionScript, you'll find lots of objects that get important, much-used properties and methods from DisplayObject.
Suppose you create a new Flash document, with nothing on the stage, and you publish it or test it with Ctrl+Enter (⌘-Return on a Mac). From Flash Player's point of view, that empty .swf has two display objects: the stage itself (yep, it's a display object) and the animation's main timeline. Even if there's only a single frame, the main timeline is considered a display object that's placed on the stage. It works like this: Though the Flash Player's stage looks empty, it still has a couple of displayable features, like a background color and the width and height of the stage. Equally important, the stage is a container. When you put display objects on the stage, they become visible. Along the same lines, the main timeline is also a display object. Anything you put in a frame of that main timeline is displayed in the Flash animation. So it, too, is a container for other display objects. So, before you even start the process of building your animation, Flash always starts out with two display objects, which are also containers, as shown in Figure 14-1.
Figure 14-1. Every Flash document starts off with two display objects that are also display object containers. You build your animation by placing additional display objects and display object containers inside those two original containers.
Technically, the main timeline for any .swf is referred to as the .swf's main class instance, but it's easier to think of it as the main timeline, and that's what it's called in this chapter.
Now, suppose you place something on that stage. Perhaps you've already drawn a playing card and saved it as a movie clip in the Library. Drag that card from the Library onto the stage, and now you've got three display objects. The stage is a container holding the main timeline, and the timeline is a container holding the playing card movie clip. Everything that appears in a Flash animation has to be in a container and ultimately, those containers are held in the main timeline, which is held in the stage. Objects that can hold or contain other objects are a special type of display object—they're display object containers. Objects that descend from the DisplayObjectContainer class have special properties and methods that are uniquely suited to acting as containers for display objects.
If you're eager to see a list of some of DisplayObjectContainer's special properties and methods, go ahead and flip to DisplayObjectContainer Properties. If you'd like a gradual introduction, just keep on reading.
All display object containers are also display objects, but there are display objects that don't have the special properties of a display object container. For example, a rectangle can't contain another object. You can group a rectangle with another object, but technically it doesn't contain the other object. Table 14-1 shows which objects inherit properties from the DisplayObjectContainer class and which don't.
Table 14-1. Display objects that can hold or contain other objects inherit the special properties of the DisplayObjectContainer class.
DisplayObject and DisplayObjectContainer class | DisplayObject class only |
---|---|
Stage | Shape |
Sprite | TextField |
MovieClip | SimpleButton |
Loader | Bitmap |
Video | |
StaticText | |
MorphShape (tween) |
In practical terms, you won't spend a lot of time fretting over the stage and the main timeline as display objects or display object containers. They're always there. You can count on them being there. And there aren't many ways you can change them. If you're approaching ActionScript 3.0 with a Flash designer's background, you probably consider the act of placing something in the main timeline as "placing an object on the stage." On the other hand, you need to be aware of the properties and methods available when you're working with the movie clips, buttons, shapes, and text that you place on that stage.