Available effects

AnimateProperty

Animates a numeric property of a component, such as height, width, scaleX, or scaleY. You specify the property name, start value, and end value of the property to animate. The effect first sets the property to the start value, and then updates the property value over the duration of the effect until it reaches the end value.

For example, if you want to change the width of a Button control, you can specify width as the property to animate, and starting and ending width values to the effect.

Blur

Applies 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 in Adobe Flex 2 Language Reference.

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

Dissolve

Modifies the alpha property of an overlay to gradually have to target component appear or disappear.

The Dissolve effect has the following properties:

• alphaFrom Specifies the initial alpha level (0.0= transparent, 1.0 =fully opaque). If omitted, Flex uses the component's current alpha level.
• alphaTo Specifies the final alpha level.
• color  Value that represents the color of the overlay rectangle that the effect displays over the target object. The default value is the color specified by the target component's backgroundColor style property, or 0xFFFFFF, if backgroundColor is not set.

If the target object is a container, only the children of the container dissolve. The container borders do not dissolve.

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.

Note: To use the Dissolve effect with text, you must use an embedded font, not a device font. For more information, see Using Styles and Themes.

Fade

Animate the component from transparent to opaque, or from opaque to transparent.

The Fade effect has the following properties:

• alphaFrom Specifies the initial alpha level (0.0= transparent, 1.0 =fully opaque). If omitted, Flex uses the component's current alpha level.
• alphaTo Specifies the final alpha level.

If you specify the Fade effect for the showEffect or hideEffect trigger, and if you omit the alphaFrom and alphaTo properties, the effect automatically transitions from 0.0 to the targets' current alpha value for a show trigger, and from the targets' current alpha value to 0.0 for a hide trigger.

Note: To use the Fade effect with text, you must use an embedded font, not a device font. For more information, see Using Styles and Themes.

Glow

Applies a glow visual 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 in the Adobe Flex 2 Language Reference.

If you apply a Glow effect to a component, you cannot apply a GlowFilter or a second Glow effect to the component.

Iris

Animates the effect target by expanding or contracting a rectangular mask centered on the target. The effect can either grow the mask from the center of the target to expose the target, or contract it toward the target center to obscure the component.

For more information, see Using a mask effect.

Move

Changes the position of a component over a specified time interval. 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.

The Move effect has the following properties:

• xFrom and yFrom Specifies the initial position of the component. If omitted, Flex uses the current position.
• xTo and yTo Specifies the destination position.
• xBy and yBy Specifies the number of pixels to move the component in the x and y directions. Values can be positive or negative.

For the xFrom, xTo, and xBy properties, you can specify any two of the three values; Flex calculates the third. If you specify all three properties, Flex ignores the xBy property. The same is true for the yFrom, yTo, and yBy properties.

If you specify a Move effect for a 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.

When the Move effect runs, the layout around the component that is moving does not readjust. Setting a container's autoLayout property to true has no effect on this behavior.

Pause

Does nothing for a specified period of time. This effect is useful when you need to composite effects. For more information, see Creating composite effects.

Resize

Changes the width and height of a component over a specified time interval.

The Resize effect has the following properties:

• widthFrom and heightFrom Specifies the initial width and height. If omitted, Flex uses the current size.
• widthTo and heightTo Specifies the final width and height.
• widthBy and heightBy Specifies the number of pixels to modify the size as either a positive or negative number relative to the initial width and height.

For widthFrom, widthTo, and widthBy, you can specify any two of the three values, and Flex calculates the third. If you specify all three, Flex ignores widthBy. The same is true for heightFrom, heightTo, and heightBy.

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.

When you apply a Resize effect, the layout manager resizes neighboring components based on the size changes to the target component. To run the effect without resizing other components, place the target component in a Canvas container.

When you use the Resize effect with Panel containers, you can hide Panel children to improve performance. For more information, see Improving performance when resizing Panel containers.

Rotate

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.

The Resize effect has the following properties:

• angleFrom and angleTo Specifies the initial rotation and final rotation angles.
• originX and originY Specifies coordinate of the center point of the rotation.

Note: To use the Rotate effect with text, you must use an embedded font, not a device font. For more information, see Using Styles and Themes.

SoundEffect

Plays an MP3 audio file. For example, you could play a sound when a user clicks a Button control. This effect lets you repeat the sound, select the source file, and control the volume and pan.

You specify the MP3 file using the source property. If you have already embedded the MP3 file, using the Embed keyword, then you can pass the Class object of the MP3 file to the source property. Otherwise, specify the full URL to the MP3 file.

For more information, see Using a sound effect.

WipeLeft
WipeRight
WipeUp
WipeDown

Defines a bar Wipe effect. The before or after state of the component must be invisible.

These effects have the following property:

• showTarget If true, causes the component to appear. If false, causes the component to disappear. The default value is true.

If you specify a Wipe effect for a showEffect or hideEffect trigger, by default, Flex sets the showTarget property to true if the component is invisible, and false if the component is visible.

For more information, see Using a mask effect.

Zoom

Zooms a component in or out from its center point.

The Zoom effect has the following properties:

• zoomHeightFrom, zoomWidthFrom Specifies a number that represents the scale at which to start the zoom. The default value is 0.0.
• zoomHeightTo, zoomWidthTo Specifies a number to zoom to. The default value is 1.00. Specify a value of 2.0 to double the size of the target.
• originX, originY The x-position and y-position of the origin, or registration point, of the zoom. The default value is the coordinates of the center of the effect target.

Note: When you apply a Zoom effect to text rendered using a system font, Flex scales the text between whole point sizes. Although 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. For more information, see Using Styles and Themes.