Devoxx – Jour 2 – Les effets avec Flex 4

La session Wicket initialement prévue Mardi matin ayant été annulée, j’ai assisté à la place à une présentation sur les effets Flex. Je pensais que je ne pouvais rien apprendre de plus à ce sujet, je me suis trompée : l’utilisation des effets a été simplifiée, et il est maintenant possible d’étendre les effets.

 

Qu’est ce qu’un effet ?

Flex 3

En Flex, il est possible de définir des effets pour des transitions ou lors du déclenchement d’un évènement (hide, show par exemple).
Nous allons reprendre l’exemple du Dissolve disponible sur le Flex 3 Component Explorer.
On commence par définir les effets :

Puis on indique au composant cible, l’effet qu’il doit utiliser lorsque l’on cache le label :

...

Dans Flex 3, il n’est pas possible de gérer des effets sur la valeur d’une propriété comme le texte ou la couleur par exemple. Les effets ne sont en effet applicables que sur les composants.

Flex 4

La nouveauté dans Flex 4 tient tout d’abord dans la définition d’une nouvelle super classe Animate qui vient remplacer TweenEffect. Cette nouvelle super classe fournit de nouvelles propriétés telles que easer, interpolator et motionPaths que nous verrons par la suite.

Dans cette nouvelle version, les effets sont plus flexibles et il est possible de :

• modifier la valeur des propriétés telles que le gradient d’une couleur ou la taille,
• régler la vitesse de l’effet, lui donner une accélération au début ou à la fin par exemple,
• déplacer plus facilement les composants lors d’un effet.

Les nouveaux effets

Les effets 3D

Parmi les nouveaux effets, voici probablement les plus impressionnants d’entre eux : les effets en trois dimensions. Grâce à Flash Player 10 qui est maintenant capable de représenter un objet 3D, on peut par exemple exécuter un effet de déplacement en profondeur ou une rotation.

La configuration des effets

Avec cette nouvelle super classe Animate viennent de nouvelles propriétés :

• easer : l’atténuation de l’effet (en quelque sorte une accélération ou décélération avec laquelle l’effet sera appliqué),
• interpolator : fonction utilisée par l’effet pour calculer les valeurs à prendre pour une propriété entre le début et la fin de cet effet,
• motionPaths : un vecteur contenant des objets MotionPath, chacun portant le nom et la valeur que la propriété peut prendre,
• repeatBehavior : permet de répéter l’effet.

Avec ces nouvelles fonctions, il est encore plus simple de réaliser des effets customisés comme par exemple un bouton qui s’enfonce lorsque l’on clique dessus, ou un changement de couleur lorsque le curseur pointe un composant. Maintenant à vous de laisser parler votre imagination.