0 Replies Latest reply on Mar 24, 2010 11:23 AM by rfkrocktk

    Flex 4: Animating the addition of a child to a container.

    rfkrocktk

      I'm trying to animate a simple component and am having difficulties animating the addition of child to a component. Basically, I've defined two states, "up" and "over." What I'd like to have happen is, when transitioning to the "over" state, is have the main container first resize to the size it needs to be to contain the label which is only present in the "over" state, then fade in the label. My code in progress is below:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 rollOver="currentState='over'"
                 rollOut="currentState='up'">
           
           <s:states>
                <s:State name="up"/>
                <s:State name="over"/>
           </s:states>
           
           <s:transitions>
                <s:Transition fromState="up" toState="over">
                     <s:Sequence duration="1000">
                          <s:Parallel>
                               <s:Resize target="{hgroup}"/>
                               <s:AddAction target="{hgroup}"/>
                          </s:Parallel>
                          <s:Fade alphaFrom="0" alphaTo="1" target="{label}"/>
                     </s:Sequence>
                </s:Transition>
                <s:Transition fromState="over" toState="up">
                     <s:Sequence duration="1000">
                          <s:RemoveAction target="{hgroup}"/>
                          <s:Fade alphaFrom="1" alphaTo="0" target="{label}"/>
                          <s:Resize target="{hgroup}"/>
                     </s:Sequence>
                </s:Transition>
           </s:transitions>
           
           <s:Rect width="100%" height="100%" radiusX="10"
                     radiusY="10">
                <s:fill>
                     <s:SolidColor color="#FFFF99"/>
                </s:fill>
           </s:Rect>
           
           <s:HGroup id="hgroup" left="5" right="5" top="5" bottom="5"
                     verticalAlign="middle">
                <s:Rect width="50" height="50" radiusX="5" radiusY="5">
                     <s:fill>
                          <s:SolidColor color="#000000"/>
                     </s:fill>
                </s:Rect>
                <s:Label id="label" text="Hello World!" includeIn="over"/>
           </s:HGroup>
      </s:Group>
      

       

       

      If you compile and run this code, you'll see that the transition from "over" to "up" works perfectly. The label is faded out, then the whole component is resized to be its original width. However, the transition from "up" to "over" is not working. It basically immediately resizes "hgroup" to the size it would need to be to contain "label," then fades in the label.

       

      The goal is to have it resize "hgroup" to the destination size via the provided Spark Resize animation, then fade in "label". Can anyone help me figure out why my code isn't working properly to do this?