October 14th, 2009

Using the 3D tools to animate in Blend

Silverlight 3 tutorials, Silverlight Blend Tutorials, Working with Silverlight, by Gavin Wignall.

This post is part of a string of posts found here: Learn Blend in a Month.

Before reading this post, you may need to read the following related tutorials:

Today we will be using the new 3D Projection tools in Expression Blend 3 to create the following example:


First we need to set up our assets. I have imported two images (of Scarlett Wignall) and used the image brush to paint them onto two separate rectangles (read: tutorial for importing images). Then I have set up a new storyboard, set it to auto play and repeat forever (read: tutorial for creating storyboards).

Now we are ready to play with the new Projection controls. Go to the ‘Objects and Timeline‘ tab and select the storyboard we have created, remember to switch to Animation view (F6) to allow more space to display the timeline. Select one of the ‘Rectangles‘ then go to the ‘Properties‘ tab and scroll down to the ‘Transform‘ section. Use the mouse to drag the ‘X‘ value to -90, watch how the ‘Rectangle‘ changes it’s perspective angle all the way until it is side on and therefore invisible.

Changing the ‘X‘ value will twist the ‘rectangle‘ from side to side. Changing the ‘Y‘ value will twist the ‘rectangle‘ up and down. The ‘Z‘ value will twist the ‘rectangle‘ around from above. You can use these values individually or all at once to get different perspective angles.

For this tutorial I have placed two separate images in so that we can fake the image being flipped over, once we flip the first image to a value of 90 we flip the other from -90 to 0. In my animation I use the ‘Y‘ value for the first flip and the ‘X‘ value for the second flip. The animation looks like this.

You can grab the example files for this tutorial here.

Here are several other posts showing 3D projection in action:

Back Top

Responses to “Using the 3D tools to animate in Blend”

  1. No comments yet.
  1. Tweets that mention Using the 3D tools to animate in Blend » Silverlight Buzz -- Topsy.com (,October 14, 2009)

    [...] This post was mentioned on Twitter by MSExpression, Kirsten Mitchell. Kirsten Mitchell said: Using the 3D tools to animate in #Blend – http://bit.ly/3wNTMh – #Expression #msexp (via @MSExpression) [...]

  2. Learn Expression Blend in a Month! » Silverlight Buzz (,October 16, 2009)

    [...] Using the 3D tools to animate in Blend [...]

  3. uberVU - social comments (,October 18, 2009)

    Social comments and analytics for this post…

    This post was mentioned on Twitter by MSExpression: Using the 3D tools to animate in #Blend – http://bit.ly/3wNTMh – #Expression #msexp…

Leave a Reply

Back Top