|
|
|
This article is sponsored by Adobe.
|
|
Advertisements
|
||
|
|
||
|
Summary
Flex 4 introduces a new API to define effects for rich-client applications. This article provides an overview of new features in Flex 4's effects and animation-related APIs.
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 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 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.
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.
Have an opinion on Flex 4's states syntax? Discuss this article in the Articles Forum topic, What's New in Flex 4 Effects.
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
Frank Sommers is Editor-in-Chief of Artima.
|
This article is sponsored by Adobe.
|
