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:

onion_skin_animation

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:

motionEditorExport

[ 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:

blendTimeline

[ 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:

easing

[ 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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.