display list management in actionscript 3 applications

Question

Does anyone have suggestions for a good method to manage the display list in an actionscript 3 project? I'm building an application at the moment and keeping track of all the modules which need to be displayed and reordering them has become unwieldy. I have loaded swfs and instantiated classes that also load in swfs, images and video.. Should I just reference everything to the stage? How should I keep track of the display tree? How can I always force one particular module to the top of the tree?

Answer 1

I use container DisplayObjects and let each DisplayObject manage its direct children (parents tell children what to do). Usually you can break your displaylist into natural "layers" that can be in there own containers.

This way the main containers don't have to change depth, so you know the last container added to the stage will be on top.

Also to force a DisplayObject to the top of the displaylist, just use addChild (even if it is already added). This will add it to the top of the list.

Answer 2

Using containers as mentioned is the best way to go. Containers are your friend.

Using addChild() to force something to the top of the list works, but can be exhausting if you have to do it 50,000 times throughout your code, and more-so when you get multiple things that you need to have keep on top no matter what.

So what I do is I create a "prioritized depth stack" array in my document class, to which I add everything I want "on top" all the time no matter what, and anytime I do any flagrant stage work such as switching out a major display object, I just use a method called "RunDepthStack" which loops through the array and re-adds everything in the array.

You can even get extremely meta about it and add objects to the array that aren't even necessarily on the stage by calling

object.parent.addChild(object);

which will enable you to manage prioritized displayobjects regardless of their container with a single super method...

Now, if you have an extremely complex UI, you're going to have to get more granular, but I do not suspect that's your problem right now.

Answer 3

If the application is big, I would addChild / removeChild as the user interacts with the application.

If however it is fairly small, simple visible true/false does it well.

It sounds like you are in the first case.

But yes, definitely use an class/object as your sitemap that is used to populate your navigation, keep track of the modules references, where the user is at and that can be used for deeplinks.

As for the depth swapping, I assume you are talking about visual depth, implement these :)

setChildIndex(example,0); // send to back

setChildIndex(example,numChildren - 1); // bring to front

Swap between:

var otherindex = getChildIndex(theotherthing);

Behind that thing:

setChildIndex(example, otherindex) //pushes the other thing forward

In front:

setChildIndex(example, otherindex + 1);

HTH.