A Brief Introduction to Storyboards and Keyframes in Blend

Introduction:

In an Expression Blend application, a storyboard is a resource containing a collection of animations, each of which targets a specific property of a specific control. Animations here mean actions that temporarily change the property values of elements. For example, an animation action can comprise a button changing its color when mouse hovers over it.

Storyboards are created in the Blend IDE using the Storyboard picker.

Create a Silverlight 5 application in Expression Blend 4.

Add a Button control to it.

Then, launch the Storyboard Picker by clicking the + symbol and selecting the New option.

Figure 1 shows the New option.



Figure 1

In the Create Storyboard Resource dialog box, leave the default name as is.



Figure 2

Open the newly created Storyboard by using the dropdown option in the Object and Timeline section.



Figure 3

Select the Properties pane for the Button and after scrolling to the Transform property group, choose Scale option and specify the X and Y values as 0.5 each.

Figure 4 shows this setting in action.



Figure 4

Click the red icon that says "Storyboard1 timeline recording is on" to stop recording.



Figure 5

Click the Play icon - to play the storyboard.

You will see the button being shrunk in size.

In the Properties Pane for the button, click the lightning bolt symbol to open the Events pane.

Add an event for Button_Click. If you are using Visual Studio 2008 Express Edition or Visual Web Developer Express Edition, then you will have to manually copy the event handler to the MainPage.xaml.cs file. Otherwise, in other editions such as Professional edition, the event handler is automatically added to the MainPage.xaml.cs file.

Within the event handler, in the Page.xaml.cs file, add the following code (marked bold for your reference):

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
     Storyboard myStoryboard;
     myStoryboard = (Storyboard)this.Resources["Storyboard1"];
     myStoryboard.Begin();
}

Save, build and test the application. Click the button on the browser output and see the animation action.

This was a very simple example. You can create far complex storyboards with lots of actions in them.

In Blend, animations are based on keyframes defining the start and end points of a smooth visual transition.

In general animation terminology, a keyframe is defined as an object in animation which sets the starting and ending points of any transition. A sequence of keyframes defines which movement will be seen, whereas the position of the keyframes on the animation defines the timing of the movement.

A keyframe in Blend is a marker on the timeline that indicates when a property change will occur. The topic of working with keyframes is very vast so this article will just skim some of the basic concepts related to that, and not explore it in full detail as otherwise it would become too complex to understand and also span several hundred pages!

To create an animation in Expression Blend, you create a storyboard, and in the storyboard, you set keyframes on a timeline to mark property changes.

Select the timeline from the Storyboard picker by clicking the Open a Storyboard button under Objects and Timeline and then selecting a storyboard.

Figure 6 shows the current timeline and existing keyframes for the button. The yellow marker indicates the Playhead.



Figure 6: Existing keyframes

Move the playhead as shown in Figure 7.



Figure 7: Moving the playhead

Now, create a new keyframe by clicking the Record Keyframe button. The button is highlighted in blue color on Figure 8.



Figure 8: Creating a new keyframe

A new keyframe is created on the timeline for the selected object. This keyframe will store any property changes that you make when the playhead is at this point on the timeline.

Change some properties of the button such as background color or transform properties.

Finally, save the project and then click the Play button to preview the animation. You may also test the application by executing it in the browser as usual.



Figure 9: Playing the animation using Play button

Conclusion: This article showed you briefly how to work with storyboards and keyframes.