This article is sponsored by Adobe.

---

Advertisements

Interested in Flex graphics? Check out the new book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

Effects are the most readily observable aspect of a rich-client application: Smooth, animated transitions, for example, are not typically associated with traditional desktop applications or HTML-based Web applications, but are the part and parcel of rich-client user interfaces. Rich client technologies, in turn, provide APIs to make such effects easy and natural to specify. While effects can easily be abused, if applied in moderation and in the right places, effects can increase the usability of an application.

The Flex framework has provided effects APIs since its inception. A key philosophy of Flex 4 is that older Flex applications should work with little or no modifications on the Flex 4 SDK. Thus, Flex 3 effects APIs can be used in Flex 4 as well. Flex 4 added an entirely new class hierarchy for effects that allows for more sophisticated and extensible animations, and also directly take advantage of new FlashPlayer 10 capabilities, such as 3D drawing and PixelBender. The Flex 3 and Flex 4 effect class hierarchies can be used in the same application, allowing for a gradual migration to the more flexible Flex 4 effects.

Effects and Animation

Effects and animation go hand in hand. Animation, generally, is the ability of an API to to alter the values of some project property over time. For instance, the X and Y coordinates of display object might start out at the (0, 0) coordinate, and then move to, say, the (100, 100) position over a time interval. The move is not sudden, which means that the X and Y properties are assigned increasing values with a time delay. The delay, in turn, defines the perceived "speed" of the animation (a move of the component, in this case).

Flex 3's animated effects were closely tied to the specific animation being performed on visual component. Flex 4 makes animation a very general and extensible concept. Flex 4 does not restrict animation to display objects: Given any object, a property of that object, and a range, the Animate class arranges for the property's value to be assigned to some random value in the range. In addition to allowing animation to be performed on the properties of any objects, the property values themselves are no longer restricted to numeric data types, as was the case with Flex 3: Flex 4 provides a plug-in mechanism that can interpret any property data type for the purposes of animation. Finally, while Flex 3's animation framework was restricted to animating a single property value, Flex 4 can animate several property values.

While Flex 3 effects descend from the TweenEffect class, the superclass of animated effects, Flex 4's new effects hierarchy starts with the Effects class that defines a basic factory for all Flex 4 effects. Flex 4's TweenEffect implementation, in turn, descends from Effect. While TweenEffect is still available in Flex 4, Adobe recommends that developers use a subclass of the new spark.effects.Animate class instead, the core of Flex 4's new animation framework.

Although Animate can be used directly to alter an object's property values in the manner just described, six specialized classes define more concrete implementations. Several of those classes, such as Fade and Resize were available in Flex 3 as well; new animation effects include AnimateColor, AnimateFilter, AnimateTransitionShader, as well as AnimateTransform. The advantage of using the more specialized classes is that they provide a convenient wrapper for properties being animated. AnimateColor, for instance, defines colorFrom and colorTo properties, as well as the color property's name in an object.

One way Flex 4 makes animation, and effects, more general is that property values no longer have to be strictly numeric. AnimateColor's colorFrom property, for instance, is specified as the RGB values of the color. Animation effects provide a hint to the Flex 4 framework about how to interpret such values via an interpolator class. That mechanism comes in handy when there is a need to specify non-numeric values for a property and to define a sensible way to increment and decrement those values.

Such interpolators implement the spark.effects.IInterpolation class. The hexadecimal triplets of the color RGB values, for instance, can be interpreted by an interpolator specified for the animator. In that case, the interpolator parses the value and pulls the hexadecimal value into three numbers. Flex 4 defines several commonly used interpolators, such as HSBInterpolator or RGBInterpolator, but the mechanism is extensible.

Flex 3's animation API limited animation not only to a numeric-valued property, but also to just one such property per object. Flex 4, by contrast, allows multiple properties to be animated simultaneously. The Resize animation, for instance, allows for specifying up to six property values for the animation.

Once an animation effect is defined, the effect itself is executed with the help of the Animation class. Animation allows one to call lifecycle methods, such as start(), stop(), and resume(), as well as allows specifying repetition for the animation.

Effects and States

Effects are often used in combination: For instance, you may want to move and resize an object at the same time to create the illusion that the object moved "away" and into the background. The built-in animation classes provide some intelligence in the case of combined animations. Combined animations sometimes need to share some common understanding of how the animation, and effect, is to work. Often, for instance, an object's center point, as opposed to its X and Y coordinates, must be transformed in some way, such as when moving an object on the screen. The autoCenterTransform property is shared by several animation subclasses to provide that behavior.

As with Flex 3, effects are often applied to state transitions (for more information on state transitions in Flex 4, see Working with States in Flex 4). Such transitions are especially complex to render when combined effects are defined, such as when moving and fading a component in and out of a screen area as part of a state transition. Flex 4 is more intelligent about setting the to and from values in such situations for all the component animations. That is especially important as some components may be completely hidden in certain application states.

More Powerful Effects

Flex 4 also provides better versions of familiar Flex 3 effects. Flex 3's Zoom, for instance, is supplanted by the Scale effect that appropriately scales all subcomponents. Taking advantage of Flash Player 10's new text rendering engine, Scale can also scale text in a smooth and visually appealing way. Similarly, the Fade effect now animates a component's alpha property, appropriately blending the component, and its subcomponents.

Some of the new Flex 4 effects are enabled by new capabilities and lower-level APIs in Flash Player 10. While Flex 3, running on Flash Player 9, defined a handful of component filters, Flex 4 allows developers to define custom filters as well. The new animation and effects framework, in turn, defines a mechanism to animate those filters via the AnimateFilter class. AnimateFilter accepts an instance of an IBitmapFilter. A bitmap filter allows you to specify a transformation that is then applied to every pixel of an image. Such filters work especially well with PixelBender, a new API developed by Adobe Labs.

Several such filters are specified in Flex 4, such as DropShadowFilter, BevelFilter, ShaderFilter, ColorMatrixFilter, or GlowFilter. ColorMatrixFilter, for example, lets you specify a matrix transformation of the RGB and alpha values of every pixel. This can provide interesting effects, such as changing the hue, luminance, or saturation of an image or component. Such advanced filter effects can provide all the transformations users of programs such as PhotoShop or the open-source GIMP toolkit are used to. Flex 4's animation framework, in turn, can be used to define sophisticated time-based transformations over those filters.

Another aspect where Flex 4 effects take advantage of new FlashPlayer 10 features are 3D animations. AnimateTransform3D, for example, is a 3D-specific subclass of AnimateTransform, and provides properties that define animation in 3D coordinate space. It's subclasses, such as Move3D, Rotate3D, and Scale3D provide values for a Z coordinate property as well.

Resources

Adobe's Flash Builder 4
http://labs.adobe.com/technologies/flashbuilder4

Flex 4 SDK
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

Gumbo Project
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

Flex.org
http://www.flex.org

Talk back!

Have an opinion? Be the first to post a comment about this article.

About the author

Frank Sommers is Editor-in-Chief of Artima.