State Transitions in Adobe Flex - Blur

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Unlike desktop applications, that are free to create multiple separate windows, Flex applications are generally bound to a single window. This can either be an AIR application window, or the web page in which a Flash applet is embedded.

States are used in Flex in place of multiple windows. These states define what controls are visible within the one display at any one time. In keeping with the long tradition of Flash in producing eye catching interfaces, state transitions are used to add some flair to the process of moving from one state to the next. There are dozens of effects to choose from, and these can be combined in almost unlimited ways. This tutorial will show you how to add a simple blur effect to a state transition.

Controls added as children of the Application element are added to the base state. These controls are then inherited by any additional state that is defined in the application (although it is possible for child states to remove the controls defined by its parent). Here we define two buttons in the base state. They both modify the Application currentState property, which is how a new state is enetered into in Flex.

<mx:Button x="10" y="352" label="State 1" click="{Application.application.currentState = 'State1';}"/>

<mx:Button x="83" y="352" label="State 2" click="{Application.application.currentState = 'State2';}"/>

In order to demonstrate state transitions, we first need some states to move between. The markup below creates two states, State1 and State2. Notice that the names of the states is the same as the strings supplied to the Application currentState property in step 1.

Both states add some random UI controls that don't do anything themselves - they just serve to create interfaces that might be found in a Flex application.

<mx:states>

<mx:State name="State1">

<mx:AddChild position="lastChild">

<mx:Image source="@Embed(&quot;../media/image1.jpg&quot;)" scaleContent="true" x="10" y="10" width="460" height="279"/>

</mx:AddChild>

<mx:AddChild position="lastChild">

<mx:ProgressBar x="10" y="297" width="460"/>

</mx:AddChild>

</mx:State>

<mx:State name="State2">

<mx:AddChild position="lastChild">

<mx:DateChooser x="10" y="10"/>

</mx:AddChild>

<mx:AddChild position="lastChild">

<mx:TextArea x="192" y="10" width="278" height="334" text="This is a test. Testing, testing, 123."/>

</mx:AddChild>

</mx:State>

</mx:states>

The effects applied when transitioning from one state to the next are defined in the transitions element. Inside this element we add a Transition element, and define that the effects defined by this transition will apply when moving from any state (fromState="*") to any other state (toState="*"). You can limit which states the effect will apply to by supply the state names to the fromState and toState attributes.

We then add a new Blur element. This will cause the element (and it's children) referenced by the target attribute to be displayed with a progressive blurriness as defined by the blurYFrom and blurYTo (for the vertical blur factor), and blurXFrom and blurXTo (for the horizontal blur factor) over the time defined by the duration attribute.

That was a bit of a mouthful, but the end result is that the entire Application (because the target attribute is set to this - a reference to the Flex Application) will start out being blurred by a factor of 20 (the blurYFrom and blurXFrom attributes) into focus (the blurYFrom and blurXFrom attributes set to 1.0) over 200 milliseconds (the duration attribute) when the states are changed.

<mx:transitions>

<mx:Transition fromState="*" toState="*">

<mx:Blur target="{this}" duration="200" blurYFrom="20.0" blurYTo="1.0" blurXFrom="20.0" blurXTo="1.0" />

</mx:Transition>

</mx:transitions>

Add the following attribute to the Application element.

currentState="State1"

This sets State1 as the initial state for the application.

The state transition presented here was very simple, and much more complex effects can be used when moving from one state to the next. However, with just a few lines of code it has been possible to create an eye catching effect that keeps the tradition of flashy Flash interfaces alive.

Go back to the Tutorial Index

Using the Flex ProgressBar

This tutorial shows you how to show the progress of a network transfer using the ProgressBar.