CISC 110Day 5

OOP Part 2

2

Outline

• The Display List

• Display List Classes

• Adding and Removing Objects

• Adding Symbol Instances

• Managing Object Depths

The Display List

3

Stage(DisplayObjectContainer)

MainTimeline(DisplayObjectContainer)

Shape(DisplayObject)

MovieClip(DisplayObjectContainer)

TextField(DisplayObject)

Bitmap(DisplayObject)

Display List Classes

4

DisplayObject

Shape Bitmap Video Interactive Object MorphShape StaticText

DisplayObjectContainerSimpleButton TextField

Stage LoaderSprite

MovieClip

Display List Classes

DisplayObject: Anything that can exist in the display list is a display object. More specialized classes are derived from DisplayObject.

Shape: Rectangle, ellipse, line, etc., created with drawing tools or at runtime.

Bitmap: This is an ActionScript bitmap created at runtime using the BitmapData class. Note that a standard JPG import does not create this kind of bitmap, but rather creates a Shape. After creating a bitmap with this class, however, you can place an imported JPG into it for display.

5

Display List Classes

Video: This is a video display object, the minimum required to play a video, rather than a video component.

InteractiveObject: This class includes any display object the user can interact with using the mouse or keyboard. It is not used directly to manipulate the display list. Instead, you work with its descendents.

MorphShape and StaticText: These classes represent a shape tween and a static text element, respectively, neither of which are controllable directly via ActionScript.

6

Display List Classes

SimpleButton: This class is used to create a button that’s functionally equivalent to the buttons you’ve created in the authoring interface. However, you can create buttons on the fly by using other display objects for their up, over, down, and hit states.

TextField: This class includes dynamic and input text elements, controllable with ActionScript.

DisplayObjectContainer: This class is similar to DisplayObject in that it refers to multiple display object types. The difference, however, is that this object can contain children (other display objects).

7

Display List Classes

Stage: Remember that the stage itself is part of the display list. Any interactive object can reference the stage, which itself is a display object container.

Sprite: A sprite is simply a movie clip without a timeline. Many ActionScript manipulations typically performed using movie clips only require one frame of the created movie clip’s timeline. So, the size and administrative overhead of the timeline is unnecessary.

Loader: This class is used to load external assets destined for the display list, including bitmaps and other SWFs.

8

Display the Display Listfunction showChildren( dispObj:DisplayObject ): void

{ for( var i:int = 0; i < dispObj.numChildren; i++ )

{ var obj:DisplayObject = dispObj.getChildAt( i );

if( obj is DisplayObjectContainer )

{ trace( obj.name, obj );

showChildren( obj );

}

else

{ trace( obj );

}

}

} 9

Result of Function Call: showChildren(stage)

root1 [object MainTimeline]

largeContainer [object MovieClip]

[object Shape]

smallContainer [object MovieClip]

[object Shape]

child2 [object MovieClip]

[object Shape]

[object StaticText]

child0 [object MovieClip]

[object Shape]

[object StaticText]

child1 [object MovieClip][object Shape]

[object StaticText]

10

Add Objects to the Display List

// Create objects (for a simple example, empty objects)

var mc: MovieClip = new MovieClip( );

var sh: Shape = new Shape( );

// Add shape to the stage

addChild( sh );

// Add movie clip to stage and shape to movie clip

addChild( mc );

mc.addChild( sh );

11

Add Symbol Instances to the Display List

1. Start with a symbol that you’ve created that is in your library, e.g. a MovieClip called mcOrange.

2. In the library panel, click the Symbol Properties button (looks like an “i” at the bottom of the library) or choose Linkage from the library menu.

3. In the resulting dialog, click to enable the Export for ActionScript option and add a name to the Class field, e.g. Orange.

4. Now you can create an instance of your custom class: var snack: Orange = new Orange( );

12

addChildAt( ) Method

Purpose: To add a child at a specific position in the display list

Example: Add new orange to start of list with each mouse click

var inc: int = 0;

stage.addEventListener( MouseEvent.CLICK, onClick );

function onClick( evt: MouseEvent ): void

{ var snack: Orange = new Orange( );

snack.x = snack.y = 100 + inc * 10;

addChildAt( snack, 0 );

inc ++;

}13

Remove Objects from the Display List

To remove a specific object from the display list, you can use the removeChild( ) method.

Example: Remove the snack object

removeChild( snack );

To remove a display object at a specific level, you can use the removeChildAt( ) method.

Example: Remove the display object at level 0

removeChildAt( 0 );

14

Remove Objects from the Display List

Example: Add 20 oranges. Then remove one with each mouse click.

for( var inc: int = 0; inc < 20; inc++ )

{ var snack: Orange = new Orange( );

snack.x = snack.y = 100 + inc * 10;

addChild( snack );

}

stage.addEventListener( MouseEvent.CLICK, onClick);

function onClick( evt: MouseEvent ): void

{ removeChildAt( 0 );

}

15

Remove Objects from Memory

Example: Add an orange, then remove it with a mouse click.

var snack: Orange = new Orange( );

snack.x = snack.y = 100;

addChild( snack );

stage.addEventListener( MouseEvent.CLICK, onClick);

function onClick( evt: MouseEvent ): void

{ removeChild( snack ); // Remove from display list

snack = null; // Remove from memory

}

16

Position Groups of Objects

var orangeCrate: MovieClip = new MovieClip( );

var orange1: Orange = new Orange( );

var orange2: Orange = new Orange( );

orange2.x = orange1.x + orange1.width + 10;

addChild( orangeCrate );

orangeCrate.addChild( orange1 );

orangeCrate.addChild( orange2 );

orangeCrate.x = 150;

orangeCrate.y = 200;17

Manage Object Depths

18

// Assume we have already created a Pepper class

var fruit: Orange = new Orange( );

var veggie: Pepper = new Pepper( );

addChild( fruit );

addChild( veggie );

// Swap the depths of fruit & veggie

swapChildren( fruit, veggie );

trace( “fruit depth: ” + getChildIndex( fruit ) );

trace( “veggie depth: ” + getChildIndex( veggie ) );

Other Depth-Management Methods

getChildAt( ): Returns a DisplayObject instance at a specified index

getChildIndex( ): Returns the index position of the specified Child DisplayObject

setChildIndex( ): Changes the index position of the specified Child DisplayObject

swapChildrenAt( ): Swaps the positions of two child DisplayObjects at specified index positions

19