Parallel Fade State Transition Not Playing

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 &amp; 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 = &quot;LoginForgotPassword&quot;;"
              alpha.LoginForgotPassword="0.0"
              visible.LoginRegister="false"/>
    <s:Button id="loginCancel" right="126" bottom="7" label="Cancel"
              click="currentState = &quot;LoginMain&quot;;"
              enabled.LoginMain="false"/>
    <s:Button id="loginContinue" right="7" width="115" bottom="7" label="Continue"
              click="loginContinue_clickHandler(event)"/>
</s:Panel>

Why doesn't Adobe cause something to be trace'd when a transition fails to execute due to some unknown / known complication? It would be easy enough to debug then, "compoent with id `blah` on line X does not adhere to the transition `fade` on line Y"; why would that be so hard? — cbroughton, Nov 09 '11 at 19:38

Jason Sturges · Accepted Answer · 2011-11-11T14:14:34.910

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>

Wow, it was that simple? All things having a fade have to have an alpha explicity set to 0.0 in the toState? One more question then, is there a Fade&Hide type thing? IE: Fade the component, and set visible to false (to prevent user interaction, but keep in layout unless I've explicitly defined it's not there) — cbroughton, Nov 09 '11 at 19:03
Since alpha maintains layout and visible removes from layout, you might try adding 'enabled' properties per state: Or mouseEnabled / mouseChildren set to false on those states maybe? Otherwise you can tie in to the effect end: 'effectEnd="effectEndHandler(event)"' calling function: 'protected function effectEndHandler(event:EffectEvent):void' and place programmatic implementation to enable / disable there. — Jason Sturges, Nov 09 '11 at 19:08
Unfortunately, while I've tried to adhere to the example you provided; I was unable to obtain the transition effect as demonstrated. Please view my code (updated in OP). — cbroughton, Nov 09 '11 at 19:31
Your updated code seems functional to me - same result of smooth playing transitions. Root cause must be outside of what you've cited - is this a single MXML component? Are you changing state within the functions not included in your sample? — Jason Sturges, Nov 09 '11 at 21:15
Do you have somewhere I can privately paste you the MXML file? (msn, steam, aim, etc?) Send such as a message to me on StackExchange here (you should be able to see my email on my userprofile.) — cbroughton, Nov 09 '11 at 21:37
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/4854/discussion-between-cbroughton-and-jason-sturges) — cbroughton, Nov 10 '11 at 02:11
My e-mail is on my profile, or I can start a chat room here at Stack Overflow when you're online. — Jason Sturges, Nov 10 '11 at 02:16
solved - I'll update my answer, but you need to put transitions in " not in declarations. Answer update in progress. — Jason Sturges, Nov 10 '11 at 02:36
I can't believe it was that simple :/. If you wouldn't mind, please remove the SWF example. — cbroughton, Nov 11 '11 at 12:59

Parallel Fade State Transition Not Playing

1 Answers1