Panel's appearance and actual width out of sync after resize effect

[rexdtripod]

Actually the title of the post isn't quite accurate. The panel width is fine.

I have a constraints problem. I want to anchor a button upper right in a panel (in the titleBar, not the content area) but my button isn't staying there after I use a resize effect on the panel.

The only way I know to get a button up top in a panel is to put it in the titleBar. If I want it to be anchored I'll have to put it in a container that supports constraints, like a Canvas, before putting it in the titleBar. When I do this, constraints seem to go out the window. They work somewhat but behave abnormally.

Here's a sample app (2 files) implementing this approach. Compile and click the button at the bottom. The large panel on the right with the button in its titleBar is supposed to shrink and hide behind the little video window on the left. It does, but the button in its titleBar doesn't go along for the ride. It just hangs in space outside the panel. It's not constrained. Is there another approach to this?

Main app file (constraints.mxml) followed by custom panel file (CustomPanel.mxml)...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="*"
    layout="absolute"
    initialize="init()">
    <mx:Script>
        <![CDATA[       
            [Bindable]
            private var vidX:Number;
            [Bindable]
            private var vidY:Number;
            [Bindable]
            private var vidW:Number;
            [Bindable]
            private var vidH:Number;
            [Bindable]
            private var panelX:Number;
            [Bindable]
            private var panelY:Number;
            [Bindable]
            private var panelW:Number
            [Bindable]
            private var panelH:Number;

            private var open:Boolean = true;
           
            public function init():void
            {
                vidX = 20;
                vidY = 20;
                vidW = 180;
                vidH = 120;               
                panelX = 202;
                panelY = 20;
                panelW = 500;
                panelH = 350;              
           
            }
           
            private function onButtonClick(e:MouseEvent):void
            {
                if(open)
                {
                    inAndDownSize.play();
                    open = false;
                }
                else
                {
                    outAndUpSize.play();
                    open = true;
                }
            }            
        ]]>
    </mx:Script>
   
    <!--  Effects -->
    <mx:Parallel id="outAndUpSize"
        duration="200">
        <mx:Move
            target="{panel}"
            xFrom="{vidX}" xTo="{panelX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{panelW}" heightTo="{panelH}"/>   
    </mx:Parallel>
    <mx:Parallel id="inAndDownSize">
        <mx:Move
            target="{panel}"
            xFrom="{panelX}" xTo="{vidX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{vid.width}" heightTo="{vid.height}"/>
    </mx:Parallel>
   
    <!--UI elements -->
    <custom:CustomPanel id="panel"
        x="{panelX}" y="{panelY}"
        width="{panelW}" height="{panelH}"
        layout="absolute">
    </custom:CustomPanel>   
    <mx:VideoDisplay id="vid"
        x="{vidX}" y="{vidY}"
        width="{vidW}" height="{vidH}"/>
    <mx:Button
        label="Click"
        horizontalCenter="0"
        bottom="10"
        click="onButtonClick(event)"/>   
</mx:Application>

CustomPanel.mxml...

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    initialize="init()"
    creationComplete="onCreationComplete()">   
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.controls.Button;       
            private var button:Button = new Button();
            private var canvas:Canvas = new Canvas();
            private var style:CSSStyleDeclaration = new CSSStyleDeclaration();   
           
            private function onCreationComplete():void
            {
                canvas.width = parent.width;
                canvas.height = parent.height;               
                style.setStyle("left", 400);
                button.id = "button";
                button.label = "b";
                button.width = 30;
                button.height = 30;               
                button.styleDeclaration = style;
                canvas.addChild(button);
                this.titleBar.addChild(canvas);
            }   
        ]]>
    </mx:Script>   
</mx:Panel>

[Inigoesdr]

I'm not sure exactly what you're going for, but there are two options for what I think you want.

Option1 - Bind the button's x/y to the panel somehow:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="*"
    layout="absolute"
    initialize="init()">
    <mx:Script>
        <![CDATA[       
            [Bindable]
            private var vidX:Number;
            [Bindable]
            private var vidY:Number;
            [Bindable]
            private var vidW:Number;
            [Bindable]
            private var vidH:Number;
            [Bindable]
            private var panelX:Number;
            [Bindable]
            private var panelY:Number;
            [Bindable]
            private var panelW:Number
            [Bindable]
            private var panelH:Number;

            private var open:Boolean = true;
           
            public function init():void
            {
                vidX = 20;
                vidY = 20;
                vidW = 180;
                vidH = 120;               
                panelX = 202;
                panelY = 20;
                panelW = 500;
                panelH = 350;           
           
            }
           
            private function onButtonClick(e:MouseEvent):void
            {
                if(open)
                {
                    inAndDownSize.play();
                    open = false;
                }
                else
                {
                    outAndUpSize.play();
                    open = true;
                }
            }            
        ]]>
    </mx:Script>
   
    <!--  Effects -->
    <mx:Parallel id="outAndUpSize"
        duration="200">
        <mx:Move
            target="{panel}"
            xFrom="{vidX}" xTo="{panelX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{panelW}" heightTo="{panelH}"/>   
    </mx:Parallel>
    <mx:Parallel id="inAndDownSize">
        <mx:Move
            target="{panel}"
            xFrom="{panelX}" xTo="{vidX}"/>
        <mx:Resize
            target="{panel}"
            widthTo="{vid.width}" heightTo="{vid.height}"/>
    </mx:Parallel>
   
    <!--UI elements -->
    <custom:CustomPanel id="panel"
        x="{panelX}" y="{panelY}"
        width="{panelW}" height="{panelH}"
        layout="absolute">
    </custom:CustomPanel>   
    <mx:VideoDisplay id="vid"
        x="{vidX}" y="{vidY}"
        width="{vidW}" height="{vidH}"/>
    <mx:Button
    	x="{panel.x + panel.height - 125}"
    	y="{panel.y + panel.width - 50}"
        label="Click"
        click="onButtonClick(event)"/>   
</mx:Application>

Option 2 - Change the button's x/y inside of your <Parallel> tag effects.