Flex Wipe State Transitions?

Question

I'm trying to create a simple wipe / slide type transition between 2 states. Similiar to the way the iphone 'slides' from one list to another (ie. inbox > mail listing)

I can't seem to figure out or find correct documentation on how to do this using 2 simple canvas components and transitions where one slides off screen to the left as the other slides in from the right.

I've got the second state 'sliding in' with the following code, but how can I modify to simultaneously 'slide out' the first?

<mx:transitions>
    <mx:Transition fromState="summaryState" toState="detailState">
    <mx:Parallel target="{contentCanvas}">
        <mx:WipeLeft duration="300"/>
    </mx:Parallel>
    </mx:Transition>
</mx:transitions>

Thanks in advance.

Answer 1

On Adobe's site , they mention you should use the and set the 'fromState' and 'toState' (you may use '*' to define the states). I'm assuming that your 2 simple canvas components are each in its own state? If so once you set the transition, it should be able to play out your effect. Also the linked site mentions that effects can be played in sequence or in parallel which may be needed to get the effect you want.

EDIT:

I did a small test and this was what I came up with. It seems to work in my tests as both canvas were animated. I'm assuming you are using setCurrentState("newState", true ). I hope this is what you are asking for.

<mx:transitions>
  <mx:Transition fromState="FirstState" toState="SecondState">
    <mx:Parallel>
      <mx:WipeLeft target="{CanvasA}" duration="300"/>
      <mx:WipeRight target="{CanvasB}" duration="300"/>
    </mx:Parallel>
  </mx:Transition>
</mx:transitions>

Further EDIT: This may be useful as well. I think what you'll need to do is, have both canvas be in one of the state and then execute it. Perhaps you'll need to re-arrange your states a little so that both canvas are in the one state which at the moment I assume you have kept them in separate states.

Answer 2

public function addTransitions():void { var transition:Transition = new Transition();
var move:Move = new Move();

  move.duration=400;
  move.targets = windowArray;

  transition.fromState = "*";
  transition.toState = "*";
  transition.effect = move;            

  // I was mising THIS line
  transitions.push(transition);

}