Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Flex 4 Effects

Flex 4 Effects

Application effects are, of course, nothing more than eye candy, but I think we can all admit that a little eye candy here and there is nothing to be ashamed of. Certainly the folks at Adobe think so, as they upped the effects library in Flex 4. In this post, I discuss the current state of effects in Flex, and how you use them.

If you used Flex 3, you know that it shipped with its own set of effects, based upon the TweenEffect class. Flex 4 has created a new parent class, named Animate, from which all of its effects are derived. One considerate decision by Adobe was to make these effects backwards compatible: even though these effects are defined Flex 4, they can still be used on older (i.e., Halo) components. You can actually create your own custom effects using the Animate class, but, as you would expect, Flex has already defined a number of common effects for you. Here's a sampling of what's available:

  • AnimateColor
  • AnimateFilter
  • AnimateTransform
  • CrossFade
  • Fade
  • Move
  • Resize
  • Rotate
  • Scale
  • Wipe

For some of the above, there are also 3D versions, which I don't discuss here but you can investigate on your own.

Effects can be created as MXML instances, with each effect that you intend to use in your application given its own unique id value and default properties. As an effect is a non-visual component, it's defined within a Declarations block. For the effect, you identify the target (i.e., the component to animate) and which of the target's properties should be impacted and how. For example, an image's x and y coordinates might be changed, or its width and height, or all four. Many of the effects dictate how the target's properties are changed using to, from, and by. For example, a Move effect might be defined with xTo and yTo properties, meaning that the target will be moved to that new absolute position. Or a Move could use xBy and yBy, meaning that the target is moved that many pixels from its current location (use negative values to move the target left or up).

Here, then, is a defined effect that will fade an image out:

<s:Fade id="fadeEffect" target="{someImage}" alphaTo="0" duration="2500" />

And here is an effect that moves a Button over and down 50 pixels:

<s:Move id="moveEffect" xBy="50" yBy="50" target="{someButton}" />

To activate an effect, call the play() method of the effect component. You would normally do this in response to a user action:

<mx:Image id="someImage" source="@Embed('../assets/image.jpg')" click="fadeEffect.play()" />
<s:Button id="someButton" label="Click Me!" click="moveEffect.play()" />

Often a control being animated will be constrained to its parent container. The Flex-defined effects also include logic to properly handle the effect in such situations, so you generally don't have to worry about that.

If you want to create custom effects you can use the Animate class or you can create composite effects. To do the latter, start by creating either Parallel or Sequence instances. In those instances you would normally identify the target. Each instance would then contain all of the individual effects you want to apply, such as Move and Fade or Scale and Rotate. You can even apply multiple instances of the same effect. For example, Adobe's Learn Flex in a Week series has an example of this to create a shaking effect applied to a Panel. There are also a couple of very good articles on effects at the Adobe Developer Connection (here and here). That first article includes this code for moving, rotating, and resizing a Button all at the same time:

<s:Parallel id="transformer" target="{button}">
<s:Move xFrom="50" xTo="150" autoCenterTransform="true"/>
<s:Rotate angleFrom="0" angleTo="360" autoCenterTransform="true"/>
<s:Scale scaleXFrom="1" scaleXTo="2" autoCenterTransform="true"/>

As with many things in Flex, applying effects is quite simple, but applying them, um, effectively is an entire other matter. One has to be judicious when choosing effects so that they add something to an application and don't clutter up the interface. More importantly, effects will increase the size of the whole application, and can impact its performance, so think twice before doing too much. That being said, you can also create nice 3D effects and apply them to application transitions, not just individual components, so there's plenty to consider for your next Flex application.