Flex Effect: Les événements dispatchés au cours d'un effet (event effects et tween)
Tous les effets renvoient des événement qui indiquent aux listeners quand l'effet commence et quand il se termine. Ces événements sont appelés effectStart et effectEnd.
Ces événements liés aux effets sont de type mx.events.EffectEvent.
L'exemple suivant montre la manière d'utiliser l'événement effectEnd pour modifier l'opacité (alpha) d'un conteneur après qu'il ai bougé sur la gauche.
L'attribut effectStart fonctionne exactement de la même manière.
Code Source Flex Effect:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.events.EffectEvent
private function effectEndHandler(event:EffectEvent):void{
// opacité initiale de 0.5. Une fois l'effet terminé, on fixe l'alpha à 1
vbox.alpha = 1;
}
]]>
</mx:Script>
<mx:Move id="moveEffect" xFrom="-100" effectEnd="effectEndHandler(event)"/>
<mx:VBox id="vbox" alpha=".5" creationCompleteEffect="{moveEffect}">
<mx:TextInput id="textInput1"/>
<mx:TextInput id="textInput2"/>
<mx:TextInput id="textInput3"/>
<mx:TextInput id="textInput4"/>
</mx:VBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Flex Effect: Démarrer un effet avec un trigger (flex trigger event)
Un trigger se produit à l'intérieur d'une application Flex pour jouer un effet. L'utilisation des triggers permet de créer et d'appliquer des effets entièrement en MXML. Ce n'est pas nécéssairement mieux ou pire que d'utiliser la méthode play(). C'est juste une autre manière d'appliquer des effets.
Dans la terminologie Flex, un trigger combiné avec un effet est appelé un behavior (comportement)
Il existe des triggers standards, disponible pour tous les composants. La liste suivante présente ces triggers communs:
- addedEffect: Le composant a été ajouté à la liste d'affichage
- removedEffect: Le composant a été supprimé de la liste d'affichage
- creationCompleteEffect: Le composant a été crée et initialisé
- focusInEffect: Le composant a reçu le focus
- focusOutEffect: Le composant a perdu le focus
- hideEffect: Le composant a été caché (rendu non-visible)
- showEffect: Le composant a été affiché (rendu visible)
- rollOverEffect: L'utilisateur a passé sa souris sur le composant
- rollOutEffect: L'utilisateur à passé la souris hors du composant
- mouseDownEffect: L'utilisateur a préssé le bouton gauche de la souris au dessus du composant
- mouseUpEffect: L'utilisateur a relaché le bouton gauche de la souris au dessus du composant
- moveEffect: Les propriétés x et/ou y du composant ont changé
- resizeEffect: La hauteur et/ou la largeur du composant ont changé
Vous pouvez assigner l'instance d'un effet à un trigger pour un composant et cet effet sera appliqué automatiquement que le trigger se déclenchera. Lorsque vous utilisez les triggers, vous ne devez pas spécifier un target (cible) à cet effet. Au lieu de cela, le target est automatiquement défini lorsque l'effet est déclenché.
Flex Effect: Déclencher un effet en utilisant la méthode play() en ActionScript
Déclencher les effets manuellement
Vous pouvez utiliser la méthode play() d'un effet pour le déclencher manuellement. Pour qu'un effet soit joué, vous devez avoir une cible, à laquelle sont appliqués les paramètres. Par exemple, si vous avez crée un effet Move, qui est supposé déplacer le composant de -100 par rapport à sa position actuelle, vous devez dire quel composant utilisent en tant que cible. Vous pouvez le faire en utilisant la propriété target.
moveEffect.target = textInput;
Vous pouvez ensuite utiliser la méthode play() pour démarrer la lecture de l'effet:
moveEffect.play();
L'exemple suivant utilise un effet de déplacement et l'applique à 4 champs de saisie à leur création.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
private function applyEffect(event:Event):void {
moveEffect.target = event.currentTarget;
moveEffect.play();
}
]]>
</mx:Script>
<mx:Move id="moveEffect" xFrom="-100"/>
<mx:VBox>
<mx:TextInput id="textInput1" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput2" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput3" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput4" creationComplete="applyEffect(event)"/>
</mx:VBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Dans cet exemple, chaque champ de saisie semble glisser depuis la gauche.
Mes projets (Open Source)
Autres
