Transitions : correspondance entre mx et Flex4

Reprend le post [declencher-des-actions...]
Les syntaxes utilisées entre Mx et Sparks sont assez proches.

Une transition classique en Mx donne :
<mx:transitions>
 <mx:Transition fromState="depart" toState="arrivee">
  <mx:Sequence>
   <mx:Resize target="{macible}" widthTo="44"/>
   <mx:Fade alphaFrom="1" alphaTo="0" target="{macible2}"/>
  </mx:Sequence>
 </mx:Transition>
</mx:transitions>

La même chose en Flex4 :
<s:transitions>
 <s:Transition fromState="depart" toState="arrivee">
  <s:Sequence>
   <s:children>//nouveau
     <s:Resize target="{macible}" widthTo="44"/>
     <s:Fade alphaFrom="1" alphaTo="0" target="{macible2}"/>
   </s:children>
  </s:Sequence>
 </s:Transition>
</s:transitions>

Pour jouer une transition d'un State vers un autre, quand des composants apparaissent, disparaissent ou change de propriétés, on utilise les "effets d'action" qui servent à déclencher au bon moment les bonnes actions. Là aussi les différences sont minime
On compte 4  "effets d'action" :

1. SetPropertyAction (mx) deviens SetAction (sparks)
   Il indique quand appliquer un changement de propriété ou de style
2. SetStyleAction deviens SetAction (sparks) :
   En relation avec SetStyle il indique quand appliquer un style.
3. AddChildAction (mx) deviens AddAction (sparks)
   Il indique quand ajouter un composant
4. RemoveChildAction deviens RemoveAction (sparks)
   En relation avec RemoveChild, il indique quand supprimer un composant

Comment s'en servir ?
Prenons l'exemple d'une Application avec 2 états, celui par défaut et "arrivee".
L'état par défaut a un titre (id="titre"), un canvas (id="cadre"), un bouton (id="go")
Dans l'état "arrivee", "titre" va changer de propriété, "cadre" va se redimensionner avant de disparaitre, "go" va changer de couleur et un nouveau composant  va apparaitre.
Si nous n'utilisions pas les "effets d'action", la transition entre ces 2 états serait un peu 'brutale'.

Voici la construction :
En version mx
<mx:states>
 <mx:State name="arrivee">
   <mx:SetProperty target="{titre}" name="text" value="nouveau texte"/>
   <mx:SetStyle target="{go}" name="fillColors" value="[#38EF0D, #38EF0D]"/>
   <mx:RemoveChild target="{cadre}"/>
   <mx:AddChild position="lastChild">
     <mx:Canvas width="200" height="42" backgroundColor="#C911E4"/>
   </mx:AddChild>
 </mx:State>
</mx:states>
   <mx:Label text="premier texte" id="titre"/>
   <mx:Canvas width="200" height="42" backgroundColor="#BC0F0F" id="cadre"/>
   <mx:Button label="lancer la transiton" click="currentState='arrivee'" id="go"/>

En version Flex4
<s:states>
  <s:State name="depart"/>
  <s:State name="arrivee"/>
</s:states>
 <s:Label id="titre" 
          text="premier texte"
          text.arrivee="nouveau texte"/>
 <s:Button id="go"  
          label="lancer la transition" 
          click="currentState='arrivee'"
          chromeColor.arrivee="#38EF0D"/>
 <s:SkinnableContainer 
          includeIn="depart" 
          id="cadre"/>
 
 

Les transitions: 
En version mx 
<mx:transitions>
 <mx:Transition fromState="*" toState="arrivee">
//une succession d'évènement va se produire
  <mx:Sequence>
//je redimensionne
   <mx:Resize target="{cadre}" widthTo="44"/>
//avant de supprimer mon canvas
   <mx:RemoveChildAction target="{cadre}"/>
//fondu sortant
   <mx:Fade alphaFrom="1" alphaTo="0" target="{titre}"/>
//avant de changer le texte
   <mx:SetPropertyAction target="{titre}" name="text"/>
//et de le ré-afficher
   <mx:Fade alphaFrom="0" alphaTo="1" target="{titre}"/>
//je demande a afficher mon nouveau canvas
   <mx:AddChildAction/>
//puis je change la couleur du bouton
   <mx:SetStyleAction target="{go}" name="fillColors"/>
  </mx:Sequence>
 </mx:Transition>
</mx:transitions>

En version Flex4
<s:transitions>
 <mx:Transition fromState="*" toState="arrivee">
  <s:Sequence>
    <s:children>
     <s:Resize target="{cadre}" widthTo="44"/>
     <s:RemoveAction target="{cadre}"/>
       <s:Fade alphaFrom="1" alphaTo="0" target="{titre}"/>
       <s:SetAction target="{titre}" property="text"/>
       <s:Fade alphaFrom="0" alphaTo="1" target="{titre}"/>
       <s:AddAction/>
       <s:SetAction target="{go}" property="chromeColor"/>
    </s:children>
  </s:Sequence>
 </s:Transition>
</s:transitions>