<?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.

Flash Catalyst still having the same impression we had from the Thermo days, it seems a great tool, have a lot of potential, but we need to see it ready to know how well it will perform in some real projects in the real world.
By now the whole tool is too rough yet and is looking much more like just an intermediate tool to help the transition between designer-programmer, the main problem is that it’s not looking like a designer friendly application and this is a key point for the future success of the product. Maybe I’m just hopeful that we can take some work from the hands of overloaded programmers and give designers a new and important role in the production phase.

On the other hand I had the new Flash Builder that is essentially an improved version of Flex Builder 3. There are some nice new features, but it still the same application and I think that it does the job for this actualization, mainly because the great star of this release is the new spark components architecture, it has a new and so much easier skinning system and many other features that I hope to show in the future posts of this blog.

In my opinion the new Flex4 platform emerges as a new and nice solution for the future of web projects, it’s essential to every Flash/Flex coder get to know it and let’s see where it will lead us to.