I commonly have in and out transitions for almost every view, sub view, and even component in my project. I often write my projects in pure AS3, so each class gets a transitionIn() and transitionOut() method dispatching completion events so I can synchronize transitions across views. All my mojo happens with TweenMax and clients love it.

I’ve been doing a lot more Spark skinning in Flex projects, so I was curious how I could accomplish the same using States, Transitions, and the newer Spark animation stuff.

All the examples I’ve found are flat….the component manages it’s own states and directly transitions the children on its stage. Maybe I’m a dork, but my stuff isn’t so simple. When state changes in a component, it often needs to initiate in/out transitions on many children before just removing them from the stage. Dig?

Note: A component will receive addedToStage or removedFromStage events when its parent changes state and the component is included or excluded from that state.

Scenario

Main view has 2 states, state1 and state2. When the button is clicked, it will toggle between states and change its label. There’s a logo on the screen that is included only in state2, has its own 2 states (hidden and visible), and includes transitions between each.

Problem

If I let the main transition from state2 to state1 run by itself, it will remove the logo from the stage before logo has completed its own transition. I want the main transition to wait until the logo is done transitioning out before removing it from the stage.

Solution

It’s actually quite simple to do this. The key is using s:Pause in the main transition to listen for an event before proceeding…

 
<s:states>
<s:State name="state1" />
<s:State name="state2" />
</s:states>
<s:transitions>
<s:Transition fromState="state2" toState="*"]]>
<s:Sequence>
<s:SetAction target="{logo}" property="currentState" value="hidden"/>
<s:Pause target="{logo}" eventName="{Logo.TRANSITIONED_OUT}" /> 
<s:RemoveAction target="{logo}" />
</s:Sequence>
</s:Transition>
</s:transitions>
 

... and then when the logo is done transitioning out, use s:CallAction to dispatch the completion event thus unpausing and completing the other transition which will finish with s:RemoveAction.

 
<s:Transition fromState="visible" toState="*" autoReverse="true"]]>
<s:Sequence>
<s:Parallel id="outTransition" duration="500"]]>
<s:Fade target="{simplyProfoundLogo}" alphaFrom="1" alphaTo="0" />
<s:Move target="{simplyProfoundLogo}" xTo="600" />
</s:Parallel>
<s:CallAction target="{this}" functionName="dispatchEvent" args="{[new Event(TRANSITIONED_OUT)]}" />
</s:Sequence>
</s:Transition>
 

Download Source: SparkStateTransitions.fxp

Big thanks to @_leonardsouza_, @s9tpepper, @john__olson, @polygeek, @jesterxl, and @terencecarroll for helping me out.

On the flipside, what the heck is wrong with the Flex 4 reference documentation regarding states, transitions and effects? What a mess. Maybe it’s just me, but I find it pretty unhelpful and even downright confusing at times.

Examples and Resources

Leonard Souza: Flexerific Visual Effects (highly recommend his video from 360|Flex DC)

Chet Haase on Spark Effects. SVFUG recording: http://goo.gl/7EWhA

Chet Haase Flex 4 Fun book: http://goo.gl/ooC5W Discount code: FUG1

Jacob Surber on Flex Skins/FXG. SVFUG recording: http://goo.gl/nFdst

Custom Components in Flex 4 presentation by @mrinal: http://weblog.mrinalwadhwa.com/2009/12/01/custom-components-in-flex-4/

Dan Florio‘s posts on Flex 4 State transitions: http://polygeek.com/2304_flex_simple-flex-4-component-checkedunchecked and http://polygeek.com/2506_flex_using-wildcards-in-flex-4-state-transitions