DIGG IT! 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 :)
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
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.
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
Hi Ted,
The final Part 3 of this article - dealing with reparenting flex components would be a help.
Thankx
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