Using Filter in transition in Flex4


 

Using Filter in transition in Flex4

We can use filter with transition.

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

0

<s:Panel id="loginPanel"

title="Login Form"

chromeColor="#000000"

1

color="#CCCCCC"

backgroundColor="#333333"

width="329"

2

height="235"

x="8" y="8"

x.Register="8"

3

y.Register="245"

click="currentState=''"

visible="true"

4

visible.ForgotPassword="false">

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

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

5

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

<s:TextInput text="[email protected]"

color="#000000"/>

6

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput displayAsPassword="true"

7

text="password"

color="#000000"/>

</mx:FormItem>

8

<mx:FormItem direction="horizontal">

<s:Button id="loginButton"

label="Login" />

9

<s:Button id="reset"

label="Reset" />

</mx:FormItem>

0

</mx:Form>

</s:Panel>

<s:Panel id="forpassPanel"

1

title="Forgot Password"

chromeColor="#FFFFCC"

color="#996600"

2

backgroundColor="#CCCC99"

width="329"

height="235"

3

x="8" y="245"

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

click="currentState='ForgotPassword'"

4

visible="true"

visible.Register="false">

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

5

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

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

<s:TextInput text="[email protected]"

6

color="#000000"/>

</mx:FormItem>

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

7

<s:TextInput text="1234567890"

color="#000000"/>

</mx:FormItem>

8

<mx:FormItem direction="horizontal">

<s:Button id="forpassButton"

label="Get Password" />

9

<s:Button id="reset1"

label="Reset" />

</mx:FormItem>

0

</mx:Form>

</s:Panel>

<s:Panel id="registerPanel"

1

title="Registration Form"

chromeColor="#7578ef"

color="#FFFFFF"

2

backgroundColor="#003366"

width="329" height="235"

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

3

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

click="currentState='Register'"

visible="false"

4

visible.ForgotPassword="true"

visible.Register="true">

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

5

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

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

<s:TextInput text="[email protected]"

6

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Password:">

7

<s:TextInput displayAsPassword="true"

text="password"

color="#000000"/>

8

</mx:FormItem>

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

<s:TextInput displayAsPassword="true"

9

text="password"

color="#000000"/>

</mx:FormItem>

0

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

<s:TextInput text="1234567890"

color="#000000"/>

1

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="registarButton"

2

label="Register" />

<s:Button id="reset2"

label="Reset" />

3

</mx:FormItem>

</mx:Form>

</s:Panel>

4

</s:Group>

</s:Panel>

</s:Application>

5

Output:

Running Application:

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

Download this code

Ads