Creating Silverlight animations easily with Blend

15 12 2009

By far the best part with Expression Blend for me is how laughingly easy it is to create animations in a quick and easy way. I’m going to demonstrate how we create a simple two object animation which I can use in Silverlight.

Expression Blend

As you might’ve noticed. I’m a very graphical man. This demo will be littered with screenshots, which I find to be a good thing. If it’s not your cup of tea, I apologize.

Let’s start by creating a new Blend project. I call mine AnimationDemo.

New Blend Project

Next, We create the most basic shape, a rectangle. I style it with a gradient brush and give it a border.

I then create a copy of the rectangle so we have two objects.

Expression Blend Animation Expression Blend Animation
Expression Blend Animation

To start building our animation, highlight the element which you intend to animate. This could be a specific element or a container such as a grid or canvas when animating multiple objects.

Next click the ‘+’ sign in the top right corner and name the animation.

Blend Highlighted Control

You should now see this message above your design area:

Animation Timeline

While this light is on, each change you do is recorded for the animation. Make sure that its off if you plan on doing changes to objects that you don’t want to include in your animation.

The first thing I do in my animation is highlight the two objects I plan to change in my animation. I then click the oval “fingerprint” icon to the left of the time indicator to create a timeprint. This locks my objects’ properties at the start of my animation. 
 Blend highlighted controls

I now drag the yellow timeline to the two second mark and start tweaking my objects. I offset the blue rectangle a bit. This automatically creates another timeprint.

Blend offsetExpression Blend AnimationBlend TimeprintBlend Timeprint
You repeat this step until you’re satisfied with your timeline. I do one more tweak to my first rectangle before I’m satisfied. To see how it turned out (in spectacular low-def) click the video below.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: