October 12th, 2009
Animating with Storyboards in BlendAll Silverlight Examples, Silverlight 3 tutorials, Silverlight Blend Tutorials, Silverlight Effects, Working with Silverlight, by Gavin Wignall.
This post is part of a string of posts found here: Learn Blend in a Month.
There are two ways to animate in Silverlight, through storyboards and through code. Expression Blend offers extensive help in creating Storyboard animations. Silverlight animation is time based not frame based, this means that your animation will benefit from running at the maximum frame rate that the users machine will allow. Multiple storyboards can be created and run at the same time, but for the purpose of this basic tutorial we will create a single storyboard.
In this tutorial we will create the following animation.
To create a new storyboard, go to the Objects and Timeline tab and click on the ‘plus’ icon.
If you are using the default UI layout in Blend, you may want to hit the ‘F6‘ key to switch the layout from design mode to animation mode, this will give you a better layout for working with storyboards.
Notice that after adding a storyboard a red circle will be displayed in the top right of the screen, this indicates that you are in record mode. When in record mode, every change you make is treated as an animation and will be tied to a Keyframe. To turn record mode on or off click on the red circle in the top right of the screen, it should toggle from red to grey.
For the purpose of this tutorial I have created a ball graphic and a shadow graphic as shown below. I actually came up with this idea of a beach ball during my flights to Cozumel. I have placed them off the page to the left so that they start out of site.
Storyboard animation is based on Keyframes set to specific times. To add a Keyframe, go back to the ‘Objects and Timeline‘ tab, select the objects that you want to animate and click the Record Keyframe button as highlighted below. You will see that a new Keyframe is added by each object at zero seconds.
To add a Keyframe at a specific point along your timeline, drag the yellow time bar to the required point and then hit the Record Keyframe button. To make our ball graphic animate I have selected a time stamp of 0.5 seconds and moved the ball to the position shown below.
I then animate the ball and shadow graphics again at 1 second.
And once more at 1.5 seconds to finish the animation.
Now that we have completed the animation we may want to loop it multiple times or loop it forever. To make the animation loop, make sure you have the storyboard selected under the ‘Objects and Timeline‘ tab, then go to your ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. Here you have an option to repeat the animation several times, for this tutorial we want to set it to ‘Forever‘.
Finally we need to tell the storyboard to play. Sometimes you will need a storyboard to be called by the code behind file, but we can use ‘Behaviors’ to start a storyboard instead. ‘Behaviors’ are pre-set actions that can be dropped onto objects in Blend, they are an easy way to achieve functionality without requiring knowledge of C# or alternative languages. My tutorial series will touch on Behaviors in more detail later on this month.
To tell the storyboard to autoplay, go to the ‘Assets‘ button on the main tool bar (the last icon), select ‘Behaviors‘ from the list on the left to bring up the selection of behaviors. Find the behavior titled ‘ControlStoryboardAction‘ and drag it onto your ‘LayoutRoot‘. See how the behavior is indented below the ‘LayoutRoot‘. Select the behavior and go to the ‘Properties‘ tab, scroll down to the ‘Triggers‘ section and set the following settings:
EventName = Loaded
ControlStoryboard… = Play
Storyboard = Storyboard1 (the name of your storyboard)
You can grab the example files for this tutorial here.