Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - Le nouveau moteur d'animation

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 25 janvier 2011

Cet article est une traduction d'un mini livre nommé Flex 4 in a Day de Mihai Corlan.

Adobe a donné son accord concernant la traduction de ce mini-livre.

Tous les nouveaux effets Flex 4 sont des sous-classes de la classe Animation, qui est une sous-classe de la classe Effect. Cela permet au framework Flex 4 de proposer une hiérarchie parallèle d'effets qui ne casse pas la compatibilité avec les anciens effets, puisque ceux-ci sont des sous-classes de la classe TweenEffect. Les fonctionnalités exposées par la classe Animation sont similaires à celles de la classe Tween dans Flex 3.

Les nouvelles classes pour l'animation sont groupées dans le package spark.effects.

L'animation peut-être un changement de position (effectué par l'effet Move), un changement de taille (effectué par l'effet Resize), un changement de visibilité (effectué par l'effet Fade) ou tous autres types d’animations réalisées par des effets ou exécutées directement par le biais de la classe Animation..

Quand vous définissez des effets d'animations, vous créez une instance de la classe Animate, ou d'une sous-classe de la classe Animate. Une instance de la classe Animation est créée quand la méthode play() est exécutée. L'instance de la classe Animation accepte des valeurs de début et de fin, une durée et des paramètres optionnels tels que des objets d'accélérations ou d'interpolations.

<s:Animate id="mover" target="{button}" duration="1000">
	<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100" />
	<s:SimpleMotionPath property="y" valueTo="100" />
	<s:SimpleMotionPath property="width" valueBy="20" />
</s:Animate><s:Button id="button" click="mover.play()"/>

La classe Animation est un moteur de temps. Cette classe calcule les propriétés sur la base des propriétés qui lui sont passées, elle n'anime pas les objets par elle-même. Une cible d'animation lui est passée et est responsable de consommer les nouvelles propriétés (et d'animer les objets).

<s:Elastic id="elastic" />
<s:Animation id="animation" animationTarget="{new utilities.PropertyAnimator(rect)}" easer="{elastic}" duration="1200">
	<s:SimpleMotionPath property="x" valueFrom="0" valueTo="200" />
	<s:SimpleMotionPath property="y" valueFrom="0" valueTo="200" />
</s:Animation>

Construire des effets

Flex 4 comprend plusieurs sous-classes de la classe Animate permettant la manipulation des effets les plus utilisés. Ces effets sont responsables de fournir les propriétés à la classe Animate, puis d'exécuter toutes les fonctionnalités destinées à animer l'objet ciblé. La convention de nommage de ces effets est assez suggestive, les noms décrivent le type d'animation réalisé par chaque effet.

  • L'effet Resize – change la largeur, la hauteur ou les deux dimensions d'un composant.
    Quand les valeurs de départ du redimensionnement ne sont pas fournies, les valeurs actuelles de l'objet sont utilisées. Spécifier 2 propriétés parmi from, to et by demande au moteur de calculer la troisième propriété.

    <s:Resize id="resizer" target="{rect}" widthTo="200" heightTo="200" />
    ...
    <s:Button id="resizeBtn" label="Resize effect" click="resizer.play()" />
  • Les effets de transformation (Move, Rotate, Scale) – ces effects ne fonctionnent que dans des sous-classes de UIComponent et GraphicElement. Les effets de transformation opèrent par rapport au centre de transformation de la cible. Par défaut, c'est le coin haut gauche de la cible. Pour jouer la transformation autour du point central de la cible, il faut définir la propriété autoCenterTransform sur la valeur true.

    <s:Move id="mover" target="{rect}" xTo="200" yTo="200" />
    <s:Rotate id="rotator" target="{rect}" angleTo="120" autoCenterTransform="true" />
    <s:Scale id="scaler" target="{rect}" scaleXBy="2" scaleYBy="2" autoCenterTransform="true" /><s:Button id="moveBtn" label="Move effect" click="mover.play()" />
    <s:Button id="rotateBtn" label="Rotate effect" click="rotator.play()" />
    <s:Button id="scaleBtn" label="Scale effect" click="scaler.play()" />
  • L'effet Fade – cet effet anime la propriété alpha d'un composant.

    <s:Fade id="fader" target="{rect}" alphaTo="0.5" /><s:Button id="fadeBtn" label="Fade effect" click="fader.play()" />
  • L'effet AnimateColor – anime un changement dans la propriété de couleur au fil du temps, avec une interpolation entre les données des valeurs des propriétés colorFrom et colorTo sur une base par canal

    <s:AnimateColor id="colorEffect" target="{myGradient}" colorFrom="0x0000FF" colorTo="0xFF0000" repeatCount="2" repeatBehavior="reverse" /><s:Button id="clrBtn" label="Color effect" click="colorEffect.play()" />
  • L'animation Keyframe – elle est réalisée avec l'aide des classes MotionPath and Keyframe. Les objets Keyframe, spécifiés en tant qu'enfants d'une instance MotionPath, sont des paires clés/valeurs dont une propriété va prendre la valeur à un instant précis de l'animation.

    <s:Animate id="colorKeyframes" target="{myGradient}">
    	<s:MotionPath property="alpha">
    		<s:Keyframe time="500" value="1.0" />
    		<s:Keyframe time="500" value="0.3" />
    		<s:Keyframe time="1100" value="0.0" />
    		<s:Keyframe time="300" value="0.3" />
    		<s:Keyframe time="300" value="0.5" />
    		<s:Keyframe time="300" value="1.0" />
    	</s:MotionPath>
    	<s:MotionPath property="color">
    		<s:Keyframe time="1000" value="0x00FF00" />
    		<s:Keyframe time="2000" value="0xCCCCCC" />
    	</s:MotionPath>
    </s:Animate><s:Button id="clrKeyframesBtn" label="Keyframe animate effect" click="colorKeyframes.play()" />

Effets avancés

  • Les effets 3D – Ces effets ajoutent le support de l'axe z dans l'exécution d'une animation.
    Augmenter la valeur z fera s'éloigner l'objet du spectateur, la diminuer aura l'effet inverse, l'objet se déplacera vers le spectateur. Comme pour les effets de transformation 2D, l'utilisation des effets de transformation 3D peut modifier la mise en page du conteneur parent de l'objet animé.
    Pour modifier ce comportement, il faut définir la propriété applyChangePostLayout de l'effet sur la valeur false.

    <s:Move3D id="moverBis" duration="600" xBy="-200" zBy="-200" autoCenterTransform="true" repeatCount="2" repeatBehavior="reverse" target="{rect}" />
    <s:Rotate3D id="rotatorBis" target="{rect}" angleXFrom="0" angleXTo="180" angleYFrom="0" angleYTo="180" duration="1000" autoCenterTransform="true" />
    <s:Scale3D id="scalerBis" target="{rect}" scaleXBy="-.25" />
    ...
    <s:Button id="moveBtnBis" label="3D Move effect" click="moverBis.play()" />
    <s:Button id="rotateBtnBis" label="3D Rotate effect" click="rotatorBis.play()" />
    <s:Button id="scaleBtnBis" label="3D Scale effect" click="scalerBis.play()" />
  • Les effets Pixel Shader - Ces effets sont utilisés pour appliquer une animation à un objet cible qui a une représentation bitmap avant et après l'animation.
    Ces effets peuvent bien sûr agir sur des objets Image, mais permettent aussi d'animer les composant Flex. Pour cela, ils capturent une image bitmap du composant, avant et après l'animation, et appliquent celle-ci entre ces deux images.

    [Embed(source="assets/Blue hills.jpg")]
    private const ImgA:Class;
    [Embed(source="assets/Sunset.jpg")]
    private const ImgB:Class;
    ...
    <s:CrossFade id="crossFade" bitmapFrom="{new ImgA().bitmapData}" bitmapTo="{new ImgB().bitmapData}" target="{fadded}" duration="2000" repeatCount="2" repeatBehavior="reverse" />
    <s:Wipe id="wipe" bitmapFrom="{new ImgA().bitmapData}" bitmapTo="{new ImgB().bitmapData}" target="{fadded}" duration="2000" repeatCount="2" repeatBehavior="reverse" />
    ...
    <s:Button id="crossFadeBtn" label="Cross fade effect" click="crossFade.play()" />
    <s:Button id="wipeBtn" label="Wipe effect" click="wipe.play()" />
  • Les effets AnimateFilter – Les effets AnimateFilter différent des autres effets parce qu'ils permettent d'animer les propriétés d'un filtre appliqué à un objet cible plutôt que les propriétés de l'objet cible. Les filtres sont inclus dans le même paquet; les filtres courants sont DropShadowFilter, GlowFilter, BlurFilter et ShaderFilter.

    <s:AnimateFilter id="animF" target="{shadowRect}" bitmapFilter="{new spark.filters.DropShadowFilter()}">
    	<s:SimpleMotionPath property="color" valueFrom="0" valueTo="0x0000FF" />
    	<s:SimpleMotionPath property="distance" valueFrom="0" valueTo="20" />
    	<s:SimpleMotionPath property="angle" valueFrom="270" valueTo="360" />
    </s:AnimateFilter>
    ...
    <s:Button id="animFilterBtn" label="AnimateFilter effect" click="animF.play()" />
  • Liaisons d'effets (Parallel vs Sequence) – Les effets peuvent être liés pour être joués soit en parallèle soit en séquence.
    Les nouvelles implémentations Spark permettent les effets composites de type Parallel ou Sequence. Ces effets sont à utiliser pour faire exactement ce que leur nom laisse entendre: soit exécuter les effets enfants en parallèle, soit les exécuter en une séquence, les uns après les autres. Sequence peut également permettre d'exécuter des actions d'effets au cours d'une transition.

    <s:Sequence id="seq">
    	<s:Move target="{rect}" xBy="200" />
    	<s:Rotate target="{rect}" angleBy="360" autoCenterTransform="true" />
    	<s:Move target="{rect}" xBy="-200" />
    </s:Sequence>
    <s:Parallel id="parallelEffect">
    	<s:Rotate target="{rect}" angleTo="360" autoCenterTransform="true" />
    	<s:AnimateColor target="{myGradient}" colorFrom="0x0000FF" colorTo="0xFF0000" repeatCount="2" repeatBehavior="reverse" />
    </s:Parallel>
    ...
    <s:Button id="parallelBtn" label="Parallel effect" click="parallelEffect.play()" />
    <s:Button id="seqBtn" label="Sequence effect" click="seq.play()" />




Les effets Spark supportent tous les événements principaux tels que effectStart, effectStop et effectEnd. Il supportent aussi effectRepeat diffusé lorsque l'effet commence une nouvelle répétition et effectUpdate, diffusé chaque fois que l'effet met à jour l'objet cible.

On peut changer l'accélération d'une animation en utilisant une classe d'accélération avec l'effet. Flex fournit des classes d'accélérations dans le package spark.effects.easing, par exemple Bounce, Elastic, Linear, Power et Sine.

References