4 Replies Latest reply on Oct 20, 2010 8:06 AM by JoshBeall

    Need help getting a transition to work

    JoshBeall Level 1

      Hi All,

       

      I've been trying to get this "fade" transition to work.  I pared this down to a short example to demonstrate what I'm trying to do.  I've got two panels and I want it to fade from one to the next.  However, when you advance to the next panel, there's no fade--it immediately advances with no transition.

       

      I've tried:

      • Making fromState and toState both *
      • Setting the duration on the fade to 3500
      • Explicitly setting the alphaFrom and alphaTo values
      • Splitting the Fade effect into two Fade effects, one targeting each panel, and putting it inside a Sequence block.
      • Then changing Sequence to Parallel
      • Changing "Fade" to "CrossFade"
      • Moving s:Transition outside the fx:Declarations block (but that gives a compile error)

       

      None of these things have worked.

       

      What am I doing wrong?

       

       

      <?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" minHeight="600">
      
           <fx:Script>
                <![CDATA[
                     protected function button1_clickHandler(event:MouseEvent):void
                     {
                          currentState = "primaryApplicants";
                     }
                ]]>
           </fx:Script>
      
           <s:states>
                <s:State name="welcome"/>
                <s:State name="primaryApplicants"/>
           </s:states>
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                
                <s:Transition fromState="welcome" toState="primaryApplicants">
                     <s:CrossFade target="{[welcomePanel,primaryApplicantsPanel]}" />
                </s:Transition>
                
           </fx:Declarations>
           <s:Panel title="Welcome" id="welcomePanel" left="10" top="75" right="10" bottom="10" includeIn="welcome">
                <s:TextArea x="10" y="10" width="422" height="66" text="Thank you for your interest in joining "/>
           </s:Panel>
           <s:Panel includeIn="primaryApplicants" title="Primary Applicants" id="primaryApplicantsPanel" left="10" top="75" right="10" bottom="10">
                <s:Label x="25" y="24" text="Applicants Panel here!"/>
           </s:Panel>
           <s:Button includeIn="welcome" x="10" y="10" label="Next" click="button1_clickHandler(event)"/>
      </s:Application>
      
       
      

        • 1. Re: Need help getting a transition to work
          Devtron Level 3

          Why cant you specify a showEffect and a hideEffect on the Panel itself?

           

          And reference a Fade?

           

                  <mx:Fade id="hideEffect" />
                  <mx:Move id="showEffect"  />

           

               <s:Panel title="Welcome" id="welcomePanel" hideEffect="{hideEffect}" showEffect="{showEffect}" includeIn="welcome">
                    <s:TextArea x="10" y="10" width="422" height="66" text="Thank you for your interest in joining "/>
               </s:Panel>

           

           

          This is the only way I know how to use Fades. Looking at your code, it seems more advanced. But maybe this can fix it??? I am not sure

          • 2. Re: Need help getting a transition to work
            JoshBeall Level 1

            That might work, but I was really hoping to get the "transition" way of doing state transitions working... I'm basing this off the "Flex in a Week" video training.  You see that here:

            http://www.adobe.com/devnet/flex/videotraining.html

             

            Scroll down to day four and watch the last video in the series, titled "Animating states with transitions"

            • 3. Re: Need help getting a transition to work
              Devtron Level 3

              I would avoid those videos. They show how to do simple things very simply. It has no real value in a business world application. From my experience, most of the Adobe examples are very "HELLO WORLD-ish" and show you all the things to solve things easily, but are poor for scalability. That's just me though.

               

              You can manipulate the Fade or Move object in ActionScript to handle the transitions. I do not manpulate my Fade object, only my Move object.

               

                              //figure out which direction the user is clicking the tabs
                              if (_lastTabIndex > tn.selectedIndex) {
                                  showEffect.xFrom=1000;   //right to left
                              } else {
                                  showEffect.xFrom=-500; //left to right
                              }

               

              Your original example looks pretty cool, I will check out some of that stuff later. But this is how I get my Move/Fade transition to work. The Move object here is  using the direction the user's are clicking the tabs across the TabNavigator/menu. The Fade is static, but the Move effect goes either left or right, depending on the user click tab order. Hopefully this can help you some.

              • 4. Re: Need help getting a transition to work
                JoshBeall Level 1

                I figured it out!  It was a simple mistake on my part.

                 

                In my original code, I simply have a <s:Transition> block.  However, all <s:Transition> blocks need to be nested inside an <s:transitions> block.  Like this:

                 

                     <s:transitions>
                          <s:Transition fromState="*" toState="*">
                               <s:CrossFade duration="250" target="{this}"/>
                          </s:Transition>
                     </s:transitions>
                

                 

                Then, you can take it out of the fx:Declarations block and put it right underneath the <s:states> block.

                 

                Once I did that, my CrossFade works perfectly.  And by making the target {this}, it works anytime there is a state change!  Hopefully I'm not breaking any rules that will come back to bite me later by targeting {this}... ??

                 

                Devtron, that's good info on how you did it.  I may try experimenting with that method also.

                 

                  -Josh