2 Replies Latest reply on Aug 17, 2006 8:26 AM by peterent

    Using Transitions vs. Sequences

    Bill White
      I've been playing around with States, Transitions and Sequenced Animations and I'm having trouble understanding why Transitions seem to ignore some of my specified steps while a manually specified Sequence works fine.

      I've pasted a sample file below that you can run to see what I'm talking about. I want to transition between the base state and the 'movedState' using a fancy animation. I can manually move the boxes the way I want using the 'moveSequence' but this does not actually change the state. So I put the same sequence into a Transition. However, then transition seems to ignore my steps and just 'do its best' to get the boxes to the final positions. Why?

      CODE:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

      <mx:states>
      <mx:State name="movedState">
      <mx:SetProperty target="{panelA}" name="width" value="400"/>
      <mx:SetProperty target="{panelA}" name="height" value="200"/>
      <mx:SetProperty target="{panelB}" name="width" value="400"/>
      <mx:SetProperty target="{panelB}" name="height" value="200"/>
      <mx:SetProperty target="{panelB}" name="x" value="10"/>
      <mx:SetProperty target="{panelA}" name="y" value="218"/>
      </mx:State>
      </mx:states>

      <mx:Sequence id="moveSequence">
      <mx:Parallel>
      <mx:Sequence target="{panelA}">
      <mx:Resize heightTo="200" />
      <mx:Move yTo="220" />
      <mx:Resize widthTo="400" />
      </mx:Sequence>
      <mx:Sequence target="{panelB}">
      <mx:Parallel>
      <mx:Resize heightTo="200" />
      <mx:Move yTo="220" />
      </mx:Parallel>
      <mx:Move yTo="10" />
      <mx:Parallel>
      <mx:Resize widthTo="400" />
      <mx:Move xTo="10" />
      </mx:Parallel>
      </mx:Sequence>
      </mx:Parallel>
      </mx:Sequence>

      <mx:transitions>
      <mx:Transition fromState="*" toState="movedState">
      <mx:Parallel>
      <mx:Sequence target="{panelA}">
      <mx:Resize heightTo="200" />
      <mx:Move yTo="220" />
      <mx:Resize widthTo="400" />
      </mx:Sequence>
      <mx:Sequence target="{panelB}">
      <mx:Parallel>
      <mx:Resize heightTo="200" />
      <mx:Move yTo="220" />
      </mx:Parallel>
      <mx:Move yTo="10" />
      <mx:Parallel>
      <mx:Resize widthTo="400" />
      <mx:Move xTo="10" />
      </mx:Parallel>
      </mx:Sequence>
      </mx:Parallel>
      </mx:Transition>
      </mx:transitions>

      <mx:Panel id="panelA" width="200" height="400" borderStyle="solid" borderThickness="2"
      borderColor="#000000" headerHeight="20" title="Panel A" cornerRadius="4"
      roundedBottomCorners="true" x="10" y="10" backgroundColor="#0080C0">
      </mx:Panel>

      <mx:Panel id="panelB" width="200" height="400" borderStyle="solid" borderThickness="2"
      borderColor="#000000" headerHeight="20" title="Panel B" cornerRadius="4"
      roundedBottomCorners="true" backgroundColor="#C0C0C0" x="220" y="10">
      </mx:Panel>
      <mx:HBox width="763" x="10" y="437">
      <mx:Button label="Comp A - Reset" click="currentState=''"/>
      <mx:Button label="Comp A - Move by Animation" click="moveSequence.end();moveSequence.play();"/>
      <mx:Button label="Comp A - Move by State Transition" click="currentState='movedState'"/>
      </mx:HBox>

      </mx:Application>
        • 1. Re: Using Transitions vs. Sequences
          Bill White Level 1
          I'm also wondering when one should use a declared transition vs. using the component attributes such as 'ResizeEffect', 'RemovedEffect' and 'AddedEffect'. What is the difference between defining them as attributes versus creating a transition?
          • 2. Re: Using Transitions vs. Sequences
            peterent Level 2
            I believe the difference is that with the state + transition, Flex looks at all of the SetPropertys together and determines how to get from point A to point B. Your moveSequence is manual and you are specifying movements on each dimension. The state + transition is saying, OK, panelA starts at a particular location and size and, according to the state, winds up at a new location and size, so how do I get there? The state + transition is not seeing the incremental steps, just the before and after.

            You could try putting an endState event handler on the Application and in that handler, activate the moveSequence. This is assuming that you want to do more than just move the panels in the new state.