Using wildcards in Flex 4 state-transitions

– March 31, 2010

Wildcard TransitionsI really wanted to title this post: One <Transition> To Rule Them All. But that wouldn’t be very descriptive. Actually, it would be but only after you had read the post.

Here was the situation I was in:

  • I had lots of components that basically comprised a view stack without being in a view stack
  • I wanted to do a <Fade> transition between each one when a new component came into view
  • I have a state for each component instance

This is very easy to set up. Each component has the properties:

visible.myState="true" visible="false"

So when we’re in myState this particular component will be the only one visible. No problem. Except that I have to have a <Transition toState=”…> to go to each and every state. At least they are all the same but then if I want to change any of the transition details I have to do it to each one. That’s like the definition of sloppy coding. Even if it takes less than a minute to update the entire batch it just goes against the very nature of organized code.

Fortunately you can use a wildcard in the toState parameter:

<Transition toState="*">

Below is a simple example. There are four images stacked on top of each other and a state associated with each. The transition reads like this:

<s:transitions>
	<s:Transition toState="*" autoReverse="true">
		<s:Fade targets="{ [ wolverine, batman,
				ryanStewart, invisibleMan ] }" />
	</s:Transition>
</s:transitions>

An interesting note: I never did run across any documentation on this. I was just stuck in the middle of updating all my transitions -again- and I thought to myself, “Sure would be nice if I could use a wildcard here.” So I just guessed that it might work and tried it. Sure enough it did. 10-out-of-10 to the Flex SDK team for adding this little nugget. Minus several million for not documenting it very well. :)

view source

And by the way: Did anyone ever expect to see Ryan Stewart’s name in a group with Wolverine, Batman and The Invisible Man? :)

Tags: