Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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)...
    Code:
    <?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...

    Code:
    <?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>
    Last edited by rexdtripod; 11-04-2009 at 12:07 AM. Reason: I initially assessed the problem incorrectly

  • #2
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,638
    Thanks
    2
    Thanked 404 Times in 396 Posts
    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:
    Code:
    <?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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •