When we change one state to another and perform a effect during change state tihs is done by using Transition.
When we change one state to another and perform a effect during change state tihs is done by using Transition.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.
<?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> |
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.