Flex: Moving canvases between several ui elements

Question

I need to animate a lable movement between 2 canvases...

The mxml example of the code is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()" frameRate="1">

<mx:Script>
    <![CDATA[
        import mx.controls.Label;
        public function main():void
        {

            onEnd();
        }

        private function onEnd():void
        {
            (canv1.getChildAt(0) as Label).move(canv2.x, canv2.y);
        }

    ]]>
</mx:Script>
<mx:Panel x="208" y="0" width="190" height="200" layout="absolute" title="Panel2" id="d">
</mx:Panel>
<mx:Panel width="200" height="200" id="c"  title="Panel 1">
    <mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565">
        <mx:Label text="Move me after event" y="10"/>
    </mx:Canvas>
    <mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA">
    </mx:Canvas>
</mx:Panel>
</mx:Application>

Currently the problem is that the label actually do not leave borders of the first canvas (I see scrollbars instead of it). I think this is related to globalToLocal conversion problems, but do not understand how to use it.

Also another question is how to animate the movement corretly, because move function performs movement without any visible action. (The movement happens seamlessly).

Answer 1

I don't think the move function will solve this for you since it will only move the label within it's parent, just as Robusto has commented above.

The way to go about this would perhaps be to see to it that you first detach the label from its parent. Then move it, and add it as a child to the other canvas. Manipulating x,y coordinates will not implicitly change the parent for you. That will always have to be done explicitly, which is good...

So for example, to actually switch parent you would need to do something like this (pseudo code):

/**
 * This function only switches the parent.
 */
private function moveLabel(label:Label) {
    label.parent.removeChild(label);
    canv2.addChild(label);
}

If you want this action to be animated you would first have to detach the label from the canvas and see to it that it is added to the parent of the canvas, in your case, the panel with id "c". Then you can tween it into position and add it to the correct canvas.

TweenLite is a great library for tweening. http://www.greensock.com/tweenlite/

But I guess the main lesson here is that manipulating coordinates will never result in a new parent for the component you are moving.

Update: Here's a complete example of how you could solve this, take into account that the code is not very nice looking, but it contains a simple example of animation.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="main()">

<mx:Script>
<![CDATA[
    import mx.controls.Label;
    import flash.geom.Point;
    import gs.TweenLite;
    import gs.easing.Expo;

    public function main():void
    {

        onEnd();
    }

    private function onEnd():void
    {
        var label:Label = canv1.getChildAt(0) as Label;
        var originX:int = label.localToGlobal(new Point(label.x, label.y)).x;
        var originY:int = label.localToGlobal(new Point(label.x, label.y)).y;
        label.parent.removeChild(label);
        stage.addChild(label);
        label.x = originX;
        label.y = originY;
        TweenLite.to(label, 1.5, {y: "80", ease:Expo.easeOut, onComplete:onFinishTween, onCompleteParams:[label]});

    }

    private function onFinishTween(label:Label):void {
        stage.removeChild(label);
        label.x = canv2.globalToLocal(new Point(label.x, label.y)).x;
        label.y = canv2.globalToLocal(new Point(label.x, label.y)).y;
        canv2.addChild(label);

    }

]]>
</mx:Script>
<mx:Canvas width="135" height="56" id="canv1" label="c1" themeColor="#79B4DA" backgroundColor="#65D565" y="-1" x="9">
    <mx:Label text="Move me after event" y="10"/>
</mx:Canvas>
<mx:Canvas width="135" height="79" id="canv2" label="C2" backgroundColor="#E4CACA" y="90" x="8">
</mx:Canvas>

</mx:Application>