One of the many things you can do in Silverlight is create animations. This tutorial will take you through a quick tour of how to use Expression Blend to d that. You will learn how to create some content for your animation, how to animate your content, and finally - how to add some code to make your animation play!

By the end of this tutorial, you will have created a slightly less interactive version of the Silverlight application that you see below:

[ click on the Play button to see the animation you will be creating ]

The following steps will explain how to to create something similar to what you see above:

1. Before you begin, make sure you have ready my earlier Getting Started article and have Expression Blend 2 SP1 installed.

2. Launch Expression Blend 2. A Welcome Screen should appear, and from this screen, click on the New Project link:

[ from the Welcome Screen, click the New Project link ]

If you do not see a Welcome Screen, then go to File | New Project instead. The end result is the same.

3. After clicking on New Project, the New Project window appears. From this window, select the button for Silverlight 2 Application, for Name enter SimpleAnimation, and ensure the Language is set to Visual C#:

[ you want to create a new Visual C# based Silverlight 2 Application ]

Click OK to both close your New Project window as well as create your new project with the specified values.

4. You should now see your Artboard display, and it is here where you will do most of your work:

[ meet the Artboard - it is your friend! ]

5. What we want to do first is add the a circular shape that you will be animating. Select the Ellipse tool from your Toolbox:

[ the Ellipse tool allows you to draw ellipses...such as circles! ]

6. With your Ellipse tool selected, draw a circle on your Artboard. Hold down the shift-key to make sure your circular shape is indeed a circle with the same width and height:

[ draw a circle by using the Ellipse tool and holding down the Shift key ]

7. Make sure your circle has a light-blue fill color and no stroke. You can modify those properties in the Brushes panel in your Properties Inspector:

[ give your circle a solid, light-blue colored Fill and no Stroke ]

Once you have made those changes, your circle will look as follows:

[ nothing too fancy, but a blue circle nonetheless ]

Ok, you have made quite a bit of progress on this page. You created a new Silverlight 2 application and drew a circle! In the next section, you will learn how to animate this circle.

In the previous section, we left off with you having a blue circle ready for animating on your artboard. In this page, let's continue by creating the animation.

Creating the Animation

The following steps will explain how to create the animation where your circle slides to the right and scales larger just like in my example:

1. Make sure your circle is selected, and glance over at the Objects and Timeline panel. Click on the Plus button to create a new Storyboard:

[ animations are stored in Storyboards, so you will need to create one ]

2. Once you have clicked the Plus button, the Create Storyboard Resource dialog will appear. In this dialog, change your value in the Name (Key) field from Storyboard1 to MyAnimation:

[ give your Storyboard the name MyAnimation ]

After entering MyAnimation as your Storyboard's name, click on the OK button to close this dialog.

3. Right now, you will be in what is known as the Timeline recording mode where every action that you perform registers a keyframe on a timeline.
    
   Your Objects and Timeline panel will also change to display a timeline itself:

[ you are now in the Timeline recording mode ]

4. Make sure your Ellipse object, your blue circle, is selected. Click on the yellow playhead and drag it to the 2 second mark in your timeline:

[ drag your playhead to the 2 second mark ]

5. Once you have dragged the playhead to the 2 second mark, go back to your artboard and move your blue circle to the right a bit.

[ move your blue circle to the right a bit ]

6. After you moved the blue circle even a tiny bit, a keyframe will have been inserted for you at the 2 second mark:

[ a keyframe has now been recorded for you at the 2 second mark ]

If you drag your playhead back and forth from the 0 second mark to your 2 second mark, you will also see the interpolated position of your circle at the time your playhead is currently in.

7. Anyway, we also want to scale our circle as it slides to the right. Move your playhead back to the 2 second position, go back to your artboard, and scale your circle larger:

[ scale your circle to become larger ]

If you hold down both the Shift and Alt keys when resizing, you will ensure that the width and height of your circle are kept the same, and you will also grow outward from the center of the circle instead of the top-left corner.

8. If you slide your playhead back and forth again, this time, you will see your circle not only sliding, but you will also see it growing in size.

Wow - you made quite a bit of progress on this page. You took your static circle and created an animation out of it where your circle slides and grows larger. We aren't done just yet. We need to add one line of code to have your storyboard play when your application loads. I will cover that and wrap up this tutorial in the next section.

In the previous section, you created the animation and everything seems to work well...inside Blend. In this page, I'll show you how to actually get your animation to play inside your browser.

Playing the Animation

Currently, if you happen to press F5 to preview your application, the browser will load as expected. Your Silverlight application will display with your blue circle appearing also. The only problem is that your animation won't be playing.

In Silverlight, there are two things you need to do to have a working animation. The first step is to actually create the animation - which you have already done in the previous section. The second step is to actually have your animation play, and that will require you writing a line of code, and this page will show you how.

In Blend, click on the Project tab to see the Files panel that displays all of the files that make up your project:

[ the Project tab gives you an overview of the files that make up your project ]

Right-click on the Solution node and select Edit in Visual Studio. A few seconds later, you will see Visual Studio launch and display these exact files in its version of the Files panel you see in Blend, the Solution Explorer:

[ the Solution Explorer's contents should look familiar to you! ]

Expand Page.xaml if it hasn't already been expanded, and double click on Page.xaml.cs to edit it. This is the code-behind file for the UI (Page.xaml) that you have been editing in Expression Blend, and it contains the following code:

namespace SimpleAnimation
{
  public partial class Page : UserControl
  {
  public Page()
  {
  // Required to initialize variables
  InitializeComponent();
  }
  }
}

You will see this mysterious line containing the function InitializeComponent(). Directly after that line, add the following line of code:

MyAnimation.Begin();

Your entire segment of code should now look like the following:

namespace SimpleAnimation
{
  public partial class Page : UserControl
  {
  public Page()
  {
  // Required to initialize variables
  InitializeComponent();
  MyAnimation.Begin();
  }
  }
}

Save this file and hit F5 in Visual Studio or Expression Blend to run your application. Notice that your little animation will play immediately once the page has loaded. The reason is that when your application loads, your MyAnimation.Begin() code gets called.

If you remember, MyAnimation was the name I gave to the animation I created in Blend. In code, I am just referencing it again and calling the Begin method on it. That is all there is to it.

Conclusion

As you can see, creating animations in Silverlight is pretty straightforward, but it does have its quirks such as having to write code to play your animation! This was a very basic, introductory tutorial. In subsequent tutorials on the Silverlight tutorials page, I will delve a little bit deeper into other animation tips and tricks that you should learn.

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇