2 Replies Latest reply on Sep 6, 2010 2:41 AM by max__

    Move effect not executed on state transition

    max__ Level 1

      I have the following problem using view states, transitions and the move effect

       

      I have a component panel and states state1 and state2.

       

      panel is included in state1 but not in state2.

       

      When the view state changes from state1 to state2 i want to animate panel before it gets removed.

       

      However if i put a move effect in my state transition it never executes since panel is removed before the effect plays.

       

      The only workaround that i've found has been to add a fade effect to the transition. This prevents the panel from being removed and the move effect plays correctly.

       

      Whats going on? Is there any documentation to explain this? Could this be a bug?

       

      Here is an example application to demonstrate the problem. Panel1 has the problem and Panel2 has the workaround.

       

      <?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/halo">

       

          <s:states>

              <s:State name="state1" />

              <s:State name="state2" />

          </s:states>

       

          <s:Group>

              <s:Panel id="panel1" y="0" y.state2="100" title="Panel 1" includeIn="state1" />

              <s:Panel id="panel2" x="150" y="0" y.state2="100" title="Panel 2" includeIn="state1" />

              <s:Button left="300" label="toggleState" click="currentState= currentState=='state1' ? 'state2' : 'state1'" />

          </s:Group>

       

          <s:transitions>

              <s:Transition fromState="state1" toState="state2">

                  <s:Parallel>

       

                      <!-- Strange! Panel 1 is removed before move effect plays -->

                      <s:Move target="{panel1}" yTo="100" />

       

                      <!-- The workarount. With a dummy fade effect panel2 stays visible and move effect is executed -->

                      <s:Move target="{panel2}" yTo="100" />

                      <s:Fade target="{panel2}" alphaTo="1" />

       

                  </s:Parallel>

              </s:Transition>

          </s:transitions>

       

      </s:Application>

        • 1. Re: Move effect not executed on state transition
          Shongrunden Adobe Employee

          What's happening here is the Panel is being removed from the DisplayList at the start of the transition before the Move has a chance to happen.  This happens by default unless someone tells the transition to remove the element at a different time.

           

          There is some special logic built into Fade that knows when an element is being removed from the DisplayList so it knows to tell the transition to fade the element out before removing it.  This is why the workaround you mentioned works for your case.

           

          You'll notice if you use:

           

          <s:Move target="{panel2}" />
          <s:Fade target="{panel2}" />

           

          The target will fade out as its moving before being removed from the DisplayList.

           

          Normally in this situation the transition needs to know when to remove the element from the DisplayList and you can tell it that by using the RemoveAction tag, for 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:controlBarContent>
                  <s:Button label="toggleState" click="currentState= currentState=='state1' ? 'state2' : 'state1'" />
              </s:controlBarContent>
             
              <s:Panel id="panel1" y="0" y.state2="100" title="Panel 1" includeIn="state1" />
             
              <s:transitions>
                  <s:Transition fromState="state1" toState="state2">
                      <s:Sequence>
                          <s:Move target="{panel1}" yTo="100" />
                          <s:RemoveAction target="{panel1}" />
                      </s:Sequence>
                  </s:Transition>
              </s:transitions>
          </s:Application>


          Notice that in this transition I use a Sequence and put the RemoveAction after the Move so the transition knows to move the element before removing it.

           

           

          By the way, thanks for the great code sample!  When code posted on here is concise, complete, compiles and I can quickly copy and paste it into Flash Builder I'm much more likely to look into the issue.

          • 2. Re: Move effect not executed on state transition
            max__ Level 1

            Thanks. Using the RemoveAction in a sequence is just what i wanted.