Property Based Animations
by
kirupa
| 6 March 2011
Have questions? Discuss this Flash / ActionScript
tutorial with others on the forums.
In both Flash and Silverlight / WPF, you have the ability
to create property-based animations. These are animations
where what changes are the properties of an object as
opposed to the object itself.
The classic example of the latter case is the tweens you
create in Flash CS3 and earlier Flash versions where you
would specify several keyframes with a different instance of
your object at each keyframe. The animation was one where
Flash interpolated the changes between each of your
instances into something smooth.
In a property-based system which both Flash CS4+ (see my
tutorial on this) and Expression Blend default to, you
do not deal with multiple instances of an object when
animating. Instead, you almost always deal with a single
object with the animation acting not on the object as a
whole, but instead, acting on the object’s properties and
sub-properties.
Let’s say you have an animation that runs for one second,
and in this animation, a small circle shifts to the right
and evenly scales larger. The onion-skin of this animation
would look as follows:
If you decompose this animation using the property-based
approach, your animation is nothing more than a single blue
circle whose position and scale properties were altered over
a duration of 1 second
The Motion Editor in Flash CS4/CS5 confirms that:
[ Flash's Motion Editor ]
Notice that the only properties whose graph values
actually vary are the ones for X, Scale X, and Scale Y.
Likewise, if you look at this same animation created in
Expression Blend, you will see something similar:
[ Expression Blend's
timeline ]
The properties that get modified are the ScaleX, ScaleY,
and X sub-properties nested under RenderTransform.Scale and
RenderTransform.Translation.
For many of you, this represents a
major change in how you created animations. Despite the
change, there are several advantages of this. For me, the
main advantage is being able to more precisely control my
animation because the animation is actually made up of
smaller animations that affect the individual properties.
This means that, if I wanted the animation responsible
just for scaling to have an ease, I can easily do that
without interfering with the X property and its defined
movement:
[ you have more precise
control ]
This flexibility allows someone to do more things with a
single animation sequence than what would have been possible
in the past. Speaking of which, in the past, doing something
like this would have required one to write code where
animating the individual properties of an object is pretty
much the only way to create an animation that both moved and
scaled the object. The nice thing is that, now, you have the
ability to do that visually in Flash starting with CS4 and
Expression Blend since version 1. You should note that
Expression Blend doesn’t support creating a non-property
based animation anyway.
With that said, I hope this helps you to see what makes
property-based animations appealing. If you dislike this new
way of animating and preferred the older approach, in Flash
CS4 you still have the ability to do so by creating a
Classic Motion Tween instead.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|
