Flex – ActionScript State Transitions bases on actionscript
Posted on November 15, 2010 | Comments Off on Flex – ActionScript State Transitions bases on actionscript
This is going to be a quick tutorial over using transitions when changing states. It is going to build off the states basics from this tutorial. Again states are very useful in almost all applications and using transitions can put some nice eye candy on your application. This will show some cool transition effects.
To get started you can check out the example below, which shows off what we are going over today. The buttons on the left switch the state, and you can see the transition effects that occur when you click them. You might notice the first set of effects are in series and the second set of effects are performed in parallel.
As usual we start off with some sweet interface action. This includes a of couple things: a panel, toggleButtonBar (a very cool component), and a box which we will add components to. Also in the initial setup we are going to add some script to initialize an array for the possible states of the our application. In ours we just have two. “stateUno” and “stateDos”. Here is the code.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="456" height="360" creationComplete="initApp()"> <mx:Script> <![CDATA[ [Bindable] private var possibleStates:Array; private function initApp():void { possibleStates = new Array(); possibleStates.push("stateUno"); possibleStates.push("stateDos"); stateButtons.selectedIndex = 0; } ]]> </mx:Script> <mx:Panel x="0" y="0" width="456" height="360" layout="horizontal" title="Transitions with States" verticalAlign="middle"> <mx:ToggleButtonBar id="stateButtons" paddingLeft="5" direction="vertical" dataProvider="{possibleStates}"/> <mx:Box id="mainBox" direction="vertical" width="100%" height="100%" backgroundColor="#CE4299" verticalAlign="middle" horizontalAlign="center"/> </mx:Panel> </mx:Application>
The application should be able to compile and run at this time. From here we are going to set up the initial state of the application and change the toggleButtonBar to update the application state. These two new pieces are below.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="456" height="360" creationComplete="initApp()" currentState="stateUno">
And the button bar.
<mx:ToggleButtonBar id="stateButtons" paddingLeft="5" direction="vertical" dataProvider="{possibleStates}" itemClick="{currentState = String(event.item);}"/>
Next, we can setup the states. The first state we just add a big label with the text “State Eins” and the second state again has a label with the text “State Zwei”. This should look very similar to the first tutorial in the series.
<mx:states> <mx:State name="stateUno"> <mx:AddChild relativeTo="{mainBox}" position="firstChild"> <mx:Label text="State Eins" fontSize="18"/> </mx:AddChild> </mx:State> <mx:State name="stateDos"> <mx:AddChild relativeTo="{mainBox}" position="firstChild"> <mx:Label text="State Zwei" fontSize="18"/> </mx:AddChild> </mx:State> </mx:states>
To set up transitions you add a
In our case we used 4 different effects, the first two going from “stateUno” to “stateDos” and in sequence, the second two for the other direction. The second two execute at the same time (parallel) and both have longer durations. This gives us the following transition code.
<mx:transitions> <mx:Transition fromState="stateUno" toState="stateDos"> <mx:Sequence target="{mainBox}"> <mx:WipeDown duration="3000" /> <mx:Glow alphaFrom="1" alphaTo="0" duration="1500" color="#0044FC" strength="30" blurXFrom="15" blurXTo="0" blurYFrom="15" blurYTo="0"/> </mx:Sequence> </mx:Transition> <mx:Transition fromState="stateDos" toState="stateUno"> <mx:Parallel target="{mainBox}"> <mx:WipeUp duration="5000"/> <mx:Blur blurXFrom="15" blurXTo="0" blurYFrom="15" blurYTo="0" duration="5000"/> </mx:Parallel> </mx:Transition> </mx:transitions>
That pretty much completes the code. We end up with the following complete code for our example today.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="456" height="360" creationComplete="initApp()" currentState="stateUno"> <mx:Script> <![CDATA[ [Bindable] private var possibleStates:Array; private function initApp():void { possibleStates = new Array(); possibleStates.push("stateUno"); possibleStates.push("stateDos"); stateButtons.selectedIndex = 0; } ]]> </mx:Script> <mx:Panel x="0" y="0" width="456" height="360" layout="horizontal" title="Transitions with States" verticalAlign="middle"> <mx:ToggleButtonBar id="stateButtons" paddingLeft="5" direction="vertical" dataProvider="{possibleStates}" itemClick="{currentState = String(event.item);}"/> <mx:Box id="mainBox" direction="vertical" width="100%" height="100%" backgroundColor="#CE4299" verticalAlign="middle" horizontalAlign="center"/> </mx:Panel> <mx:states> <mx:State name="stateUno"> <mx:AddChild relativeTo="{mainBox}" position="firstChild"> <mx:Label text="State Eins" fontSize="18"/> </mx:AddChild> </mx:State> <mx:State name="stateDos"> <mx:AddChild relativeTo="{mainBox}" position="firstChild"> <mx:Label text="State Zwei" fontSize="18"/> </mx:AddChild> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="stateUno" toState="stateDos"> <mx:Sequence target="{mainBox}"> <mx:WipeDown duration="3000" /> <mx:Glow alphaFrom="1" alphaTo="0" duration="1500" color="#0044FC" strength="30" blurXFrom="15" blurXTo="0" blurYFrom="15" blurYTo="0"/> </mx:Sequence> </mx:Transition> <mx:Transition fromState="stateDos" toState="stateUno"> <mx:Parallel target="{mainBox}"> <mx:WipeUp duration="5000"/> <mx:Blur blurXFrom="15" blurXTo="0" blurYFrom="15" blurYTo="0" duration="5000"/> </mx:Parallel> </mx:Transition> </mx:transitions> </mx:Application>
And there we have it, the start of a beautiful effectful relationship. If you have any questions drop them below and we will try to answer them.
Tags: mx:Blur | mx:Glow | mx:Parallel | mx:Sequence | mx:Transition | mx:WipeDown