Home Tutorial Flex Flex4 Components Transition in Flex4

 
 

Transition in Flex4
Posted on: July 10, 2010 at 12:00 AM
Advertisement
When we change one state to another and perform a effect during change state tihs is done by using Transition.

Transitions in Flex4:

When we change one state to another and perform a effect during change state tihs is done by using Transition. You performs effect When you change state it will possible only by transitions. You can define multiple transition in your application. You will use the three property for perform effect during change state which are following:

1. fromState
2. toState
3. effect
The default value of these properties is *. The syntax is given below:

<s:transitions>
<s:Transition id="register" fromState="Login">
<s:Sequence>
<s:Fade/>
<s:Move/>
</s:Sequence>
</s:Transition>
<s:Transition id="login" fromState="Register">
<s:Sequence duration="1000">
<s:Fade/>
<s:Move/>
</s:Sequence>
</s:Transition>
</s:transitions>

In this example you can see how we can use the transition in your flex application.

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

<fx:Script>

<![CDATA[

import mx.events.IndexChangedEvent;

private function applyTheme(e:Event):void {

if (e.currentTarget.selectedItem == "Theme1") {

pan.setStyle("backgroundColor", 0x333333);

pan.setStyle("chromeColor", 0x000000);

pan.setStyle("baseColor", 0x4C4C4C);

pan.setStyle("color", 0xCCCCCC);

pan.setStyle("contentBackgroundColor", 0x555555);

pan.setStyle("symbolColor", 0xFFFFFF);

pan.setStyle("rollOverColor", 0x666666);

pan.setStyle("selectionColor", 0x999999);

pan.setStyle("focusColor", 0xEEEEEE);

pan.setStyle("fontFamily", "Arial");

} else if(e.currentTarget.selectedItem == "Theme2"){

pan.setStyle("backgroundColor", 0xCCCC99);

pan.setStyle("chromeColor", 0xFFFFCC);

pan.setStyle("baseColor", 0x999966);

pan.setStyle("color", 0x996600);

pan.setStyle("contentBackgroundColor", 0xFFFFCC);

pan.setStyle("symbolColor", 0x663300);

pan.setStyle("rollOverColor", 0xFFEE88);

pan.setStyle("selectionColor", 0xFFCC66);

pan.setStyle("focusColor", 0xCC9900);

pan.setStyle("fontFamily", "Helvetica");

} else{

pan.setStyle("backgroundColor", 0x003366);

pan.setStyle("chromeColor", 0x7578ef);

pan.setStyle("baseColor", 0x999966);

pan.setStyle("color", 0xFFFFFF);

pan.setStyle("contentBackgroundColor", 0x7578ef);

pan.setStyle("symbolColor", 0xFFFFFF);

pan.setStyle("rollOverColor", 0x2b36c4);

pan.setStyle("selectionColor", 0x366fef);

pan.setStyle("focusColor", 0x888888);

pan.setStyle("fontFamily", "Verdana");

}

}

]]>

</fx:Script>

<s:states>

<s:State name="Login"/>

<s:State name="Register"/>

</s:states>

<!-- Define Transition-->

<s:transitions>

<s:Transition id="register" fromState="Login">

<s:Sequence>

<s:Resize target="{pan}" heightTo="585" widthTo="400">

<s:easer>

<s:Sine/>

</s:easer>

</s:Resize>

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

targets="{[txt1,txt2,txt3,txt4,txt5,

txt6,txt7,txt8,txt9,dob,drp,condition]}"

duration="2000"/>

<mx:Blur blurXFrom="0.0"

blurXTo="10.0"

blurYFrom="0.0"

blurYTo="10.0"

targets="{[btn,btn1,male,female,gen1,gen2]}"/>

<mx:Blur blurXFrom="10.0"

blurXTo="0.0"

blurYFrom="10.0"

blurYTo="0.0"

targets="{[btn,btn1,male,female,gen1,gen2]}"/>

</s:Sequence>

</s:Transition>

<s:Transition id="login" fromState="Register">

<s:Sequence duration="1000">

<s:Fade alphaFrom="1.0"

alphaTo="0.0"

targets="{[txt1,txt2,txt3,txt4,txt5,

txt6,txt7,txt8,txt9,dob,drp,condition]}"/>

<s:Resize target="{pan}">

<s:easer>

<s:Sine/>

</s:easer>

</s:Resize>

<s:Parallel>

<s:Fade alphaFrom="0.0"

alphaTo="1.0" targets="{[txt4,txt5]}"/>

<mx:Blur blurXFrom="0.0"

blurXTo="10.0"

blurYFrom="0.0"

blurYTo="10.0"

targets="{[btn,btn1]}"/>

</s:Parallel>

<mx:Blur blurXFrom="10.0"

blurXTo="0.0"

blurYFrom="10.0"

blurYTo="0.0"

targets="{[btn,btn1]}"/>

</s:Sequence>

</s:Transition>

</s:transitions>

<s:Panel id="pan" title="Transition Example" width="400">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:ApplicationControlBar width="398">

<s:Label id="theame" text="Choose a Theme for apply:"/>

<s:DropDownList id="drp1" prompt="--Select Themes--"

change="applyTheme(event)" width="137">

<s:dataProvider>

<s:ArrayList source="[Theme1,Theme2,Theme3]"/>

</s:dataProvider>

</s:DropDownList>

</mx:ApplicationControlBar>

<mx:Form id="registrationform">

<mx:FormHeading id="headlogin" label="Login Form"

fontSize="18"

fontFamily="verdhana"

label.Register="Registration Form"/>

<mx:FormItem id="Fi1" label="User Name:" required="true"

includeIn="Register">

<mx:TextInput id="txt1"

text="User Name"

fontStyle="italic"

styleName="image"/>

</mx:FormItem>

<mx:FormItem id="Fi2" label="First Name:" includeIn="Register">

<mx:TextInput id="txt2"

text="First Name" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi3" label="Last Name:" includeIn="Register">

<mx:TextInput id="txt3"

text="Last Name" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi4" label="Email-ID:" required="true">

<mx:TextInput id="txt4"

text="Email ID" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi5" label="Password:" required="true" >

<mx:TextInput id="txt5"

text="Password" displayAsPassword="true"/>

</mx:FormItem>

<mx:FormItem id="Fi6" label="Confirm Password:"

required="true" includeIn="Register">

<mx:TextInput id="txt6"

text="Confirm Password"

displayAsPassword="true"/>

</mx:FormItem>

<mx:FormItem id="Fi7" label="Gender:" includeIn="Register">

<s:HGroup>

<s:RadioButton id="male" groupName="gen"

label="Male" selected="true"/>

<s:RadioButton id="female"

groupName="gen" label="Female"/>

</s:HGroup>

</mx:FormItem>

<mx:FormItem id="Fi8" label="Marital Status:" includeIn="Register">

<s:HGroup>

<s:RadioButton id="gen1" label="Single" selected="true"/>

<s:RadioButton id="gen2" label="Married"/>

</s:HGroup>

</mx:FormItem>

<mx:FormItem id="Fi9" label="D.O.B.:" required="true"

includeIn="Register">

<mx:DateField id="dob" text="Select Date" fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi10" label="Address:" includeIn="Register">

<mx:TextInput id="txt7" text="Address line 1"

fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi11" includeIn="Register">

<mx:TextInput id="txt8" text="Address line 2"

fontStyle="italic"/>

</mx:FormItem>

<mx:FormItem id="Fi12" label="City:" includeIn="Register">

<mx:TextInput id="txt9" text="City"

fontStyle="italic"/>

</mx:FormItem >

<mx:FormItem id="Fi13" label="State:" includeIn="Register">

<s:DropDownList id="drp" width="161" prompt="Select State">

<s:ArrayCollection>

<fx:String>Uttar Predesh</fx:String>

<fx:String>Delhi</fx:String>

<fx:String>Hariyana</fx:String>

<fx:String>Maharastra</fx:String>

<fx:String>Punjab</fx:String>

</s:ArrayCollection>

</s:DropDownList>

</mx:FormItem >

<mx:FormItem id="Fi14" includeIn="Register">

<s:CheckBox id="condition"

label="I accept the term and conditions"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="btn" label="Login"

label.Register="Register"/>

<s:Button id="btn1" label="Reset"/>

</mx:FormItem>

<mx:FormItem>

<mx:Spacer width="100%"/>

<mx:LinkButton id="registerlinkButton"

label="GO for Registration?"

label.Register="Return to Login"

click="currentState='Register'"

click.Register="currentState=''"/>

</mx:FormItem>

</mx:Form>

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

Advertisement

Related Tags for Transition in Flex4:


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.

Posted on: July 10, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com