Resize with easing function

         
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  verticalAlign="middle">
  <mx:Script>
    
        import mx.effects.easing.Bounce;
      
  </mx:Script>
  <mx:transitions>
    <mx:Transition>
      <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
        <mx:Resize duration="500" easingFunction="Bounce.easeOut" />
      </mx:Parallel>
    </mx:Transition>
  </mx:transitions>
  <mx:states>
    <mx:State name="Register">
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem id="confirm" label="Confirm:">
          <mx:TextInput />
        </mx:FormItem>
      </mx:AddChild>
      <mx:RemoveChild target="{registerLink}" />
      <mx:AddChild relativeTo="{spacer1}" position="before">
        <mx:LinkButton label="Return to Login" click="currentState=''" />
      </mx:AddChild>
    </mx:State>
  </mx:states>
  <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Form id="loginForm">
      <mx:FormItem label="Username:">
        <mx:TextInput />
      </mx:FormItem>
      <mx:FormItem label="Password:">
        <mx:TextInput />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar>
      <mx:LinkButton id="registerLink" label="Need to Register?" click="currentState='Register'" />
      <mx:Spacer width="100%" id="spacer1" />
      <mx:Button label="Login" id="loginButton" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

Related examples in the same category

1.	Using a custom easing function
2.	Creating a custom easing function
3.	Easing Demo
4.	Bounce and Elastic easing classes

Resize with easing function : Easing « Effects « Flex

Related examples in the same category