Parallel Fade State Transition Not Playing - flash-builder

Question

This is an old issue, but it's recently come up again; and this time it refuses to work itself out. The problem: When I click on "Forgot Password" the program instantly changes states, without playing the transition.
Transition Code:
<s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
<s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
<s:Fade duration="500" hideFocusRing="true"/>
</s:Parallel>
</s:Transition>
Effected Targets:
<s:states>
<s:State name="LoginMain"/>
<s:State name="LoginForgotPassword"/>
<s:State name="LoginRegister"/>
</s:states>
<s:Panel id="loginWizard" width="546" height="308" horizontalCenter="0" verticalCenter="0"
title.LoginMain="Log-in or create account" title.LoginForgotPassword="Forgot Password"
title.LoginRegister="New user registration">
<s:VGroup width="100%" height="80%" horizontalAlign="center" verticalAlign="middle">
<s:VGroup width="90%" height="85%">
<s:RadioButton id="loginExisting"
label="I'm already a member and I want to login with my Tarrigato account."
groupName="loginMethod" alpha.LoginForgotPassword="0.0"
visible.LoginRegister="false"/>
<s:HGroup width="100%" height="40" horizontalAlign="center">
<s:HGroup width="80%" height="40">
<s:Label height="40" fontSize="15" width="100" text="Username: " verticalAlign="middle"/>
<s:TextInput id="loginUsername" width="300" height="40" focusIn="loginFocusInHandler(event)"/>
</s:HGroup>
</s:HGroup>
<s:HGroup width="100%" height="40" horizontalAlign="center" id="passwordGroup" alpha.LoginForgotPassword="0.0">
<s:HGroup width="80%" height="40">
<s:Label height="40" fontSize="15" width="100" text="Password:" verticalAlign="middle"/>
<s:TextInput id="loginPassword" displayAsPassword="true" width="300"
focusIn="loginFocusInHandler(event)" height="40"/>
</s:HGroup>
</s:HGroup>
<s:HGroup includeIn="LoginRegister" width="100%" height="40" horizontalAlign="center">
<s:HGroup width="80%" height="40">
<s:Label height="40" fontSize="15" width="100" text="Email:" verticalAlign="middle"/>
<s:TextInput id="loginEmail" width="300" height="40"/>
</s:HGroup>
</s:HGroup>
<s:HGroup includeIn="LoginRegister" width="100%" height="20" horizontalAlign="center">
<s:HGroup width="80%" height="20">
<s:CheckBox id="acceptedRules" label="I accept the Tarrigato Rules & Regulations"/>
</s:HGroup>
</s:HGroup>
<s:Spacer height="15"/>
<s:RadioButton id="loginNew"
label="I'm a new member and I want to create a new Tarrigato account now."
groupName="loginMethod" selected="true" alpha.LoginForgotPassword="0.0"
visible.LoginRegister="false" includeInLayout.LoginRegister="false"/>
<mx:LinkButton id="whyTextLink"
label="Want to know why you need a Kommunicate account?"
click="whyPanel.visible = true;" color="#B8B8B8"
textDecoration="underline" alpha.LoginForgotPassword="0.0"
visible.LoginRegister="false" includeInLayout.LoginRegister="false"/>
</s:VGroup>
</s:VGroup>
<mx:HRule y="218" width="100%"/>
<s:Button id="loginForgot" left="7" bottom="7" label="Forgot Password?"
click="currentState = "LoginForgotPassword";"
alpha.LoginForgotPassword="0.0"
visible.LoginRegister="false"/>
<s:Button id="loginCancel" right="126" bottom="7" label="Cancel"
click="currentState = "LoginMain";"
enabled.LoginMain="false"/>
<s:Button id="loginContinue" right="7" width="115" bottom="7" label="Continue"
click="loginContinue_clickHandler(event)"/>
</s:Panel>

Answer 1

You have placed the <s:transition> in <fx:Declarations> - it should be within <s:transitions>.
You have:
<fx:Declarations>
<s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
<s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
<s:Fade duration="500" hideFocusRing="true"/>
</s:Parallel>
</s:Transition>
</fx:Declarations>
This should be implemented as:
<s:transitions>
<s:Transition toState="LoginForgotPassword" fromState="*" autoReverse="true">
<s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
<s:Fade duration="500" hideFocusRing="true"/>
</s:Parallel>
</s:Transition>
</s:transitions>
Use the transitions array outside of declarations.
Beyond that, the only change I made was placing the id of "passwordGroup" in the HGroup that contains the password Label and TextInput. You only had the password TextInput in the targets of the transition and did not include an alpha state for the TextInput.
<?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/mx"
minWidth="955"
minHeight="600"
currentState="LoginMain">
<s:states>
<s:State name="LoginForgotPassword" />
<s:State name="LoginMain" />
</s:states>
<s:transitions>
<s:Transition toState="*"
fromState="*"
autoReverse="true">
<s:Parallel targets="{[loginExisting, passwordGroup, loginNew, whyTextLink, loginForgot]}">
<s:Fade duration="500" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Panel id="loginWizard"
width="546"
height="308"
horizontalCenter="0"
title="Log-in or create account"
title.LoginForgotPassword="Forgot Password"
verticalCenter="-0">
<s:VGroup width="100%"
height="80%"
horizontalAlign="center"
verticalAlign="middle">
<s:VGroup width="90%"
height="75%">
<s:RadioButton id="loginExisting"
label="I'm already a member and I want to login with my Tarrigato account."
groupName="loginMethod"
alpha.LoginForgotPassword="0.0" />
<s:HGroup width="100%"
height="40"
horizontalAlign="center">
<s:HGroup width="80%"
height="40">
<s:Label height="40"
fontSize="15"
width="100"
text="Username: "
verticalAlign="middle" />
<!-- unknown reference: focusIn="loginFocusInHandler(event)" -->
<s:TextInput id="loginUsername"
width="300"
height="40" />
</s:HGroup>
</s:HGroup>
<s:HGroup id="passwordGroup"
alpha.LoginForgotPassword="0.0"
width="100%"
height="40"
horizontalAlign="center">
<s:HGroup width="80%"
height="40">
<s:Label height="40"
fontSize="15"
width="100"
text="Password:"
verticalAlign="middle" />
<!-- unknown reference: focusIn="loginFocusInHandler(event)" -->
<s:TextInput id="loginPassword"
displayAsPassword="true"
width="300"
height="40"
left="4" />
</s:HGroup>
</s:HGroup>
<s:Spacer height="15" />
<s:RadioButton id="loginNew"
label="I'm a new member and I want to create a new Tarrigato account now."
groupName="loginMethod"
selected="true"
alpha.LoginForgotPassword="0.0" />
<!-- unknown reference: click="whyPanel.visible = true;" -->
<mx:LinkButton id="whyTextLink"
label="Want to know why you need a Kommunicate account?"
color="#B8B8B8"
textDecoration="underline"
alpha.LoginForgotPassword="0.0" />
</s:VGroup>
</s:VGroup>
<mx:HRule y="218"
width="100%" />
<s:Button id="loginForgot"
left="7"
bottom="7"
label="Forgot Password?"
alpha.LoginForgotPassword="0.0"
click="currentState = 'LoginForgotPassword';" />
<s:Button id="loginCancel"
right="127"
bottom="7"
label="Cancel"
click="currentState = 'LoginMain';"
enabled.LoginMain="false" />
<s:Button id="loginContinue"
right="7"
bottom="7"
label="Continue" />
</s:Panel>
</s:Application>