CISC 110 Day 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 ShapeBitmapVideoInteractive ObjectMorphShapeStaticText DisplayObjectContainerSimpleButton TextField StageLoaderSprite 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 List function 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 = 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 = 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