Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

5fév/086

Flex Effect: Effets composites en Sequence / Parallel (MXML et AS3)

Vous pouvez créer des effets simple en utilisant les effets standards, mais vous pouvez aussi créer des effets composite en les combinant. Il y a deux manières de combiner des effets: en séquence ou en parrallèle. Le composant Sequence permet de grouper des effets que vous voulez voir apparaitre les uns après les autres.
Par exemple, vous pouvez utiliser un composant Sequence pour appliquer d'abord un Fade puis appliquer un effet Move.
Depuis le MXML, vous pouvez simplement insérer les effets que vous voulez en séquence dans le tag Sequence comme ceci:

<mx:Sequence id="sequenceEffect">
	<mx:Fade />
	<mx:Move xTo="100" />
</mx:Sequence>

Notez que dans l'exemple précédent, l'instance de Sequence a un attribut "id", indiquant que vous aurez suelement besoin de vous référrer à l'instance de la Sequence, plutôt qu'aux effets insérés en séquence.

<mx:TextInput creationCompleteEffect="{sequenceEffect}" />

Vous pouvez ajouter une pause entre les effets séquencés en utilisant un effet Pause. Vous pouvez spécifier la longueur de la pause grâce à l'attribut duration du tag <mx:Pause>. L'exemple suivant fait disparaître la cible (target), se met en pause pendant 1000 ms et déplace ensuite la cible.

<mx:Sequence id="sequenceEffect">
	<mx:Fade />
	<mx:Pause duration="1000" />
	<mx:Move xTo="100" />
</mx:Sequence>

Le composant Parallel vous permet de grouper ensemble des effets que vous voulez voir apparaître en même temps. Par exemple, si vous voulez faire un Fade sur un composant et le bouger en même temps, vous pouvez utiliser l'effet parrallèle suivant:

<mx:Parallel id="parrallelEffect">
	<mx:Fade />
	<mx:Move xFrom="-100" />
</mx:Parallel>

Vous pouvez aussi insérer un effet composite dans un autre effet composite. Par exemple, l'exemple suivant fera disparaitre et bouger le composant cible en même temps, se mettre en pause pendant 1000 ms et ensuite tourner de 360 degrés.

<mx:Sequence id="sequenceEffect">
	<mx:Parallel id="parrallelEffect">
		<mx:Fade />
		<mx:Move xFrom="-100" />
	</mx:Parallel>
	<mx:Fade />
	<mx:Pause duration="1000" />
	<mx:Rotate/>
</mx:Sequence>

Vous pouvez aussi créer des effets composites en utilisant de l'ActionScript (AS3). Les même règles sont applicables à la création d'effet via AS3 que lorsque vous créer des effets standards en ActionScript. La seule différence est que vous avez besoin d'une manière de grouper les éléments à l'intérieur d'un effet composite. Pour cela, utilisez la méthode addChild() pour l'objet Parallel ou Sequence.

var sequenceEffect:Sequence = new Sequence();
sequenceEffect.addChild(rotateEffect);

Bien que les effets et les DisplayObjects ont tous les 2 une méthode addChild(), vous ne pouvez pas ajouter un effet à la liste d'affichage, tout comme vous ne pouvez pas ajouter un DisplayObject à un effet.

Remplis sous: Effect, MXML || Taggé comme: , , , , Laisser un commentaire

Articles similaires

Commentaires (6) Trackbacks (0)
  1. Enerol
    1 juillet 2010

    Bonjour,

    Sur une de mes appli, je gére un viewer d'image, et lorsque je crée, et que je lance dynamiquement un Parallel contenant un Effect Zoom et un Move je trouve que l'effet graphique est un peu sacadé et j'ai l'impression que le parrallele est légérement décalé.

    Les Effects Flex sont ils vraiment Optimisésd'un point de vue des ressources et de l'affichage ?

    Pense tu que cela pourrait peut être rendre mieux en utilisant des Tweeners externes du type MaxTween ou Coraline ? Je me le demande, vu les performances des Effects Flex

  2. fnicollet
    1 juillet 2010

    Salut,
    les "tweeners" ne viennent pas vraiment directement en remplacement des effets Flex. Il ne font "que" animer des propriétés dans le temps, et ils le font bien. Ils sont généralement bien plus rapides que les Tween utilisés par Flex mais un simple Zoom + Move sur une image ne devrait pas saccader. Peux-tu partager du code? Peut-être il y a une boulette dedans

    Fabien

  3. Enerol
    2 juillet 2010

    Je ne pense pas que le bout de code soit vraiment explicite, car les comportements sont plutot complexes, Mais voila un petit exemple.
    Je n'ai pas l'impression de faire quelque chose d'anormal.

    La fonction suivant s'occupe de gérer le zoom et en fonction de la future position de l'image et du futur niveau de zoom, elle recentrera l'image. Le drag drop permet de déplacer l'image lorsque le zoom est activé, mais avec ces tests, ca me permet de recentrer l'image si la future taille/position interdit le drag and drop (si l'image est plus petite que l'écran).

    COPIER-COLLER
    MXML:
    1. public function refreshZoom(_duration:int= 400):void{
    2.   if(_isEffecting || fileIsLoading){
    3.     return;
    4.   }
    5.  
    6.   //Génération de l'objet Zoom
    7.   var screenYCenterOnImage:Number = -(imageContainer.y - Application.application.height/2)*1/(currentScale/initScale);
    8.   var screenXCenterOnImage:Number = -(imageContainer.x - Application.application.width/2)*1/(currentScale/initScale);
    9.                
    10.   var zo:Zoom = new Zoom(imageContainer);
    11.   //Origine du zoom
    12.   zo.originY = screenYCenterOnImage;
    13.   zo.originX = screenXCenterOnImage;
    14.   //Tailles de zoom et mise a jour
    15.   zo.zoomWidthFrom = currentScale/initScale;
    16.   zo.zoomHeightFrom = currentScale/initScale;
    17.   zo.zoomWidthTo = futureScale/initScale;
    18.   zo.zoomHeightTo = futureScale/initScale;
    19.  
    20.  
    21.   _isEffecting = true;
    22.  
    23.  
    24.   var futureWidth:Number = (futureScale/initScale * imageContainer.contentWidth);
    25.   var futureHeight:Number = (futureScale/initScale * imageContainer.contentHeight);    
    26.   var currentWidth:Number = (currentScale/initScale * imageContainer.contentWidth);
    27.   var currentHeight:Number = (currentScale/initScale * imageContainer.contentHeight);
    28.   var sizeTest:Boolean = (futureWidth &lt;currentWidth || futureHeight 0 || futureX + futureWidth 0 || futureY +futureHeight  Application.application.width){
    29.       if(futureX&gt; 0){
    30.         mo.xTo = 0;
    31.       }else if(futureX + futureWidth  Application.application.width){
    32.         mo.xTo = (Application.application.width - futureWidth)/2;
    33.       }else{
    34.         mo.xTo = futureX;
    35.       }
    36.     }
    37.     if(futureHeight&gt; Application.application.height){
    38.       if (futureY&gt; 0){
    39.         mo.yTo = 0;
    40.       }else if(futureY + futureHeight  Application.application.height){
    41.         mo.yTo = (Application.application.height - futureHeight)/2;
    42.       }else{
    43.         mo.yTo = futureY;
    44.       }
    45.     }
    46.                    
    47.     mo.easingFunction = mx.effects.easing.Quadratic.easeOut;
    48.     zo.easingFunction = mx.effects.easing.Quadratic.easeOut;
    49.            
    50.     //Lancement du zoom et du mouvement en paralelle
    51.     var paralelEffects:Parallel = new Parallel();
    52.     paralelEffects.addChild(zo);
    53.     paralelEffects.addChild(mo);
    54.     paralelEffects.duration = _duration;
    55.     paralelEffects.addEventListener(EffectEvent.EFFECT_END,endZoomHandler,false,0,true);
    56.     paralelEffects.play();   
    57.   }else{
    58.     zo.duration = _duration;
    59.     zo.easingFunction = mx.effects.easing.Quadratic.easeOut;
    60.     //Enregistrement de la fin du zoom et de l'état de zoom
    61.     zo.addEventListener(EffectEvent.EFFECT_END,endZoomHandler,false,0,true);
    62.     //Lancement du zoom
    63.     zo.play();
    64.   }
    65.   currentScale = futureScale;
    66. }

    Le problème vient peut être que les images peuvent être en très grande qualité. avec des dimensions plutôt grandes ?

    Mais il m'est de toute façon impossible de réduire les images, il faut donc que je trouve une solution pour ne plus avoir de leger décallage entre move et zoom et les grésillements étranges que cela provoque sur l'image.

    J'essayerai avec des Tweeners qui peut être seront plus efficaces.

  4. fnicollet
    2 juillet 2010

    Salut,
    Juste un petit truc a la lecture de ton code. Tu devrais mettre tous les ratios et les dimensions de ton application dans des variables séparées au lieu de les recalculer a chaque fois. Ton code sera bien plus lisible et plus rapide ;)
    Fabien

  5. Enerol
    2 juillet 2010

    Oui effectivement ce n'est pas une mauvaise idée :D . J'ai fait cette fonction trés récemment et je n'utilisait les ratios que ici donc je n'ai pas vraiment pris le temps de remettre en place tout ça plus proprement...

    Et puis ...
    Comme tous les développeurs je suis flemmard :p.

    Sylvain

  6. Enerol
    2 juillet 2010

    Salut,
    Pour info :
    Il semblerai que l'ordre ait une importance... encore un mystére de Flex/Flash
    En fait en mettant les addChilds dans l'ordre sens dans le Parrallel a savoir :

    COPIER-COLLER
    MXML:
    1. var paralelEffects:Parallel = new Parallel();
    2.     paralelEffects.addChild(mo);
    3.     paralelEffects.addChild(zo);

    Au lieu de :

    COPIER-COLLER
    MXML:
    1. var paralelEffects:Parallel = new Parallel();
    2.     paralelEffects.addChild(zo);
    3.     paralelEffects.addChild(mo);

    L'effet bizarre de grézillement ne se produit plus.
    Quand au décallage( Move qui terminait une fraction de seconde aprés le Zoom), c'est peut etre aussi du a ca, ou alors aux easings functions que j'ai ducoup supprimé.

    Bizarre quand meme les comportements de Flex .... o_O !


Leave a comment

(required)

Aucun trackbacks pour l'instant

» «

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste