October 14th, 2009
Using the 3D tools to animate in BlendSilverlight 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: