3 Replies Latest reply on Jul 16, 2009 10:49 AM by tcflex

    Animating addChild

    charlie.jackson

      I'm working on a reasonably simple Flex application that from time to time needs to add new HBox children to a VBox container. I'd like to animate the addition of these new child elements, but I can't seem to get it working right.

       

      I start with a simple VBox like this:

      <mx:VBox id="rootBox">
      </mx:VBox>
      

       

      And I have some basic code to add a child element to this box:

      private function addOne() : void {
           var newBox : HBox = new HBox();
           var lb : Label = new Label();
           lb.text = "some text";
           newBox.addChild(lb);
           rootBox.addChildAt(newBox, 0);
      }
      

       

      All very straight forward, and I'm sure I'm missing something small to get it to animate correctly. Any pointers?

        • 1. Re: Animating addChild
          tcflex Level 1

          hi,

           

          There is nothing wrong in the code. you should add hbox to the vbox. If you want to see any effects, then the effects should be trggired to an actions or events like creation completion event. what kind of animation you are looking for.

           

          Thanks,

          tc.

          • 2. Re: Animating addChild
            charlie.jackson Level 1

            Thanks for the reply. I guess where I'm getting hung up is what action should I be using for this? For example, if I try this

             

            <mx:Move id="moveIt" duration="300"/>

            <mx:VBox id="rootBox" addedEffect="moveIt">

            </mx:VBox>

             

            Nothing happens. Am I missing properties on the Move object? Is addedEffect the wrong action/effect to put this under?

            • 3. Re: Animating addChild
              tcflex Level 1

              hey,

               

              there is no target over here <mx:Move id="moveIt" duration="300"/>

               

              it should be like this

               

              <mx:Move id="moveIt" duration="300" target=""/>

               

              and inside the vbox make it like this

               

              <mx:VBox id="rootBox" mouseDown="moveContainer()">

              </mx:VBox>

               

              inside the script:

               

              private function moveContainer():void {

                              myMove.end();

                              myMove.xTo=mouseX-60;

                              myMove.play();

                          }

               

               

              Here i made use of mouse down event..in the similar way you can use the

              corresponding event..for ex creation complete, addedtostage..e.t.c

               

              Thanks,

              tc.