22/12/2010

Jouer un effet au changement d'un state sur un composant qui n'y est pas

Je vais reformuler mon titre : comment appliquer un effet sur un composant, lors d'un changement de State, si ce dernier n'est pas présent sur le State d'arrivé ?
Je ne suis arrivée qu'à trouver un seul tutoriel là dessus sur cookbooks.adobe.com.
En voici la substance :
Par défaut, les effets sont visibles lors de l'initialisation du state qui s'affiche. Toutefois, lorsque vous retournez à l'état initial, le composant est supprimé avant que les effets aient eu la chance d'être affichés.
Pour remédier à ça, il faut utiliser le paramètre de lancement de l'effet propre au composant puis lorsque le composant est supprimé (au changement de State), vous devez utiliser le trigger removedEffect.

Je crée mes états. btn1 est le bouton affiché par défaut sur le State initial,  btn2 est crée dans le State extraButton.
 
<mx:states>
    <mx:State name="extraButton">
      <mx:AddChild>
        <mx:Button id="btn2"
                   label="Clique moi" 
                   click="currentState=''"/>
      </mx:AddChild>
    </mx:State>
  </mx:states>
       <mx:Button id="btn1"
                  label="Clique moi en 1er" 
                  click="currentState='extraButton'"/>


 Ma transition faisant apparaitre le bouton btn2

<mx:transitions>
    <mx:Transition fromState="" toState="extraButton">
      <mx:Fade target="{btn2}"
               alphaFrom="0" alphaTo="1" 
               duration="2000"/>
    </mx:Transition>

La sortie en fondu s'effectue en ajoutant une séquence avec RemoveChildAction après l'effet.

<mx:Transition fromState="extraButton" toState="">
      <mx:Sequence target="{btn2}">
        <mx:Fade alphaFrom="1" alphaTo="0" duration="2000"/>
        <mx:RemoveChildAction/>
      </mx:Sequence>
    </mx:Transition>
  </mx:transitions>
Dans le cas d'un bouton où il y a du texte à afficher, il faut incorporer la police au projet:
<mx:Style>
    @font-face {
      src: local("Verdana");
      fontFamily: myFont;
      fontWeight: bold;
    }
 
    global {
      fontFamily: myFont;
    }
  </mx:Style>
Et plus simplement, pour appliquer un effet sur monObjet avant qu'il ne soit supprimé, je rajoute RemoveChildAction après l'effet:

<mx:Sequence target="{monObjet}">
      <mx:Blur />
      <mx:RemoveChildAction />
</mx:Sequence>

Aucun commentaire:

Enregistrer un commentaire