2 Replies Latest reply on Aug 10, 2010 2:20 PM by Im out of ideas

    State Transitions Bug

    Im out of ideas

      Need some help.  I've been playing with transitions lately.  More specifically transitioning from state to state.  I have concluded thus far that fade is about the only effect that isn't buggy.  I'm having trouble with the move effect more than any other.  For some reason move works the first time but if you were to go back the location of what you were moving gets completely deranged.  I've included an example below.

       

      <?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="800" minHeight="800">
           
           <s:states>
                <s:State name="state1"/>
                <s:State name="state2"/>
           </s:states>
           
           <s:transitions>
                <s:Transition fromState="state1" toState="state2">
                     <s:Sequence>
                          <s:Parallel target="{panel1}">
                               <s:AddAction/>
                               <s:Fade/>
                               <s:Move xTo="800" xFrom="262.5"/>
                          </s:Parallel>
                          <s:RemoveAction target="{panel1}"/>
                          <s:Parallel target="{panel2}">
                               <s:AddAction/>
                               <s:Fade/>
                               <s:Move xTo="262.5" xFrom="800"/>
                          </s:Parallel>
                          
                     </s:Sequence>
                </s:Transition>
                <s:Transition fromState="state2" toState="state1">
                     <s:Sequence>
                          <s:Parallel target="{panel2}">
                               <s:AddAction/>
                               <s:Fade/>
                               <s:Move xFrom="262.5" xTo="800"/>
                          </s:Parallel>
                          <s:RemoveAction target="{panel2}"/>
                          <s:Parallel target="{panel1}">
                               <s:AddAction/>
                               <s:Fade/>
                               <s:Move xFrom="800" xTo="262.5"/>
                          </s:Parallel>
                     </s:Sequence>
                </s:Transition>
           </s:transitions>
           
           <s:Panel id="panel1" 
                    title="Panel 1" textAlign="center"
                    width="275" height="170" includeIn="state1" cornerRadius="10" x="262.5" y="315">
                <s:Button id="next1" label="Next"
                          horizontalCenter="0" bottom="5" click="currentState='state2'"/>
           </s:Panel>
           
           <s:Panel id="panel2"
                    title="Panel 2" textAlign="center"
                    width="275" height="170" includeIn="state2" cornerRadius="10" x="262.5" y="315">
                <s:Button id="next2" label="Next"
                          horizontalCenter="0" bottom="5" click="currentState='state1'"/>
           </s:Panel>
           
      </s:Application>
      

       

      If you run the code above you'll see that the initial animation works perfectly.  However, when you click the next button to go back to state 1 the animation completes then shifts panel 1 off screen.  No idea why this is happening.  Any ideas?  Am I using the transition wrong?

        • 1. Re: State Transitions Bug
          Shongrunden Adobe Employee

          I believe you are running into a situation where the states and transitions are fighting over what the position should actually be, here is a reduced example:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
             
              <s:states>
                  <s:State name="state1"/>
                  <s:State name="state2"/>
              </s:states>
             
              <s:transitions>
                  <s:Transition fromState="state1" toState="state2">
                      <s:Move target="{panel1}" xTo="800" xFrom="262.5"/>
                  </s:Transition>
              </s:transitions>
             
              <s:controlBarContent>
                  <s:Button label="to state2" click="currentState='state2'" />
                  <s:Button label="reset" click="currentState='state1'" />
              </s:controlBarContent>
             
              <s:Panel id="panel1" x="262.5" />
             
          </s:Application>

          This is because the effect moves the Panel to 800 as its told to, but then the transition completes and x is then set to its state2 value (which is 262.5).

           

          In general when you define transitions you shouldn't set any properties on the effects (like xFrom/xTo etc.) because they might conflict with what values are specified in the states.  So in the following code snippet you shouldn't do this:

              <s:transitions>
                  <s:Transition>
                      <s:Move target="{t}" xTo="800" xFrom="262.5"/>
                  </s:Transition>
              </s:transitions>
              ...
              <s:Button id="t" x="262.5" />


          But instead should define the position of each state and not give the Move effect any extra information:

           

              <s:transitions>
                  <s:Transition>
                      <s:Move target="{t}" />
                  </s:Transition>
              </s:transitions>
              ...
              <s:Button id="t" x.state1="262.5" x.state2="800" />

           

          As a workaround for your original example you can get the behavior you are looking for by making a very subtle change which is to set x.state1, x.state2 values for both components:

           

          <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="800" minHeight="800">
             
              <s:states>
                  <s:State name="state1"/>
                  <s:State name="state2"/>
              </s:states>
             
              <s:transitions>
                  <s:Transition fromState="state1" toState="state2">
                      <s:Sequence>
                          <s:Parallel target="{panel1}">
                              <s:AddAction/>
                              <s:Fade/>
                              <s:Move xTo="800" xFrom="262.5"/>
                          </s:Parallel>
                          <s:RemoveAction target="{panel1}"/>
                          <s:Parallel target="{panel2}">
                              <s:AddAction/>
                              <s:Fade/>
                              <s:Move xTo="262.5" xFrom="800"/>
                          </s:Parallel>
                         
                      </s:Sequence>
                  </s:Transition>
                  <s:Transition fromState="state2" toState="state1">
                      <s:Sequence>
                          <s:Parallel target="{panel2}">
                              <s:AddAction/>
                              <s:Fade/>
                              <s:Move xFrom="262.5" xTo="800"/>
                          </s:Parallel>
                          <s:RemoveAction target="{panel2}"/>
                          <s:Parallel target="{panel1}">
                              <s:AddAction/>
                              <s:Fade/>
                              <s:Move xFrom="800" xTo="262.5"/>
                          </s:Parallel>
                      </s:Sequence>
                  </s:Transition>
              </s:transitions>
             
              <s:Panel id="panel1"
                       title="Panel 1" textAlign="center"
                       width="275" height="170" includeIn="state1" cornerRadius="10" x.state1="262.5" x.state2="800" y="315">
                  <s:Button id="next1" label="Next"
                            horizontalCenter="0" bottom="5" click="currentState='state2'"/>
              </s:Panel>
             
              <s:Panel id="panel2"
                       title="Panel 2" textAlign="center"
                       width="275" height="170" includeIn="state2" cornerRadius="10" x.state1="800" x.state2="262.5" y="315">
                  <s:Button id="next2" label="Next"
                            horizontalCenter="0" bottom="5" click="currentState='state1'"/>
              </s:Panel>
             
          </s:Application>

          • 2. Re: State Transitions Bug
            Im out of ideas Level 1

            Your work around worked.  However I tweaked it a bit.  I didn't change anything in the transitions.  If the tag provides a xFrom and xTo I expect to use them and expect them to work.

             

            My tweak was a tad bit simpler.  I simply defined the x attribute for each panel using the "dot state" syntax that you suggested.  However instead of defining it for both states, I defined it only for the state that each panel was included in.  And as mentioned before, I didn't modify the transitions at all.  This solved the issue.  Code below:

             

            <?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="800" minHeight="800">
                 
                 <s:states>
                      <s:State name="state1"/>
                      <s:State name="state2"/>
                 </s:states>
                 
                 <s:transitions>
                      <s:Transition fromState="state1" toState="state2">
                           <s:Sequence>
                                <s:Parallel target="{panel1}">
                                     <s:AddAction/>
                                     <s:Fade/>
                                     <s:Move xTo="800" xFrom="262.5"/>
                                </s:Parallel>
                                <s:RemoveAction target="{panel1}"/>
                                <s:Parallel target="{panel2}">
                                     <s:AddAction/>
                                     <s:Fade/>
                                     <s:Move xTo="262.5" xFrom="800"/>
                                </s:Parallel>
                                
                           </s:Sequence>
                      </s:Transition>
                      <s:Transition fromState="state2" toState="state1">
                           <s:Sequence>
                                <s:Parallel target="{panel2}">
                                     <s:AddAction/>
                                     <s:Fade/>
                                     <s:Move xFrom="262.5" xTo="800"/>
                                </s:Parallel>
                                <s:RemoveAction target="{panel2}"/>
                                <s:Parallel target="{panel1}">
                                     <s:AddAction/>
                                     <s:Fade/>
                                     <s:Move xFrom="800" xTo="262.5"/>
                                </s:Parallel>
                           </s:Sequence>
                      </s:Transition>
                 </s:transitions>
                 
                 <s:Panel id="panel1" 
                          title="Panel 1" textAlign="center"
                          width="275" height="170" includeIn="state1" cornerRadius="10" x.state1="262.5" y="315">
                      <s:Button id="next1" label="Next"
                                horizontalCenter="0" bottom="5" click="currentState='state2'"/>
                 </s:Panel>
                 
                 <s:Panel id="panel2"
                          title="Panel 2" textAlign="center"
                          width="275" height="170" includeIn="state2" cornerRadius="10" x.state2="262.5" y="315">
                      <s:Button id="next2" label="Next"
                                horizontalCenter="0" bottom="5" click="currentState='state1'"/>
                 </s:Panel>
                 
            </s:Application>
            
            

             

            Thanks a lot.