A Brief Introduction to Storyboards and Keyframes in Blend
This article introduces you to the concept of storyboards and keyframes and shows how to use them in Expression Blend.
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
Figure 1 shows the New option.
In the Create Storyboard Resource dialog box, leave the default name as is.
Open the newly created Storyboard by using the dropdown option in the Object and
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.
Click the red icon that says "Storyboard1 timeline recording is on" to stop
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)
myStoryboard = (Storyboard)this.Resources["Storyboard1"];
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
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
Figure 9: Playing the animation using Play button
Conclusion: This article showed you briefly how to work with storyboards