Working with the Animate class: "One effect to rule them all"

All of the new effects in Flex 4 SDK beta are subclasses from the class Animate, which is itself a subclass of the Effect class. Rather than break backward compatibility with the old effects—which use the TweenEffect superclass—we created a new effect hierarchy in Flex 4 SDK beta. Now these systems live in parallel: the older Flex 3 effects still work as usual and can be used on components, without any changes. Flex 4 beta developers can take advantage of the new Flex 4 beta effects, which work on old and new components, as well as the new graphic elements and even arbitrary objects.

The Animate superclass provides common functionality used by the new effects, including the ability to target arbitrary objects and types. Animate allows you to create, manipulate and play animated effects using the underlying Animation subclass. The Animation class contains the functions that actually run the animations, calculating and setting the animated values of the animated properties. We will not have time to go into the details on the lower-level Animation class itself, but I would encourage you to download the SDK and ASDocs for Flex 4 beta and see how it works.

Creating and playing an effect using the Animate class is easy: you provide a target object to be modified, the names of the properties of the target that will be animated, and the values that the properties will use to animate the object while the effect plays. You also have the ability to set some optional parameters on the effect, such as the duration. After specifying the target, properties and values, use the play() method to start playing the effect.

In the code example below, an animation is applied to a button which causes it to move 100 pixels to the right when the button is clicked:

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

The button will move from an x location of 0 to an x location of 100 as the effect plays. There are other approaches to specifying the same animation, such as using the valueBy property to specify the delta value instead of the absolute values, or by supplying only the valueTo property—implicitly assigning the other value from the current value of that property on the target.

In Flex 4 SDK beta, it is also possible to animate several properties simultaneously by declaring several SimpleMotionPath objects.

Note: Flex 3 developers will notice the difference here between using the Animate class in comparison with the older AnimateProperty effect, which could only handle a single property.

To affect multiple properties at once, use the following code snippet to animate several different properties on our button simultaneously:

<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>

Note: If you've downloaded the sample files provided on the first page of this article, you'll find this example in the AnimateButton application.

In the code example above, notice how the properties use syntax three different ways to specify the property values.

There are various other properties you can use to change the behavior of an animation that uses the Animate class, such as repetition (including the new RepeatBehavior flag, which allows you to automatically reverse effects with each repetition, unlike the previous looping behavior in Flex 3).

You can also supply different easing behaviors to create more realistic motion, and use different type interpolation for non-numeric types. A discussion of these is outside the scope of this article, but look for future blogs and articles that cover these topics.

At this point we've just scratched the surface, because there are so many Flex 4 SDK beta effects to describe. In the next section, I'll cover the process for using basic effects in Flex 4 SDK beta.

Page 2 of 5

Previous Page

Next Page