Simple example of Flex 4 state transitions: checked/unchecked

– March 16, 2010

I like the simple things. Like Cheerios cereal, one-click-checkout and Flex 4 states. If your only experience with states is with Flex 2/3 then I’ll understand your confusion. But Flex 4 states are a completely different animal than it’s predecessors. Here’s a painfully simple example.

view source

Take a look at the code:

<s:states>
	<s:State name="x_mark" />
	<s:State name="check_mark" />
</s:states>

<s:transitions>
	<!--To: check-mark -->
	<s:Transition toState="check_mark" autoReverse="true">
		<s:Fade targets="{ [ xMark, checkMark ] }" duration="500"/>
	</s:Transition>

	<!--To: X-mark -->
	<s:Transition toState="x_mark" autoReverse="true">
		<s:Fade targets="{ [ xMark, checkMark ] }" duration="500"/>
	</s:Transition>
</s:transitions>

<s:BitmapImage
	id="checkMark"
	source="assets/icons/check_mark.png"
	width="20" height="20"
		includeIn="check_mark"/>

<s:BitmapImage
	id="xMark"
	source="assets/icons/x_mark.png"
	width="20" height="20"
	includeIn="x_mark"/>

Notice in the <Fade> I don’t say anything about fade to alpha=”1″ or alpha=”0″. That’s because the <Fade> assumes that a target that exists but is going to be removed can fade to alpha=”0″ without being told to. And it knows that if a target doesn’t exist and is being added then it will fade to alpha=”1″. That’s going to be the case in the overwhelming majority of cases. So it just does it. No fuss. No muss. :)

I still wouldn’t need to modify the transitions if I wanted to fade to values other than the defaults. I would just use the new property.state syntax like this:

<s:BitmapImage
	id="checkMark"
	source="assets/icons/check_mark.png"
	width="20" height="20"
	alpha.check_mark="0.5"
	includeIn="check_mark"/>

Here I’m just telling the bitmapImage to have an alpha of 0.5 when in the check_mark state. The transition will pick this up and now fade to 0.5 instead of 1.0. No need to go and edit the transition at all.

In fact it’s a bad idea to add specific values to a transition unless you absolutely need to. All the transition should do is describe what states to transition to, the duration, and the effect to use – move, fade, scale, et al.  If you do it that way then it’s simple to edit the transition by just coming back to your component and changing the values.

Also try and avoid using the fromState in your <transition>. Most of the time you won’t care what state you’re coming from. It’s the state your going to that matters.

Lastly, notice the autoReverse=”true” parameter. That enables the transition to be able to back-up without finishing the transition. You can see that if you click on the label/checkmark quickly. It will only fade part of the way and then back-up. No herky-jerky transitions.

I don’t know if it could be any easier than this.

Tags: ,