Defining state transitions
Requirements
User level
All
View states let you vary the content and appearance of an application, typically in response to a user action. When you change view states, Adobe Flex performs all the visual changes to the application at the same time. Since all the changes to a view state occur at the same time, the application can appear to the user to jump from state to state.
Instead, you might want to define a smooth visual change from one state to the next, in which the change occurs over a period of time. Transitions define how a change of view state looks as it occurs on the screen. A transition is one or more effects grouped together to play when a view state change occurs.
Transitions do not replace effects; that is, you can still apply a single effect to a component, and invoke that effect by using an effect trigger, or the playEffect()method.
You use the <mx:Transition> tag to create a transition and customize it by using its fromState, toState and effect properties. The fromState property specifies the view state that you are changing from when you apply the transition, the toState property specifies the view state that you are changing to and the effect property is a reference to the Effect object to play.
In transitions, you can cause effects to play in parallel or in sequence by using the <s:Parallel> and <s:Sequence> tags.
In the following example, you define a transition that is used whenever a state change occurs. This transition is comprised of a parallel effect. A parallel effect is known as a composite effect as it contains other effects. In this example, the parallel effect contains a resize effect and an animate filter effect. A parallel effect's child effects all run at the same time.
The resize effect takes 500 miliseconds to execute and uses an easing function to make the panel bounce when it resizes. The animate filter effect blurs the targert component for 200 milliseconds. The effect is repeated and reversed to remove the blur.
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"
width="340" height="250">
<!-- DefiningStateTransitions -->
<s:layout>
<s:VerticalLayout paddingTop="20"
horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elememnts in a Declarations tag
The Bounce class implements easing functionality, simulating
gravity pulling on and bouncing the target object.
The BlurFilter class lets you soften the details of an image.
These effects are applied below in the Transition class for a view state.
-->
<s:Bounce id="bounce"/>
<s:BlurFilter id="blur"/>
</fx:Declarations>
<s:states>
<s:State name="LoginState"/>
<s:State name="RegisterState"/>
</s:states>
<!--
Use the transitions property (array) of
the Application class to store your transitions.
-->
<s:transitions>
<!-- The Transition class defines a set of effects
that play in response to a change of view state. -->
<mx:Transition>
<!-- Parallel effects execute in unison -->
<s:Parallel>
<!-- Resize effect uses Bounce, defined in Declarations -->
<s:Resize duration="500" easer="{bounce}" target="{loginPanel}"/>
<!-- AnimateFilter effect uses BlurFilter, defined in Declarations -->
<s:AnimateFilter target="{confirm}" bitmapFilter="{blur}" duration="200"
repeatCount="2" repeatBehavior="reverse">
<s:SimpleMotionPath property="blurY" valueFrom="1" valueTo="20"/>
</s:AnimateFilter>
</s:Parallel>
</mx:Transition>
</s:transitions>
<fx:Script>
<![CDATA[
// Import effects and filters
// even if you are only going to use them in MXML
import mx.effects.easing.Bounce;
import spark.filters.BlurFilter;
]]>
</fx:Script>
<s:Panel title.LoginState="Login"
title.RegisterState="Register" id="loginPanel">
<s:VGroup id="loginForm" left="10" top="10" bottom="10" width="250">
<s:Group>
<s:Label text="Username:" baseline="15"/>
<s:TextInput x="80" baseline="15"/>
</s:Group>
<s:Group>
<s:Label text="Password" baseline="15"/>
<s:TextInput x="80" baseline="15"/>
</s:Group>
<s:Group includeIn="RegisterState" id="confirm">
<s:Label text="Confirm:" baseline="15"/>
<s:TextInput x="80" baseline="15"/>
</s:Group>
</s:VGroup>
<!-- Using VGroup instead of Form because of SDK-25628 bug
<mx:Form id="loginForm">
<mx:FormItem label="Username:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem includeIn="RegisterState" label="Confirm:" id="confirm">
<s:TextInput/>
</mx:FormItem>
</mx:Form>-->
<s:controlBarContent>
<mx:LinkButton label="Need to Register?" includeIn="LoginState" click="currentState='RegisterState'" id="registerLink" />
<mx:LinkButton label="Return to Login" includeIn="RegisterState" click="currentState='LoginState'"/>
<mx:Spacer width="100%"/>
<s:Button label="Login" id="registerBtn" includeIn="RegisterState"/>
<s:Button label="Register" id="loginButton" includeIn="LoginState"/>
</s:controlBarContent>
</s:Panel>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
