Ajouter

Effets d'animation de propriétés d'un composant Spark

Ce tutorial aborde le sujet des différents effets d'animation de propriétés d'un composant du package Spark

Les effets de propriétés d'un composant Spark modifient une ou plusieurs des propriétés de ce composant sur une durée de temps définie. Les propriétés des effets Spark sont des sous-classes de la classe Animate, qui inclue les classes ci-dessous :

- Animate : Effet d'animation des propriétés d'une cible définie (target)
- Fade : Effet d'animation en fondu en modifiant la propriété alpha de la target
- Resize : Effet d'animation d'un redimensionnement d'une hauteur et largeur d'une cible
- AnimateColor : Effet d'animation pour modifier une couleur d'une cible, via les paramètres color ou fontColor

Attention : vous devez impérativement disposer du SDK 4.0.0.10007 ou supérieur.

1. Effet d'animation :

Utilisez un effet d'animation pour animer directement n'importe quelle propriété d'une cible. Dans l'exemple ci-dessous, on créé une instance de la classe SimpleMotionPath dans laquelle on va définir les propriétés du redimensionnement :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/10/effets-d-animation-propriete-spark -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Declarations>
        <s:Animate id="scaleUp"
            target="{myB1}">
            <s:SimpleMotionPath property="scaleX" 
                valueFrom="1.0" valueTo="1.5"/>
        </s:Animate>
        <s:Animate id="scaleDown"
            target="{myB1}">
            <s:SimpleMotionPath property="scaleX" 
                valueFrom="1.5" valueTo="1.0"/>
        </s:Animate>
    </fx:Declarations>
 
    <s:Button id="myB1"
        label="Scale Button"
        mouseDown="scaleUp.end(); scaleUp.play();"
        mouseUp="scaleDown.end(); scaleDown.play();"/>
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

La classe « SimpleMotionPath » définie les valeurs des propriétés avant le lancement de l'effet, le moment ou l'effet va se lancer, et les propriétés qui seront définies à la fin de l'effet. Vous pouvez insérer une multitude d'instance de la classe « SimpleMotionPath » afin d'animer plusieurs composants ou propriétés comme dans l'exemple ci-dessous :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/10/effets-d-animation-propriete-spark -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
 
    <fx:Declarations>
        <s:Animate id="scaleIncrease"
            target="{myB1}">
            <s:SimpleMotionPath property="scaleX" 
                valueFrom="1.0" valueTo="1.5"/>
            <s:SimpleMotionPath property="scaleY" 
                valueFrom="1.0" valueTo="1.5"/>
        </s:Animate>
        <s:Animate id="scaleDecrease"
            target="{myB1}"> 
            <s:SimpleMotionPath property="scaleX" 
                valueFrom="1.5" valueTo="1.0"/>                
            <s:SimpleMotionPath property="scaleY" 
                valueFrom="1.5" valueTo="1.0"/>                
        </s:Animate>
    </fx:Declarations>
 
    <s:Button id="myB1"
        label="Scale Button"
        mouseDown="scaleDecrease.end(); scaleIncrease.play();"
        mouseUp="scaleIncrease.end(); scaleDecrease.play();"/>
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

2. Fondu, Redimensionnement et Animation de propriétés :

Les effets « Fade », « Resize » et « AnimateColor » modifient des propriétés spécifiques de la cible. Ces effets sont prédéfinis dans la classe Animate. Vous n'avez donc pas forcément besoin d'utiliser la classe SimpleMotionPath si vous souhaité animer une propriété en particulier.

L'exemple ci-dessous montre l'utilisation d'un effet de redimensionnement (Resize) sur un composant image Halo :

 MXML | 
 Copier le code
 
<?xml version="1.0"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/10/effets-d-animation-propriete-spark -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <fx:Declarations>
        <s:Resize id="myResizeEffect" 
            target="{myImage}"
            widthBy="10" heightBy="10"/>
    </fx:Declarations>
 
    <mx:Image id="myImage" 
        source="@Embed(source='assets/adobe.png')"/>
    <s:Button label="Resize Me" 
        click="myResizeEffect.end();myResizeEffect.play();"/>
</s:Application>n="scaleDecrease.end(); scaleIncrease.play();"
        mouseUp="scaleIncrease.end(); scaleDecrease.play();"/>
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

Cet exemple met en avant le redimensionnement de l'image Adobe en augmentant la hauteur de 10px à chaque fois que l'utilisateur clique sur le bouton.

L'effet de redimensionnement (Resize) a six différentes propriétés prédéfinies, à savoir : heightBy, widthBy, heightFrom, widthFrom, heightTo, and widthTo. Si certains paramètres ne sont pas définis au moment de la configuration de l'effet. Flash Builder calculera automatiquement les valeurs. Dans l'exemple précédent, les valeurs heightFrom et widthFrom sont définies comme ayant leur taille actuelle, et les valeurs heightTo et widthTo sont les valeurs finales.

Autre(s) source(s) proche(s) de ce sujet :

1. Créer une animation de couleur sur un composant Spark Button dans Flex 4 Gumbo