Network menu by using drawing API

1

hello and thank you for reading this post. I’ve got a question. I’m slowly discovering the world of drawing by API and I want to use this for a project of mine, that is inspired on www.theyrule.net . Here is what I want to achieve:
I want to make a draggable menu containing 5 items, in which all the items are connected with a drawn line to a drawn rectangle. So far so good, as you can see in my swf and fla. Now here comes the tricky part: Each menu item (in the example the yellow one) will have another tree out of it.
I’ve managed to bind the sub items with the yellow menu item, so that when the yellow one is dragged, the drawn lines move with it.
Then I wanted to have some interaction. Here is were I got stuck. When this yellow item is pressed, I want to tween the lighter rectangles (sub items) out of it, connected to the main item. Get it? How do I achieve such affect?
I was thinking myself of putting the sub items in a movieclip but then the x and y coordinates arent right. Where can i find usefull drawing API tutorials that have interaction in it, or could you (yes you!) maybe help me a bit to get on the right track again?
thanks in advance.


this.createEmptyMovieClip("line",1);
this.createEmptyMovieClip("main",2);

//draw main//
main.lineStyle (1, 0xff00ff,100);
main.beginFill(0x000000,100);
main.moveTo(0,0);
main.lineTo(0,20);
main.lineTo(20,20);
main.lineTo(20,0);
main.lineTo(0,0);
main._x=275;
main._y=150;
//drage main//
main.onPress = function (){
    this.startDrag();
}
main.onRelease = main.onReleaseOutside=function (){
    this.stopDrag();
}
//lines//
this.onMouseMove = function () {
    line.clear ();    
    line.lineStyle(10,0xCCCCCC,20);
    //to main//
    line.moveTo(b1._x,b1._y);
    line.lineTo(main._x,main._y);
    line.moveTo(b2._x,b2._y);
    line.lineTo(main._x,main._y);
    line.moveTo(b3._x,b3._y);
    line.lineTo(main._x,main._y);
    line.moveTo(b4._x,b4._y);
    line.lineTo(main._x,main._y);
    line.moveTo(b5._x,b5._y);
    line.lineTo(main._x,main._y);
    //to b4//
    line.moveTo(subb1._x,subb1._y);
    line.lineTo(b4._x,b4._y);
    line.moveTo(subb2._x,subb2._y);
    line.lineTo(b4._x,b4._y);
    line.moveTo(subb3._x,subb3._y);
    line.lineTo(b4._x,b4._y);
    updateAfterEvent ();
}

//drags//
b1.onPress = function (){
    this.startDrag();
}
b1.onRelease = box.onReleaseOutside=function (){
    this.stopDrag();
}
b2.onPress = function (){
    this.startDrag();
}
b2.onRelease = box.onReleaseOutside=function (){
    this.stopDrag();
}
b3.onPress = function (){
    this.startDrag();
}
b3.onRelease = box.onReleaseOutside=function (){
    this.stopDrag();
}
b4.onPress = function (){
    this.startDrag();
}
b4.onRelease = box.onReleaseOutside=function (){
    this.stopDrag();
}
b5.onPress = function (){
    this.startDrag();
}
b5.onRelease = box.onReleaseOutside=function (){
    this.stopDrag()
}