Flex Effect / Transition
Flex Effect, Transition: Ajoutez des effets à vos composants
Une application Flex consiste en une ou plusieurs interfaces utilisateur et/ou composants conteneur. Au minimum, une application Flex a un conteneur application, mais habituellement, il a d'autres composants additionnels. Bien que le comportement par défaut d'un composant soit assez statique, vous pouvez donner vie à votre application en utilisant des effets. Un effet est une action qui se produit comme un déplacement, une disparition, un zoom avant/arrière sur un composant. Un effet peut être un comportement non-visuel, comme la lecture d'un son. En utilisant les effets, vous pouvez créer des applications visuellement plus intéressantes. Mais, encore plus important, vous pouvez utiliser les effets pour diriger le focus et aider les utilisateurs à mieux comprendre comment utiliser votre application.
Une autre manière d'utiliser les effets est de créer des transitions entre les states (états).
Utilisation des Flex States (états)
Cependant, en lisant ces articles vous allez apprendre à créer des états soudains (sans transition). En utilisant les effets comme transition, vous pouvez créer des changements d'état plus intéressants et sans coupure. Par exemple, plutôt que d'ajouter un composant qui apparaitra soudainement, vous pouvez le faire apparaître progressivement. Bien plus que de rendre simplement l'expérience utilisateur plus agréable, les effets peuvent être utilisés pour mettre en valeur un changement.
Vous allez donc voir comment marchent les effets et les transitions. Vous verrez comment fonctionne un trigger (déclencheur) d'effet, comment programmer des effets et comment créer des effets personnalisés. Vous verrez aussi comment utiliser un effet comme une transition entre des états, mais aussi comment créer des transitions personnalisées.
Utilisation des effets
Les effets sont des actions que vous pouvez appliquer aux composants. Les exemples communs sont l'apparition/disparition (fade), le déplacement (move) et les zooms. Le framework Flex inclus de nombreux effets de base, que nous verrons plus loin. Cependant, vous n'êtes pas limité à l'utilisation de ces effets. Vous pouvez aussi créer des effets composites en séquence (fade puis move …) ou en parallèle (fade et move). Vous pouvez aussi écrire des effets personnalisés en utilisant ActionScript (AS3). Ces effets personnalisés peuvent être utilisés de la même manière que les effets de base.
Comment utiliser les effets
Pour utiliser un effet, vous devez tout d'abord créer une instance de cet effet. Il y a deux manières principales d'utiliser les effets: en utilisant le MXML ou en utilisant l'ActionScript. Nous allons voir les deux techniques.
Le MXML est la manière la plus commune pour instancier un effet. De manière basique, vous avez besoin d'un tag du type approprié et de lui donner un id. Vous devrez placer ce tag comme enfant du document racine. Par exemple, vous pouvez placer ce tag comme enfant du tag <mx:Application>. Le tag ne doit pas être inclus dans un autre tag (un tag d'un composant enfant par exemple). L'exemple suivant créer un effet Move.
<mx:Move id="moveEffect"/>
Liste des effets standards et leur description:
- Blur: Anime un flou
- Move: Anime le déplacement d'un composant en x et y
- Fade: Anime la valeur alpha (opacité) d'un composant
- Dissolve: Quasiment identique au Fade
- Glow: Applique une lueur externe au composant et anime l'apparition/disparition de cette lueur
- Resize: Anime la hauteur et la largeur d'un composant (height / width)
- Rotate: Fait tourner un composant
- Zoom: Anime les mises à l'échelle en x et en y d'un composant
- WipeLeft, WipeRight, WipeUp, WipeDown: Applique un masque mobile qui cache ou révèle le composant
- Iris: Applique un masque qui se met à l'échelle pour cacher ou révéler un composant
- AnimateProperty: Animer n'importe quelle propriété numérique d'un composant
Chacun de ces effets à un ensemble de propriétés que vous pouvez fixer pour personnaliser l'effet. Par exemple, par défaut, un effet Move déplace de et jusqu'à la position actuelle du composant. Le résultat est que l'effet semble ne rien faire. Cependant, vous pouvez spécifier the propriétés xFrom, xTo, yFrom et yTo pour affecter le mouvement du comportement. L'exemple suivant crée un effet qui va déplacer le composant le long de l'axe X depuis -100 jusqu'à la coordonnée X courante:
<mx:Move id="moveEffect" xFrom="-100" />
Vous pouvez aussi construire cet effet en utilisant le constructeur approprié. Par exemple, le code suivant crée une nouvelle instance de Move:
private var moveEffect:Move = new Move();
Dans le cas général, vous pouvez assigner des propriétés en utilisant de l'ActionScript:
moveEffect.xFrom= -100;
Déclencher les Effets
Il y a deux manières de déclencher des effets: en utilisant la méthode play() ou en utilisant un trigger. Nous allons voir la méthode play() tout d'abord car c'est la méthode la plus évidente pour jouer un effet. Nous verrons ensuite comment utiliser les trigger.
- Flex Effect: Déclencher un effet en utilisant la méthode play() en ActionScript
- Flex Effect: Démarrer un effet avec un trigger (flex trigger event)
Utilisation pratique des effets
- Flex Effect: Les événements dispatchés au cours d’un effet (event effects et tween)
- Flex Effect: Effets composites en Sequence / Parallel (MXML et AS3)
- Flex Effect: Animation des effets (Pause, Resume, Reverse, Delay et Repeat)
- Flex Effect: Animation Easing Personalisée (easingFunction) et exemple
- Flex Effect: Utiliser des effets avec du texte (embedded Font), exemple
- Flex DefaultListEffect et DefaultTileListEffect – Appliquer un effet à une List/TileList à chaque modification de son dataProvider
Création d'effets personnalisés
Bien que vous puissiez utiliser les effets standards et composites (Sequence et Parallel) pour réaliser la plupart des effets dont vous avez besoin pour une application, parfois les solutions apportées par le Framework Flex ne vous permettront pas d'atteindre votre but. Dans ce cas-là, le Framework Flex vous permet de créer vos propres effets personnalisés que vous pourrez utiliser exactement comme vous utilisez les effets standards.
La création d'effets personnalisés requiert une connaissance approfondie de la manière dont sont crées les effets par le framework. Parce qu'il n'est pas simple de travailler avec les effets, il n'est pas nécessaire de s'intéresser à la manière sont crées les effets tant que vous ne voulez pas écrire un effet personnalisé.
La partie du framework Flex consacrée aux effets consiste en deux type de classes basiques: effect factories et effect instances. Lorsque vous créez un nouvel objet effet en utilisant du MXML ou de l'ActionScript, vous travaillez avec une classe effect factory. Cependant, quand l'effet est appliqué a un composant, l'objet utilisé est en fait un effect instance. L'objet effet que vous créez en utilisant du MXML et/ou de l'ActionScript en utilisant les classes telles que Move ou Resize utilise un Design Pattern appelé la méthode de la Fabrique (Factory Method). La méthode de la Fabrique veut dire que la classe Fabrique est responsable de la création des instances d'effets, qui sont ce qui est appliqué au composant.
- Flex Effect: Effets personnalisés, définir une classe EffectInstance
- Flex Effect: Effets personnalisés, définir une classe Effect Factory (fabrique)
- Flex Effect: Utiliser des effets personnalisés
Vous pouvez aussi créer des effets Tween personnalisés pour créer des effets animés dans le temps et plus pointus:
Utilisation des Transitions
Les transitions permettent d'appliquer des effets lors des changements d'états. L'utilisation des transitions est très simple. Avant d'utiliser les transitions, assurez-vous que vous avez deux états ou plus entre lesquels vous voulez appliquer une transition. Une fois que ces états sont définis, vous pouvez créer les transitions que vous voulez.
Vous pouvez créer des transitions en utilisant du MXML ou de l'ActionScript (AS3).
Mes projets (Open Source)
Autres
