Ted On Flash: Developing in Trees

Developing in Trees - Part 2

DIGG IT! 5 Comments Published Monday, December 04, 2006 at 8:49 PM .

We ended part 1, using addChild to add ball class instances into our application. Adding them is really just the beginning as we need to be able to move them around and reorganize the DisplayTree to our advantage. When you move a class from one part of the DisplayTree to another we call this reparenting.

Reparenting is very important as it allows us to restructure an application at runtime to represent different structures. Lets walk through some reparenting examples of manipulating the DisplayTree.

So here is stage 1 of the DisplayTree. There are 6 children and one base class.

To create this tree you would do this:

1. Create child instances:

a = new Ball( 100, 0xFF0000 );
b = new Ball( 100, 0xFF0000 );
c = new Ball( 100, 0xFF0000 );
d = new Ball( 100, 0xFF0000 );
e = new Ball( 100, 0xFF0000 );
f = new Ball( 100, 0xFF0000 );

2. Add them to one another:

//assuming scope is within the base class
this.addChild(b);
this.addChild(a);
b.addChild(d);
b.addChild(c);
c.addChild(f);
c.addChild(e);

When using addChild items are added to the top z order wise at each level. In the diagram, z-order would be left to right. This is why the order in the addChild calls seems backwards but it is correct. (checked it twice.)

So to modify the DisplayTree to this new version we just need to do this:

a.addChild(c);

The above code moves c into "a" as a child. What is interesting here is that all the children in "c" move with it. In this case we have reparented a branch.

Now another reparenting case. "f" needs to move from "c" to "a" and then be moved behind "c". If just addChild were used, "f" would be in front of "c". To correct this we can swap the values using the swapChildren method like so:

a.addChild(f);
a.swapChildren(f,c);

or you can do this in a single call using addChildAt using the zero index. This is handy as it will alwasy add items to the back.

a.addChildAt(f,0);

So there we are reparenting in a nutshell.

Part 3 we will be doing some work with Flex and explaining trees in the context of containers and controls.

Cheers,

Ted :)

5 Responses to “Developing in Trees - Part 2”

# EECOLOR December 5, 2006 3:35 AM

Hey Ted,

we had some problems reparenting Flex components. We noticed that in order to reparent them we needed to remove the components from the parenting container first. If we did not do that we would get an index out of bounds error.

Greetz Erik
# Ted Patrick December 5, 2006 3:40 PM

Yup. Flex is a bit different as the UIComponent class hooks into events and these need to be removed first. The Flex post on this will cover this in detail.
# Seth Caldwell December 12, 2006 11:43 PM

I have implemented a simple game of pong that uses this donut class you wrote. I extended the class a bit giving the constructor the size and color params of the donut.

Originally the game of pong had just a checkbox as the ball ;)
I also upped the framerate to 70 to test how flex does at high framerates, hehe.

Enjoy!
http://sethonflex.blogspot.com/2006/12/quickpong.html
# Anonymous April 24, 2007 9:13 AM

Hi Ted,
The final Part 3 of this article - dealing with reparenting flex components would be a help.

Thankx
# Ged May 25, 2007 2:39 AM

Hi Ted,
Great article - Thanks.

I agree with the previous comment - Please can you complete the series and deal with reparenting in flex, it is causing us an issue at the moment.
All the Best
Ged, Fable Ltd

Ted Patrick - Demos & MAX @ Adobe Systems

Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.

Developing in Trees - Part 2

5 Responses to “Developing in Trees - Part 2”

Where to find me:

Latest

Lists

Links

Jobs

Archives