4/07/2011

Flash 101: The Display List

Understanding the mechanics of how Flash display objects is crucial to working with Flash. It also allows you to better visualize the order and placement of display objects while coding. It is actually quite simple, and in this post, you'll get to experiment and play with it.

The display list refers to list of objects that Flash uses to determine what to show. It has a hierarchical system much like the layers in the timeline of the Flash IDE. For those coming from a Flash designer/animator's background, you can see everything as one big "movieclip" with other "movieclips"(who can also hold "movieclips") within it - each on layers that determine who's in front of who.

In the as3/programming world, every element displayed by Flash is a display object. MovieClip, Sprite, Loader, Bitmap, and Video are all display objects (DisplayObject). It is important to note that only some of them could hold other display objects. We call them display object containers (DisplayObjectContainer). They include MovieClip, Sprite, Stage, and Loader; and are what we work with in Flash. In the AS3 display list model, they are referred to as parent(container) and children. For example, adding a child to a display object container means adding a display object into the container(parent).



A display object's depth levels determine the order they appear on stage. It behaves very much like an list or array. Every display object in a container is assigned a depth level as they are added. It starts at 0 and increments as more objects are added. Objects with a higher depth level appear in the front. When an object changes depth or is removed, this depth list reorganizes itself so that the children's depths are always consecutive unbroken positive integers beginning with 0.

I know I'm pretty bad at explaining it in words, so I've made an app that illustrates the Flash display list. The white area shows how it looks on display. The buttons on the right are most of the methods that the DisplayObjectContainer provides. The bottom list shows the hierarchy of all the objects and their depths. Click to select objects. You may also drag them around.



USEFUL SNIPPETS

to remove every child: while(container.numChildren>0){ container.removeChildAt(0); }
to reorganize an array of objects where its depth is its position in the array: for(var i:int=0;i<objArray.length;i++){ container.setChildIndex(objArray[i],i); } Organizing or sorting the array beforehand into the desired order makes this snippet useful. For example sorting it by their y properties - objArray.sortOn("y",Array.NUMERIC); - before the snippet makes objects with higher y properties appear before objects with lower y properties.

1 comment: