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.

What is the Advantage?
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!

Kirupa's signature!

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.