Le transizioni

Una transizione è il passaggio da uno stato ad un altro, in questo passaggio possiamo inserire animazioni o effetti particolari. Per questo motivo trattiamo le transizioni come verie propri elementi e le codifichiamo grazie all'array <s:transitions>, che contiene i singoli elementi <Transition>.

Per indicare il cambiamento di stato cui si applica una transizione utilizziamo le proprieta fromState e toState.

All'interno della <Transition> possiamo dichiarare gli effetti da utlizzare nella transizione. In questa lezione vediamo come inserire piccole animazioni nel passaggio tra uno stato e l'altro.

Le proprietà fondamentali degli effetti sono:

• target, che stabilisce l'oggetto investito dall'effetto. Con targets indichiamo una collezione (array) di oggetti
• duration, che indica la durata della transizione espressa in millisecondi

Apriamo allora il file MXML dell'applicazione in modalita Source, ed inseriamo nel tag Application il seguente codice :

<s:transitions>
  <s:Transition fromState="Stato1" toState="Stato2" >
    <s:Fade alphaFrom="0" alphaTo="1" duration="1500" target="{label}"/>
  </s:Transition>
  <s:Transition fromState="Stato2" toState="Stato3">
    <s:Move  xFrom="-100" xTo="25"  duration="1500" target="{label}"/>
  </s:Transition>
  <s:Transition fromState="Stato3" toState="Stato2">
    <s:Wipe target="{label}" duration="1500" direction="up"/>
  </s:Transition>
  <s:Transition fromState="Stato2" toState="Stato1">
    <s:Wipe target="{label}" duration="1500" direction="down"/>
  </s:Transition>
</s:transitions>

Abbiamo inserito una transizione per ogni cambiamento di stato, in un progetto reale sicuramente andrebbero progettate meglio, ma lo scopo qui è mostrare l'utilizzo dello strumento.