4 Replies Latest reply on Jul 10, 2009 4:52 PM by Mike6679

    How to dynamically move component between 2 HBox's smoothly?

    Mike6679 Level 1

      I have a HBox1 with 2 components in it and  HBox2 with 2 components in it. How do I move a component (dynamically at run time) from HBox1 to HBox2?

      Now, I can do it with state transitions but its not smooth , it just disappears from HBox1 and appears in HBox2. I also tried changing a component's  x and y coordinates  from HBox1 but it of course can only move within the confines of its parent HBox.

        • 1. Re: How to dynamically move component between 2 HBox's smoothly?
          rtalton Level 4

          I would just fade it out, set it's visibilty to false, removeChild from HBox1, addChild to HBox2, set it's visibility to true and fade in.

          Not the same as making it appear to "fly" between positions, but that would get a little involved.

          • 2. Re: How to dynamically move component between 2 HBox's smoothly?
            rtalton Level 4

            Ok, it's a little more involved than I indicated. It involves setting up your transition correctly.

            Here's a sample showing you how to do a smooth state transition while moving a child from one HBox to a second HBox.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
            <mx:Script>
                <![CDATA[
                    [Embed(source="assets/images/car.jpg")]
                    [Bindable]
                    public var imgCar:Class;
                    private function switchStates(event:MouseEvent):void{
                        if (currentState == null || currentState == '' ){
                            currentState = 'StateTwo';
                        }else{
                            currentState = '';
                        }
                    }
                ]]>
            </mx:Script>
                <mx:states>
                    <mx:State name="StateTwo">
                        <mx:RemoveChild target="{image1}"/>
                        <mx:AddChild relativeTo="{hbox2}" position="lastChild">
                            <mx:Image source="{imgCar}" id="image2"/>
                        </mx:AddChild>
                    </mx:State>
                </mx:states>
                <mx:transitions>
                    <mx:Transition fromState="" toState="StateTwo">
                        <mx:Sequence>               
                            <mx:Fade target="{image1}" duration="500" alphaFrom="1.0" alphaTo="0"/>
                            <mx:RemoveChildAction target="{image1}"/>
                            <mx:AddChildAction target="{image2}" relativeTo="{hbox2}" position="lastChild"/>
                            <mx:Fade target="{image2}" duration="500" alphaFrom="0" alphaTo="1.0"/>
                        </mx:Sequence>
                    </mx:Transition>
                    <mx:Transition fromState="StateTwo" toState="">
                        <mx:Sequence>               
                            <mx:Fade target="{image2}" duration="500" alphaFrom="1.0" alphaTo="0"/>
                            <mx:RemoveChildAction target="{image2}"/>
                            <mx:AddChildAction target="{image1}" relativeTo="{hbox1}" position="lastChild"/>
                            <mx:Fade target="{image1}" duration="500" alphaFrom="0" alphaTo="1.0"/>
                        </mx:Sequence>
                    </mx:Transition>
                </mx:transitions>
               
                <mx:HBox x="5" y="3" width="210" height="160" id="hbox1" borderStyle="solid">
                    <mx:Image id="image1" source="{imgCar}"/>
                </mx:HBox>
               
                <mx:HBox width="210" height="160" x="193" y="166" id="hbox2" borderStyle="solid">
                </mx:HBox>
                <mx:Button x="16" y="258" label="Switch Position" click="switchStates(event)"/>
               
            </mx:Application>

            • 3. Re: How to dynamically move component between 2 HBox's smoothly?
              Mike6679 Level 1

              Thanks for the quick reply rtalton ,and the code , but I I'm going to try and see If I can make it "fly" between the 2 HBoxes or at least something close. I'll post code if I can figure it out....

              • 4. Re: How to dynamically move component between 2 HBox's smoothly?
                Mike6679 Level 1

                Ok I think I found a workaround. I'm going to *simulate* moving a component (a button in my case)  from one HBox to another by creating a button on TOP of the button I need to move. So this button in NOT inside HBox1 or in other words will have a Z-index higher than that of HBox1 so its not confined by its dimensions and its free to move about the stage to the other HBox(2) where it will move into it and disappear. Then I will add a child (Button) to HBox2.  This should all look very seamless.