Flex - objects floating at the top of a canvas?

Question

Hi, I want to have a canvas with some "floating" property. Basically when I add child to it, the child should float at the top. When I add the second child, it should float above the previous one.

For example the canvas width is 100, and I have two VideoDisplay with width 100 and height 75.

canvas.addChild(video0); 
// Or canvas.addChildAt(video0, 0); 
// video0 should be at x=0 and y=0
canvas.addChild(video1);
// Or canvas.addChildAt(video1, 1);
// video1 should be at x=0 and y=0, while video0 x=0 and y=75

I am not sure if this is do-able, via Flex SDK or any third-party library? Thanks.

Answer 1

What you need to do is create a function that takes a DisplayObject, repositions the other children and then adds the child.

private var displayObjects:ArrayCollection;

public function addFloatingChild(object:displayObject):void
{
    // loop through displayObjects to set new positions
    for(var i:uint; i < displayObjects.length; i++)
    {
        // logic for new position
    }

    // keep reference to child
    displayObjects.addItemAt(object, 0);

    // this will always put on top of other children
    // this will always position at 0, 0
    this.addChild(object);
}

Answer 2

I just googled a little, and found a very helpful third-party library flexlib. For those having the same demand, flexlib offers a FlowContainer that will meet your need.