Property Based Animations
| 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
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
The properties that get modified are the ScaleX, ScaleY,
and X sub-properties nested under RenderTransform.Scale and
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
[ you have more precise
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )