States transition in Flex4
August 13th, 2009
The flex4 framework comes with a new and so much easier way to create transition between the states of your components. I think this is primarily developed to support all the features needed in the new Adobe Flash Catalyst product, but it does a great job for developers too.
I created this little tutorial to demonstrate the using of this new feature in Flex4, first of all create a new project inside FlashBuilder. The following code will be auto generated in the main mxml file of the project, if you don’t have FlashBuilder just copy the code and paste using the IDE of your choice. Remember that you’ll need the Flex 4 SDK.
<?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/halo"
minWidth="1024" minHeight="768">
</s:Application>
First of all we’ll add our states declaration, pretty much the same thing it was on Flex3:
<s:states>
<s:State name="initialState" />
<s:State name="readyState" />
</s:states>
Now let’s add something to test our animation, I’ll just add a Button to switch between states and a SimpleText tag using the new syntax for transitions changing.
<s:SimpleText id="simpleText" x="20" y="50" text="Hello World!" fontSize="54"
alpha.initialState="0" alpha.readyState="1" />
<s:Button id="button" x="110" y="130" label="Press me to fade"
click="{currentState = (currentState=='initialState')?'readyState':'initialState'}"/>
And finally we’ll add the transitions tag, that will specify to flex framework which transition animation should be used when changing our states.
<s:transitions>
<s:Transition>
<s:Parallel target="{simpleText}">
<s:Fade duration="1000" />
</s:Parallel>
</s:Transition>
</s:transitions>
And it’s ready! You can compile and see how magic is our transition between states now, you can also check it below, click on the button to perform the transition:
Below you can check the full code for this, you’ll need the Flex 4 SDK in order to compile it.
<?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/halo"
minWidth="300" minHeight="200">
<s:states>
<s:State name="initialState"/>
<s:State name="readyState"/>
</s:states>
<s:transitions>
<s:Transition>
<s:Parallel target="{simpleText}">
<s:Fade duration="1000" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:SimpleText id="simpleText" x="20" y="50" text="Hello World!" fontSize="54"
alpha.initialState="0" alpha.readyState="1" />
<s:Button id="button" x="110" y="130" label="Press me to fade"
click="{currentState = (currentState=='initialState')?'readyState':'initialState'}"/>
</s:Application>
It’s just a too simple example, but it serves well to explain the utilization of the new states transition scheme, from here you can create any type of animations, moving the items, 3d animations and more.
This type of animation is very useful when dealing with sections changing and other states changes. Is up to you to try and make a good use of it.
Leave a Reply