Flex est un framework de développement très riche graphiquement. Ceci provient bien sûr du fait qu’il repose sur le Flash qui a été conçu à la base pour créer des animations. Flex permet entre autre d’appliquer divers effets à un composant. De base, l’API de Flex propose des effets de flou, zoom, rotation…

Comme je n’ai pas trouvé de sites ou d’articles simples donnant des exemples et une documentation complète, j’ai décidé de le faire moi-même et pour le coup, en français. Vous pourrez trouvez une petite application Flex permettant d’avoir un aperçu de tous les effets Flex, suivit d’une traduction simplifiée de la documentation officielle. Je pense qu’il y a toutes les informations nécessaires pour facilement utiliser les effets Flex.

Aperçu des effets Flex

Vous trouverez le code source de l’application c-dessous.

Documentation en français

mx.effects.Effect, la super-classe

Tous les effets présentés ci-dessous héritent de la même classe, Effect.

<mx:tagname
Properties
customFilter=""
duration="500"
filter=""
repeatCount="1"
repeatDelay="0"
startDelay="0"
suspendBackgroundProcessing="false|true"
target="effect target"
targets="array of effect targets"

Events
effectEnd="No default"
efectStart="No default"
/>

• customFilter : spécifie un objet filtre, de type EffectTargetFilter, utilisé par l’effet pour définir sur quelles cibles jouer l’effet.
• duration : durée de l’effet en milliseconde.
• filter : spécifie un algorithme de filtrage des cibles.
• repeatCount : nombre de fois que l’effet va être répété.
• repeatDelay : temps en milliseconde à attendre avant une répétition.
• startDelay : temps en milliseconde à attendre avant le début de l’effet.
• suspendBackgroundProcessing : si true, bloque tout traitement de fond durant l’effet.
• target : composant cible.
• targets : tableau de composants cibles.

Extrait de la documentation Flex

The Effect class is an abstract base class that defines the basic functionality of all Flex effects. The Effect class defines the base factory class for all effects. The EffectInstance class defines the base class for all effect instance subclasses.

You do not create an instance of the Effect class itself in an application. Instead, you create an instance of one of the subclasses, such as Fade or WipeLeft.

Blur

Applique un effet de flou au composant

<mx:Blur
id="ID"
blurXFrom="val"
blurXTo="val"
blurYFrom="val"
blurYTo="val"
/>

• blurXFrom : Flou horizontal avant l’effet de 0 (net) à 255 (complètement flou).
• blurXTo : Flou horizontal après l’effet de 0 (net) à 255 (complètement flou).
• blurYFrom : Flou vertical avant l’effet de 0 (net) à 255 (complètement flou).
• blurYTo : Flou vertical après l’effet de 0 (net) à 255 (complètement flou).

Extrait de la documentation Flex

The Blur effect lets you apply a blur visual effect to a component. A Blur effect softens the details of an image. You can produce blurs that range from a softly unfocused look to a Gaussian blur, a hazy appearance like viewing an image through semi-opaque glass.

The Blur effect uses the Flash BlurFilter class as part of its implementation. For more information, see flash.filters.BlurFilter.

If you apply a Blur effect to a component, you cannot apply a BlurFilter or a second Blur effect to the component.

Dissolve

Passe le composant de transparent à opaque ou d’opaque à transparent. L’effet Dissolve agit de la manière suivante:

1. Quand l’effet démarre, il crée un rectangle opaque. Le rectangle recouvre le composant cible. Ca couleur est fixée par la valeur de color et sa transparence (alpha) vaut 1,0 – alphaFrom.
2. Durant l’effet, la transparence du rectangle superposé au composant cible passe de 1,0 – alphaFrom à 1,0 – alphaTo.
3. Une fois l’effet terminé, le rectangle est détruit.
   

<mx:Dissolve
id="ID"
alphaFrom="val"
alphaTo="val"
color="val"
/>

• alphaFrom : niveau de transparence avant l’effet de 0 (transparent) à 1 (opaque).
• alphaTo : niveau de transparence après l’effet de 0 (transparent) à 1 (opaque).
• color : couleur du rectangle. Par défaut, il vaut la couleur de fond du composant cible (backgroundColor) , ce qui permet d’avoir un effet identique au Fade. Si backgroundColor n’est pas définit, la propriété prend pour valeur 0xFFFFFF (couleur blanche).

Extrait de la documentation Flex

Animate the component from transparent to opaque, or from opaque to transparent. When the Dissolve effect is played, it does the following:

1. When the effect begins, it creates an opaque rectangle. The rectangle floats above the target component, its color matches the Dissolve.color property, and its alpha property is initially set to (1.0 – Dissolve.alphaFrom).
2. As the effect plays, the alpha property of the rectangle animates from (1.0 – alphaFrom) to (1.0 – alphaTo). As the rectangle becomes more and more opaque, the content underneath it gradually disappears.
3. When the effect finishes, the rectangle is destroyed.

When the target object is a Container, the Dissolve effect applies to the content area inside the container. The content area is the region where the container’s background color is visible.

Note: To use the Dissolve effect with the creationCompleteEffect trigger of a DataGrid control, you must define the data provider of the control inline using a child tag of the DataGrid control, or using data binding. This issue is a result of the data provider not being set until the creationComplete event is dispatched. Therefore, when the effect starts playing, Flex has not completed the sizing of the DataGrid control.

Fade

Augmente ou diminue graduellement la transparence du composant cible, le passant de transparent à opaque ou d’opaque à transparent.

<mx:Fade
id="ID"
alphaFrom="val"
alphaTo="val"
/>

• alphaFrom : niveau de transparence avant l’effet de 0 (transparent) à 1 (opaque).
• alphaTo : niveau de transparence après l’effet de 0 (transparent) à 1 (opaque).

Extrait de la documentation Flex

The Fade effect animates the alpha property of a component, either from transparent to opaque, or from opaque to transparent.

If you specify the Fade effect for the showEffect or hideEffect trigger, and if you omit values for the alphaFrom and alphaTo properties, the effect automatically transitions alpha from 0 to the target’s current alpha value on a showEffect trigger, and from the target’s current alpha value to 0 on a hideEffect trigger.

Note: To use the Fade effect with text, you must use an embedded font, not a device font.

Glow

Affiche un effet visuel de lueur (rayonnement lumineux) à un composant cible

<mx:Glow
id="ID"
alphaFrom="val"
alphaTo="val"
blurXFrom="val"
blurXTo="val"
blurYFrom="val"
blurYTo="val"
color="themeColor of the application"
inner="false|true"
knockout="false|true"
strength="2"
/>

• alphaFrom : niveau de transparence avant l’effet de 0 (transparent) à 1 (opaque).
• alphaTo : niveau de transparence après l’effet de 0 (transparent) à 1 (opaque).
• blurXFrom : Flou horizontal avant l’effet de 0 (net) à 255 (complètement flou).
• blurXTo : Flou horizontal après l’effet de 0 (net) à 255 (complètement flou).
• blurYFrom : Flou vertical avant l’effet de 0 (net) à 255 (complètement flou).
• blurYTo : Flou vertical après l’effet de 0 (net) à 255 (complètement flou).
• color : couleur de la lueur.
  
• inner : true s’il s’agit d’une lueur interne, false sinon.
  
• knockout : true si le composant cible doit disparaître, false sinon.
  
• strength : force de l’effet. Plus la valeur (comprise entre 0 et 255) est élevée plus le contraste est fort entre l’effet de lueur de le fond.

Extrait de la documentation Flex

The Glow effect lets you apply a visual glow effect to a component.

The Glow effect uses the Flash GlowFilter class as part of its implementation. For more information, see the flash.filters.GlowFilter class. If you apply a Glow effect to a component, you cannot apply a GlowFilter or a second Glow effect to the component

Iris

Agrandit ou rétrécit un masque rectangulaire centré sur l’objet.

<mx:Iris
id="ID"
/>

• showTarget : true pour faire apparaître le composant, false pour le contraire.

Extrait de la documentation Flex

The Iris effect animates the effect target by expanding or contracting a rectangular mask centered on the target. The effect can either enlarge the mask from the center of the target to expose the target, or contract the mask toward the center to obscure the target.

Move

Déplace un composant cible. Il est possible de définir la position de départ avec xFrom et yFrom, la position d’arrivée avec xTo et xTo, ou bien le déplacement relatif avec xBy et yBy.

<mx:Move
id="ID"
xFrom="val"
yFrom="val"
xTo="val"
yTo="val"
xBy="val"
yBy="val"
/>

• xFrom : coordonnée x de la position de départ.
• yFrom : coordonnée y de la position de départ.
• xTo : coordonnée x de la position d’arrivé.
• yTo : coordonnée y de la position d’arrivé.
• xBy : distance selon laquelle le composant sera déplacé horizontalement.
• yBy : distance selon laquelle le composant sera déplacé verticalement.

Extrait de la documentation Flex

The Move effect changes the position of a component over a specified time interval. You can specify the initial position with the xFrom and yFrom values, the destination position with xTo and yTo, or the number of pixels to move the component with xBy and yBy.

If you specify any two of the values (initial position, destination, or amount to move), Flex calculates the third. If you specify all three, Flex ignores the xBy and yBy values. If you specify only the xTo and yTo values or the xBy and yBy values, Flex sets xFrom and yFrom to be the object’s current position.

If you specify a Move effect for a moveEffect trigger, and if you do not set the six From, To, and By properties, Flex sets them to create a smooth transition between the object’s old position and its new position.

You typically apply this effect to a target in a container that uses absolute positioning, such as Canvas, or one with "layout=absolute", such as Application or Panel. If you apply it to a target in a container that performs automatic layout, such as a VBox or Grid container, the move occurs, but the next time the container updates its layout, it moves the target back to its original position. You can set the container’s autoLayout property to false to disable the move back, but that disables layout for all controls in the container

Pause

Cet effet est utile pour les séquences d’effets. Il permet de rien faire pendant un certain temps. Le seule paramètre utile de cet effet est duration qui permet de définir la durée de la pause.

<mx:Pause
id="ID"
/>

Extrait de la documentation Flex

The Pause effect is useful when sequencing effects. It does nothing for a specified period of time. If you add a Pause effect as a child of a Sequence effect, you can create a pause between the two other effects

Resize

Modifie graduellement la hauteur (height) et la largeur (width) du composant cible.

<mx:Resize
id="ID"
widthFrom="val"
heightFrom="val"
widthTo="val"
heightTo="val"
widthBy="val"
heightBy="val"
hideChildrenTargets=""
/>

• widthFrom : largeur initiale, en pixel.
• heightFrom : hauteur initiale, en pixel.
• widthTo : largeur finale, en pixel.
• heightTo : hauteur finale, en pixel.
• widthBy : nombre de pixels qui sera progressivement ajouté à la largeur.
• heightBy : nombre de pixels qui sera progressivement ajouté à la hauteur.
• hideChildrenTargets : liste des fils du composant cible à cacher durant l’effet.

Extrait de la documentation Flex

The Resize effect changes the width, height, or both dimensions of a component over a specified time interval.

If you specify only two of the three values of the widthFrom, widthTo, and widthBy properties, Flex calculates the third. If you specify all three, Flex ignores the widthBy value. If you specify only the widthBy or the widthTo value, the widthFrom property is set to be the object’s current width. The same is true for heightFrom, heightTo, and heightBy property values.

If you specify a Resize effect for a resize trigger, and if you do not set the six From, To, and By properties, Flex sets them to create a smooth transition between the object’s old size and its new size.

Rotate

Effectue progressivement une rotation d’un certain angle autour d’un point précis.

<mx:Rotate
id="ID"
angleFrom="0"
angleTo="360"
originX="0"
originY="0"
/>

• angleFrom : angle du composant cible avant l’effet.
• angleFrom : angle du composant cible après l’effet.
• originX : coordonnée x du centre de rotation.
• originY : coordonnée y du centre de rotation.

Extrait de la documentation Flex

The Rotate effect rotates a component around a specified point. You can specify the coordinates of the center of the rotation, and the starting and ending angles of rotation. You can specify positive or negative values for the angles.

Note: To use the Rotate effect with text, you must use an embedded font, not a device font.

Wipe (WipeLeft, WipeRight, WipeUp, WipeDown)

Permet de découvrir petit à petit le composant grâce à un masque en translation. Le seul paramètre utile pour cet effet est duration qui permet de définir la durée de l’effet.

<mx:WipeLeft
id="ID"
/>
<mx:WipeRight
id="ID"
/>
<mx:WipeUp
id="ID"
/>
<mx:WipeDown
id="ID"
/>

Extrait de la documentation Flex

The WipeLeft class defines a bar wipe left effect. The before or after state of the component must be invisible.

You often use this effect with the showEffect and hideEffect triggers. The showEffect trigger occurs when a component becomes visible by changing its visible property from false to true. The hideEffect trigger occurs when the component becomes invisible by changing its visible property from true to false.

This effect inherits the MaskEffect.show property. If you set the value to true, the component appears. If you set the value to false, the component disappears. The default value is true.

If you specify this effect for a showEffect or hideEffect trigger, Flex sets the show property for you, either to true if the component becomes invisible, or false if the component becomes visible.

Zoom

Permet comme nom l’indique d’effectuer un zoom d’un composant.

<mx:Zoom
id="ID"
captureRollEvents="false|true"
originX="Calculated"
originY="Calculated"
zoomWidthFrom="0.01"
zoomWidthTo="1.0"
zoomHeightFrom="0.01"
zoomHeightTo="1.0"
/>

• captureRollEvents : s’il vaut true, il bloque les évènements RollOut et RollOver si la souris n’a pas bougée.
• originX : coordonnée x du centre de l’effet.
• originY : coordonnée y du centre de l’effet.
• zoomWidthFrom : zoom horizontal initial.
• zoomWidthTo : zoom horizontal final.
• zoomHeightFrom : zoom vertical initial.
• zoomHeightTo : zoom vertical final.

Extrait de la documentation Flex

The Zoom effect zooms the object in or out on a center point.

When you apply a Zoom effect to text rendered using a system font, Flex scales the text between whole point sizes. While you do not have to use embedded fonts when you apply a Zoom effect to text, the Zoom will appear smoother when you apply it to embedded fonts.

Note: The Zoom effect does not work when the Container.autoLayout property is false

Code source de l’exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" >

<mx:Script>
<![CDATA[
[Bindable] private var duration:Number = 1500;

/*Reset de tous les paramètres de l'image*/
private function reset():void
{
img.x=150;
img.y=110;
img.width=185;
img.height=60;
img.alpha=1.0;
img.rotation=0;
img.scaleX=1;
img.scaleY=1;
}
]]>
</mx:Script>

<!-- Les effets -->
<mx:Blur id="blur" target="{img}" duration="{duration}" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>
<mx:Dissolve id="dissolve" target="{img}" duration="{duration}" alphaFrom="0.0" alphaTo="1.0" />
<mx:Fade id="fade" target="{img}" duration="{duration}" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Glow id="glow" target="{img}" duration="{duration}" alphaFrom="1.0" alphaTo="0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0xFFFFFF"/>
<mx:Iris id="iris" target="{img}" duration="{duration}" showTarget="true"/>
<mx:Move id="moveEffect" target="{img}" duration="{duration}" xBy="30" yBy="50"/>
<mx:Resize id="resize" target="{img}" duration="{duration}" heightBy="30" widthBy="30" />
<mx:Rotate id="rotate" target="{img}" duration="{duration}" angleFrom="0" angleTo="360" />
<mx:WipeDown id="wipe" target="{img}" duration="{duration}"/>
<mx:Zoom id="zoom" target="{img}" duration="{duration}" zoomHeightFrom="0" zoomWidthFrom="0" zoomHeightTo="1" zoomWidthTo="1"/>

<!-- L'image -->
<mx:Image id="img" x="150" y="110" width="185" height="60" source="@Embed(source='assets/logo.png')" effectEnd="reset()"/>

<!-- Les boutons -->
<mx:VBox x="10" y="10" height="280" width="158" verticalAlign="middle">
<mx:Button label="Blur" click="blur.play()"/>
<mx:Button label="Dissolve" click="dissolve.play()"/>
<mx:Button label="Fade" click="fade.play()"/>
<mx:Button label="Glow" click="glow.play()"/>
<mx:Button label="Iris" click="iris.play()"/>
<mx:Button label="Move" click="moveEffect.play()"/>
<mx:Button label="Resize" click="resize.play()"/>
<mx:Button label="Rotate" click="rotate.play()"/>
<mx:Button label="WipeDown" click="wipe.play()"/>
<mx:Button label="Zoom" click="zoom.play()"/>
</mx:VBox>
</mx:Application>

La parole est à vous! N’hésitez à proposer des idées pour compléter cet article.