Resize Panel with animation
<?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
