Effets visuels

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer

tutoriel_vers_formation_Flex

La manière dont un composant apparait ou disparait peut être personnalisé grâce à des effets visuels.

Applicables à n'importe quel composant, ils sont particulièrement utiles en tant que transition entre deux états, pour atténuer la soudaineté du changement de vue, comme nous le verrons dans le prochain chapitre.

Mais commençons d'abord par mieux comprendre le fonctionnement des effets Flex.

 

Différents types d'effets

 

Il existe un grand nombre d'effets visuels différents, dont par exemple : 

  • Move pour déplacer un composant (anime les propriétés x et y),
  • Fade pour modifier l'opacité (anime la propriété alpha),
  • Resize pour redimensionner le composant (anime les propriétés width et height),
  • Scale pour les mises à l'échelle,
  • Rotate pour appliquer une rotation sur le composant,
  • AnimateColor pour modifier la propriété color.

 

Les effets sont des composants MXML non visuels, ils doivent donc être déclarés dans des balises <fx:Declarations> :

<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo" >
 
      <fx:Declarations>
            <!-- Définition des effets -->         
      </fx:Declarations>
 
      <!-- Ajout des composants visuels : Panel, Bouton, Label, etc. -->
</s:Application>

 

A chaque effet correspond un composant MXML différent. Toutefois, certaines propriétés sont communes à tous les effets :

  • id : identifie l'effet à l'aide d'une chaine de caractères unique,
  • target : indique le composant cible auquel doit s'appliquer l'effet en ayant pour valeur la chaine de caractères "{identifiant-cible}". L'ensemble de crochets est une notation que nous n'avons pas encore abordée : c'est une notation utilisée pour le Data Binding, que nous étudierons dans un prochain chapitre. Pour l'instant, nous nous contenterons donc de savoir que cette notation permet d'indiquer le composant dont l'identifiant est indiqué dans les crochets.
  • duration (optionnel) : indique en millisecondes la durée de l'effet,
  • startDelay (optionnel) : indique en millisecondes le délai qui s'écoule avant de commencer l'effet.

Les effets disposent également de plusieurs méthodes permettant de gérer leur déclenchement :

  • play() démarre l'effet,
  • pause() interromp l'effet,
  • resume() reprend l'effet là où pause() l'a interrompu,
  • stop() arrête l'effet en cours ; dans ce cas, il ne peut être repris par resume(), il devra recommencer entièrement à l'aide de la méthode pause().

 

Effet Move

 

L'effet de déplacement d'un composant est défini à l'aide de la balise <s:Move>. Nous indiquons le composant auquel doit s'appliquer l'effet en spécifiant l'identifiant du composant cible dans la propriété target. Nous ajouterons également un identifiant à l'effet, de manière à pouvoir l'appeler et le manipuler, notamment pour le déclencher.

 

Le code suivant crée un effet de déplacement qui s'appliquera au bouton nommé moveButton, comme l'indique la propriété target ligne 8:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo" >
 
      <fx:Declarations>
            <s:Move id="moveEffect" target="{moveButton}" />
      </fx:Declarations>
 
      <s:Panel title="Démonstration de l'effet Move" width="300" height="300">
            <s:Button id="moveButton" label="Effet Move" />
      </s:Panel>
</s:Application>

 

Paramétrage de l'effet

 

Pour paramétrer le déplacement, nous disposons des propriétés suivantes (notez que x représente l'axe horizontal, et y l'axe vertical) :

  • xFrom et yFrom : position du composant cible pour débuter le déplacement, en pixels,
  • xTo et yTo : position du composant cible, à la fin du déplacement,
  • xBy et yBy : nombre de pixels de déplacement, les valeurs peuvent être positives (déplacements vers la droite et vers le bas) ou négatives (déplacements vers la gauche et vers le haut).

La ligne suivante définit ainsi un déplacement du bouton de 50 pixels vers le bas (quelle que soit la position verticale du bouton) grâce à la propriété yBy. De plus, le bouton sera déplacé jusqu'à la coordonnée horizontale 100, sauf le bouton y est déjà, auquel cas aucun déplacement ne sera effectué sur l'axe horizontal :

<s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100"/>

 

Déclenchement de l'effet

 

Toutefois, notre bouton ne peut pas encore se déplacer : l'effet n'est jamais déclenché. Nous allons donc ajouter au bouton cible une propriété click, qui appellera la méthode play() de l'effet

 

Le code complet de cet effet de déplacement est donc le suivant : 

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo" >
 
      <fx:Declarations>
            <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100"/>
      </fx:Declarations>
 
      <s:Panel title="Démonstration de l'effet Move" width="300" height="300">
            <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
      </s:Panel>
</s:Application>

Notez qu'à chaque clic sur le bouton, l'effet nommé moveEffect démarrera. Nous pourrons donc déplacer le bouton plusieurs fois d'affilée et observer le résultat.

 

Testons l'application pour visualiser les déplacements effectués. Au lancement, le bouton est situé en haut à gauche du Panel, puisque nous n'avons pas spécifié de position ni d'agencement particulier :

effet_move

En cliquant sur le bouton, celui-ci se déplace bien vers la coordonnée 100 en horizontal, et de 50 pixels vers le bas:

effet_move_2

Si nous cliquons à nouveau, il n'y a aucun déplacement horizontalement, puisque le bouton est déjà à la coordonnée 100, mais il descend encore de 50 pixels :

effet_move_3

 

Effet Resize

 

L'effet de redimensionnement permet d'animer les propriétés width et height grâce au composant <s:Resize>. Son paramétrage s'effectue à l'aide de propriétés similaires à celles de l'effet Move :

  • heightFrom et widthFrom : dimensions du composants cible au début de l'effet; si elles ne sont pas spécifiées, elles vaudront la taille du composant avant le déclenchement de l'effet,
  • heightTo et widthTo :dimensions du composants cible à l'issue de l'effet; si elles ne sont pas spécifiées, elles vaudront la taille du composant avant le déclenchement de l'effet,
  • heightBy et widthBy : nombre de pixels correspondant à la modification de hauteur ou de largeur de la cible ; les valeurs peuvent être positives (augmentation de taille) ou négatives (diminution).

 

    A titre d'exemple, nous allons ajouter un deuxième bouton à l'application précédente, associé à un effet de redimensionnement qui devra fixer la hauteur finale à 100 pixels et diminuer la largeur de 10 pixels (ligne 9 ci-dessous).

    Nous ne pouvons pas utiliser de layout dans le panel, sous peine d'annuler l'effet Move associé au premier bouton que nous avions inséré. Pour éviter le chevauchement des boutons, nous allons donc fixer la position du bouton "Effet Resize" à la coordonnée horizontale 100 (ligne 14) :

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" >
     
          <fx:Declarations>
                <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100" />
                <s:Resize id="resizeEffect" target="{resizeButton}" heightTo="100" widthBy="-15"/>
          </fx:Declarations>
     
          <s:Panel title="Démonstration d'effets visuels" width="300" height="300">
                <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
                <s:Button id="resizeButton" label="Effet Resize" click="resizeEffect.play()" x="100"/>
          </s:Panel>
    </s:Application>

     

    Au lancement de l'application, nous avons bien deux boutons dans le Panel, qui ont la taille par défaut des composants de type bouton :

    effet_resize

    En cliquant sur le bouton, sa hauteur augmente bien jusqu'à valoir 100 pixels, et la largeur a diminué de 15 :

    effet_resize_2

     

    Si nous cliquons à nouveau sur le bouton, la hauteur ne change pas puisqu'elle est déjà à 100 pixels. Par contre, la largeur diminue encore, grâce à la propriété widthBy de l'effet :

    effet_resize_3

     

    Effet Fade

     

    L'effet Fade consiste à animer l'opacité du composant, c'est-à-dire sa propriété alpha. La valeur de cette propriété est compris entre 0.0 (transparence) et 1.0 (opacité totale), et vaut 1 par défaut pour tout composant.

    Selon le paramétrage spécifié, un effet Fade peut faire apparaitre un composant en augmentant sa propriété alpha ou le faire disparaitre et le rendre transparent en la diminuant. Pour ce faire, nous utiliserons les paramètres de l'effet :

    • alphaFrom : valeur de la propriété alpha au début de l'effet ; elle vaut 1 par défaut,
    • alphaTo : valeur de la propriété alpha à la fin de l'effet ; elle vaut 1 par défaut.

    Pour illustrer cet effet, nous allons ajouter un troisième bouton dans notre Panel, qui sera cette fois placé à la coordonnée x = 200 pixels, de manière à ne pas chevaucher les autres boutons déjà présents.

    A ce bouton, nous associons un effet Fade qui, lors d'un clic sur le bouton, diminuera son opacité jusqu'à la valeur 0.2 :

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" >
     
          <fx:Declarations>
                <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100" />
                <s:Resize id="resizeEffect" target="{resizeButton}" heightTo="100" widthBy="-5"/>
                <s:Fade id="fadeEffect" target="{fadeButton}" alphaTo="0.2"/>
          </fx:Declarations>
     
          <s:Panel title="Démonstration d'effets visuels" width="300" height="300">
                <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
                <s:Button id="resizeButton" label="Effet Resize" click="resizeEffect.play()" x="100"/>
                <s:Button id="fadeButton" label="Effet Fade" click="fadeEffect.play()" x="200"/>
          </s:Panel>
    </s:Application>

     

    Au lancement de l'application, le bouton "Effet Fade" a une opacité totale, comme tous les autres composants :

    effet_fade

     

    Lors d'un clic sur ce bouton, son opacité diminue, pour devenir presque transparent :

    effet_fade_2

     

    Effet Scale

     

    L'effet Scale permet de mettre à l'échelle un composant. Il est défini par le composant <s:Scale>, qui utilise des propriétés similaires aux effets Move et Resize :

    • scaleXFrom et scaleXTo : facteur de mise à l'échelle dans la direction horizontale (X) ou verticale (Y) au début de l'effet. La valeur 0.0 est invalide, et la valeur 1.0 est la valeur par défaut.
    • scaleXTo et scaleYTo : facteur de mise à l'échelle à l'issue de l'effet. La valeur 0.0 est invalide, et la valeur 1.0 est la valeur par défaut.
    • scaleXBy et scaleYBy : facteur de différence d'échelle à appliquer au composant ; ce paramètre optionnel peut être utilisé à la place des valeurs de départ et de fin pour spécifier la différence d'échelle obtenue par l'effet.

    Pour tester cet effet, ajoutons un quatrième bouton à notre application, ainsi qu'un effet Scale qui augmente la taille du composant avec un facteur de 1,5 dans la direction horizontale et de 2 dans la direction verticale : 

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" >
     
          <fx:Declarations>
                <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100" />
                <s:Resize id="resizeEffect" target="{resizeButton}" heightTo="100" widthBy="-15"/>
                <s:Fade id="fadeEffect" target="{fadeButton}" alphaTo="0.2"/>
                <s:Scale id="scaleEffect" target="{scaleButton}" scaleXBy="1.5" scaleYBy="2"/>
          </fx:Declarations>
     
          <s:Panel title="Démonstration d'effets visuels" width="300" height="300">
                <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
                <s:Button id="resizeButton" label="Effet Resize" click="resizeEffect.play()" x="100"/>
                <s:Button id="fadeButton" label="Effet Fade" click="fadeEffect.play()" x="200"/>
                <s:Button id="scaleButton" label="Effet Scale" click="scaleEffect.play()" y="75"/>
          </s:Panel>
    </s:Application>

     

     A l'exécution du programme, nous obtenons bien les quatre boutons, auxquels aucun effet n'a encore été appliqué :

    effet_scale

     

    Lors d'un clic sur le bouton, le bouton devient bien deux fois plus grand en hauteur et une fois et demi plus grand en largeur :

    effet_scale_2

     

    En cliquant à nouveau sur le bouton, l'effet s'applique une deuxième fois (grâce aux propriétés scaleXBy et scaleYBy qui indiquent la différence d'échelle et non pas la valeur finale) : 

    effet_scale_3

     

     

     

     

    Effet Rotate

     

    L'effet Rotate, défini par le composant <s:Rotate>, permet de faire tourner un composant cible autour de son centre.

     

    Les propriété angleFrom, angleTo et angleBy permettent de paramétrer l'angle initial, l'angle final ou la différence d'angle induite par la rotation.

    Les valeurs de ces propriétés s'expriment en degrés. angleFrom et angleTo attendent une valeur comprise entre 0 et 360. La valeur de la propriété angleBy peut être positive (rotation dans le sens horaire) ou négative (rotation dans le sens anti-horaire) et n'est pas limitée. Ainsi, donner une valeur -720 à la propriété angleBy induira une rotation de deux tours complets dans le sens anti-horaire.

     

    Pour tester cet effet Rotate, ajoutons un cinquième bouton à notre application auquel nous appliquerons un effet de rotation de 15 degrés dans le sens horaire :

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
          xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" >
     
          <fx:Declarations>
                <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100" />
                <s:Resize id="resizeEffect" target="{resizeButton}" heightTo="100" widthBy="-15"/>
                <s:Fade id="fadeEffect" target="{fadeButton}" alphaTo="0.2"/>
                <s:Scale id="scaleEffect" target="{scaleButton}" scaleXBy="1.5" scaleYBy="3"/>
                <s:Rotate id="rotateEffect" target="{rotateButton}" angleBy="15" />
          </fx:Declarations>
     
          <s:Panel title="Démonstration d'effets visuels" width="300" height="300">
                <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
                <s:Button id="resizeButton" label="Effet Resize" click="resizeEffect.play()" x="100"/>
                <s:Button id="fadeButton" label="Effet Fade" click="fadeEffect.play()" x="200"/>
                <s:Button id="scaleButton" label="Effet Scale" click="scaleEffect.play()" y="75"/>
                <s:Button id="rotateButton" label="Effet Rotate" click="rotateEffect.play()" y="75" x="100"/>
          </s:Panel>
    </s:Application>

     

    Au lancement de l'application, nous avons désormais cinq boutons dans le Panel :

    effet_rotate

     

    Lors d'un clic sur le bouton, celui-ci tourne de 15° dans le sens horaire : 

    effet_rotate_2

     

     

    Effet AnimateColor

     

    L'effet AnimateColor permet d'animer la propriété color d'un composant, paramétrables à l'aide des propriétés colorFrom et colorTo.

     

    Ajoutons donc un sixième et dernier bouton à notre application, auquel nous associerons un effet AnimateColor qui fera passer le texte du bouton en rouge :

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
          xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx" >
     
          <fx:Declarations>
                <s:Move id="moveEffect" target="{moveButton}" yBy="50" xTo="100" />
                <s:Scale id="scaleEffect" target="{scaleButton}" scaleXBy="1.5" scaleYBy="3" />
                <s:Rotate id="rotateEffect" target="{rotateButton}" angleBy="720"/>
                <s:Resize id="resizeEffect" target="{resizeButton}" heightTo="100" widthBy="-15"/>
                <s:Fade id="fadeEffect" target="{fadeButton}" alphaTo="0.2" />
                <s:AnimateColor id="animateColorEffect" target="{colorButton}" colorTo="red" />
          </fx:Declarations>
     
          <s:Panel title="Démonstration d'effets visuels" width="300" height="300">
                <s:Button id="moveButton" label="Effet Move" click="moveEffect.play()" />
                <s:Button id="resizeButton" label="Effet Resize" click="resizeEffect.play()" x="100"/>
                <s:Button id="fadeButton" label="Effet Fade" click="fadeEffect.play()" x="200"/>
                <s:Button id="scaleButton" label="Effet Scale" click="scaleEffect.play()" y="75"/>
                <s:Button id="rotateButton" label="Effet Rotate" click="rotateEffect.play()" y="75" x="100"/>
                <s:Button id="colorButton" label="Effet Color" click="animateColorEffect.play()" y="75" x="200"/>
          </s:Panel>
    </s:Application>

     

    L'exécution de l'application donne un affichage semblable à celui-ci :

    effet_animateColor

     

    Après un clic sur le bouton "Effet Color", le texte est désormais écrit en rouge :

    effet_animateColor_2

     

    tutoriel_precedent

    tutoriel_suivant

    .
    X
     
     
     
     
     

    You havecharacters left.