ADOBE FLEX 3
Developer Guide
255
Working with display objects
Now that you understand the basic concepts of the Stage, display objects, display object containers, and the display
list, this section provides you with some more specific information about working with display objects in Action-
Script 3.0.
Properties and methods of the DisplayObject class
All display objects are subclasses of the DisplayObject class, and as such they inherit the properties and methods of
the DisplayObject class. The properties inherited are basic properties that apply to all display objects. For example,
each display object has an
x property and a y property that specifies the object’s position in its display object
container.
You cannot create a DisplayObject instance using the DisplayObject class constructor. You must create another type
of object (an object that is a subclass of the DisplayObject class), such as a Sprite, to instantiate an object with the
new
operator. Also, if you want to create a custom display object class, you must create a subclass of one of the display
object subclasses that has a usable constructor function (such as the Shape class or the Sprite class). For more infor-
mation, see the DisplayObject class description in the ActionScript 3.0 Language and Components Reference.
Adding display objects to the display list
When you instantiate a display object, it will not appear on-screen (on the Stage) until you add the display object
instance to a display object container that is on the display list. For example, in the following code, the
myText
TextField object would not be visible if you omitted the last line of code. In the last line of code, the
this keyword
must refer to a display object container that is already added to the display list.
import flash.display.*;
import flash.text.TextField;
var myText:TextField = new TextField();
myText.text = "Buenos dias.";
this.addChild(myText);
When you add any visual element to the Stage, that element becomes a child of the Stage object. The first SWF file
loaded in an application (for example, the one that you embed in an HTML page) is automatically added as a child
of the Stage. It can be an object of any type that extends the Sprite class.
Any display objects that you create without using ActionScriptfor example, by adding an MXML tag in Adobe Flex
Builder 2 or by placing an item on the Stage in Flash—are added to the display list. Although you do not add these
display objects through ActionScript, you can access them through ActionScript. For example, the following code
adjusts the width of an object named
button1 that was added in the authoring tool (not through ActionScript):
button1.width = 200;
Working with display object containers
If a DisplayObjectContainer object is deleted from the display list, or if it is moved or transformed in some other
way, each display object in the DisplayObjectContainer is also deleted, moved, or transformed.
ADOBE FLEX 3
Developer Guide
256
A display object container is itself a type of display object—it can be added to another display object container. For
example, the following image shows a display object container,
pictureScreen, that contains one outline shape and
four other display object containers (of type PictureFrame):
A. A shape defining the border of the pictureScreen display object container B. Four display object containers that are children of the picture-
Screen object
In order to have a display object appear in the display list, you must add it to a display object container that is on the
display list. You do this by using the
addChild() method or the addChildAt() method of the container object. For
example, without the final line of the following code, the
myTextField object would not be displayed:
var myTextField:TextField = new TextField();
myTextField.text = "hello";
this.root.addChild(myTextField);
In this code sample, this.root points to the MovieClip display object container that contains the code. In your
actual code, you may specify a different container.
Use the
addChildAt() method to add the child to a specific position in the child list of the display object container.
These zero-based index positions in the child list relate to the layering (the front-to-back order) of the display
objects. For example, consider the following three display objects. Each object was created from a custom class called
Ball.
The layering of these display objects in their container can be adjusted using the
addChildAt() method. For
example, consider the following code:
ball_A = new Ball(0xFFCC00, "a");
ball_A.name = "ball_A";
ball_A.x = 20;
ball_A.y = 20;
container.addChild(ball_A);
ball_B = new Ball(0xFFCC00, "b");
ball_B.name = "ball_B";
ball_B.x = 70;

Get ADOBE® FLEX® 3: PROGRAMMING ACTIONSCRIPT™ 3.0 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.