Share on Google+Share on Google+

Using Filter in transition in Flex4

Advertisement
We can use filter with transition.

Using Filter in transitions in Flex4:

We can use filter with transition. You will use some value of  filter for perform effect during change state which are following:

1. add
2. hide
3. move
4. remove
5. resize
6. show

The syntax are following:

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

In this example you can see how we can use filter with transition.

Example:

<?xml version="1.0" encoding="utf-8"?>

<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>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Posted on: July 10, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.