0 Replies Latest reply on Mar 22, 2010 9:43 AM by dcdieci10

    effect is applied just one time

    dcdieci10

      Hello,

       

      I am just starting to learn Flex, but I am experiencing a weird behavior.

      I want to apply a resize effect on a hbox as soon as a login button is clicked (more precisely. I want a panel to slide down for login).

      For this reason I am using transitions combined with states and add a new child element.

      The problem is that the resize effect for the hbox ist just applied once for the slide down action. When I click the new LinkButton to collapse (currentState=' ') the hbox the effect is not longer applied.

       

       

       

      <mx:states>
      
      
      <mx:State name="login" basedOn="">
      
      <mx:AddChild relativeTo="
      
      {topPanel}"position="
      
      before"creationPolicy="
      
      all">
      
      
      <mx:VBox width="100%" horizontalAlign="center" styleName="userPanelWrapper">
      
      <mx:HBox width="80%" paddingBottom="20" paddingTop="20" id="userPanel">
      
      <mx:LinkButton label="Return to Login" click="currentState=''"/>
      
      </mx:HBox>
      
      
      </mx:VBox>
      
      </mx:AddChild>
      
      
      </mx:State></mx:states>
      
      
      <!-- Define the view state transition -->
      <mx:transitions>
      
      <!-- The fade out effect is accomplished by adding a sequence with the 
      RemoveChildAction after the effect -->
      
      <mx:Transition fromState="*" toState="*">
      
      <mx:Sequence target="{[userPanel]}">
      
      <mx:Parallel target="{[userPanel]}">
      
      <mx:Fade duration="200"/>
      
      <mx:Resize easingFunction="Linear.easeOut" duration="4000"/>
      
      </mx:Parallel>
      
      <mx:RemoveChildAction/>
      
      </mx:Sequence>
      
      </mx:Transition></mx:transitions>
      
      
      
      
      <mx:VBox width="100%" horizontalAlign="center" height="100%" verticalGap="0" id="wrapper" >
      
      
      <!-- top Panel -->
      
      <mx:VBox width="100%" horizontalAlign="center" id="topPanel" styleName="topPanel" >
      
      
      <mx:HBox width="80%" height="30">
      
      <mx:LinkButton id="registerButton" styleName="registerButton" icon="{registerButtonIcon}" label="REGISTER" />
      
      <mx:LinkButton id="loginButton" styleName="loginButton" label="LOGIN" click="currentState='login'" />
      
      <mx:LinkButton id="userSettingsButton" styleName="userSettingsButton" label="SETTINGS" />
      
      </mx:HBox>
      
      </mx:VBox>
      
      </mx:VBox>
      
      


      Any help is appreciated.

      Thanks in advance.