<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:states>

<s:State name="default"/>

<s:State name="ForgotPassword"/>

<s:State name="Register"/>

</s:states>

<s:transitions>

<s:Transition fromState="*" toState="*">

<s:Sequence targets="{[loginPanel,forpassPanel,registerPanel]}">

<s:Sequence id="firstSequence" filter="hide" >

<mx:Blur blurXFrom="1.0" blurXTo="20.0" blurYFrom="1.0" blurYTo="20.0"/>

<s:Fade alphaFrom="1.0" alphaTo="0.0"/>

<s:SetAction property="visible" value="false"/>

</s:Sequence>

<s:Move filter="move"/>

<s:Sequence id="secondSequence" filter="show" >

<s:SetAction property="visible" value="true"/>

<mx:Blur blurXFrom="20.0" blurXTo="1.0" blurYFrom="20.0" blurYTo="1.0"/>

<s:Fade alphaFrom="0.0" alphaTo="1.0"/>

</s:Sequence>

</s:Sequence>

</s:Transition>

</s:transitions>

<s:Panel title="Filter in transition Example" width="349" height="525">

<s:Group id="logpassreg" width="100%" height="100%">

<s:Panel id="loginPanel"

title="Login Form"

chromeColor="#000000"

color="#CCCCCC"

backgroundColor="#333333"

width="329"

height="235"

x="8" y="8"

x.Register="8"

y.Register="245"

click="currentState=''"

visible="true"

visible.ForgotPassword="false">

<mx:Form x="34" y="0">

<mx:FormHeading label="Login Form"/>

<mx:FormItem label="Email Id:">

<s:TextInput text="abc@xyz.com"

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput displayAsPassword="true"

text="password"

color="#000000"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="loginButton"

label="Login" />

<s:Button id="reset"

label="Reset" />

</mx:FormItem>

</mx:Form>

</s:Panel>

<s:Panel id="forpassPanel"

title="Forgot Password"

chromeColor="#FFFFCC"

color="#996600"

backgroundColor="#CCCC99"

width="329"

height="235"

x="8" y="245"

x.ForgotPassword="8" y.ForgotPassword="8"

click="currentState='ForgotPassword'"

visible="true"

visible.Register="false">

<mx:Form x="18" y="20">

<mx:FormHeading label="Forgot Password"/>

<mx:FormItem label="Email Id:">

<s:TextInput text="abc@xyz.com"

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Phone No.:">

<s:TextInput text="1234567890"

color="#000000"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="forpassButton"

label="Get Password" />

<s:Button id="reset1"

label="Reset" />

</mx:FormItem>

</mx:Form>

</s:Panel>

<s:Panel id="registerPanel"

title="Registration Form"

chromeColor="#7578ef"

color="#FFFFFF"

backgroundColor="#003366"

width="329" height="235"

x.ForgotPassword="8" y.ForgotPassword="245"

x.Register="8" y.Register="8"

click="currentState='Register'"

visible="false"

visible.ForgotPassword="true"

visible.Register="true">

<mx:Form x="13" y="0">

<mx:FormHeading label="Registration Form"/>

<mx:FormItem label="Email Id:">

<s:TextInput text="abc@xyz.com"

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput displayAsPassword="true"

text="password"

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Confirm Password:">

<s:TextInput displayAsPassword="true"

text="password"

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Phone No.:">

<s:TextInput text="1234567890"

color="#000000"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="registarButton"

label="Register" />

<s:Button id="reset2"

label="Reset" />

</mx:FormItem>

</mx:Form>

</s:Panel>

</s:Group>

</s:Panel>