Flex et son composant mx:Parallel
…je voulais vous parler du composant <mx:Parallel> de Flex.
Pourquoi? Parce que je trouve ça tellement simple et intuitif à utiliser que je trouve que ça mérite qu’on s’y arrête rapidement.
Comme son nom le laisse deviner, ce composant permet de réaliser des actions en parallèle.
Pour faire un exemple simple et rapide de son fonctionnement, je vais voir fournir l’exemple d’une “galerie” d’images qui deviennent moins opaques lorsque vous pointez votre souris dessus et s’agrandissent.
Puis nous réaliserons l’effet inverse lorsque l’image perd le focus de la souris.
J’ai utilisé la balise <mx:Fade> pour réaliser le premier effet, en lui ajoutant des paramètres de durée et <mx:Resize> pour le second.
Pour que les deux effets se déroulent en même temps, j’ai donc inséré mes deux composants dans un <mw:Parallel> pour les deux exemples (focus de l’image et perte de focus) et ai ajouté les paramètres rollOverEffect et rollOutEffect à mes images.
Un peu de visuel vaut mieux qu’un court discours donc :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" themeColor="silver" backgroundColor="#FFFFFF" paddingTop="5" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Canvas width="640" height="560" horizontalCenter="0"> <mx:Image x="250" y="30" source="@Embed(source='assets/flex.jpg')" width="40" height="38" toolTip="Flex" alpha="0.6" rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}"/> <mx:Image x="298" y="30" source="@Embed(source='assets/air.png')" width="40" height="40" toolTip="Air" alpha="0.6" rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}"/> <mx:Image x="346" y="30" source="@Embed(source='assets/android.png')" width="40" height="40" toolTip="Android" alpha="0.6" rollOverEffect="{fadeIn}" rollOutEffect="{fadeOut}"/> </mx:Canvas> <mx:Parallel id="fadeIn" duration="1000"> <mx:Fade alphaFrom="0.6" alphaTo="1"/> <mx:Resize widthTo="50" heightTo="50"/> </mx:Parallel> <mx:Parallel id="fadeOut" duration="1000"> <mx:Fade alphaFrom="1" alphaTo="0.6"/> <mx:Resize widthTo="40" heightTo="40"/> </mx:Parallel> </mx:Application>
Et voici le résultat.
Plutôt simple et sympa, non?
Tags: Flex