• Home
• |
• Flash to Silverlight
• |
• Expression Blend
• |
• About

Storyboard Animation

Animation is a great place to start when learning a platform used to create graphically-rich and interactive applications. In this tutorial, we’ll begin talking about animation in Silverlight by looking at the Storyboard object. In some ways Storyboards are similar to timelines, but as you will see in the following tutorial they can be used for procedural animations like ENTER_FRAME based animations.

Here’s an example of timeline driven animations written in Flash:

To create this example in Flash, you could use the steps below:

1. Create a new Flash File (ActionScript 3.0) with an actions layer and single frame.
2. Set the Size to 600 x 200 and the Background color to #333333.
3. Draw a circle and convert it to a Movie Clip named “ball”, Exporting for ActionScript with a class name of “ball”.
4. Add a keyframe in the “ball” timelines at frame 40
5. Shape tween from frame 40 to 60 to drop the circle and fade it out
6. On frame 60 remove the ball using the following code:
   stop();
   parent.removeChild(this);
7. Add the following code to frame 1:
   function addBall(event:MouseEvent):void{
      var b = addChild(new ball());
      b.x = mouseX;
      b.y = mouseY;
   }
   
   stage.addEventListener(MouseEvent.MOUSE_MOVE, addBall);

Now let’s take a look at how you would create this example in Silverlight using a Storyboard in place of the timeline animation.

Set the Stage and Create a Ball Control 

The initial setup for this tutorial is almost exactly the same as last tutorial so we’ll quickly breeze through the first few actions. If you have questions on how to accomplish one of the tasks below, please refer back to The Beginning tutorial in this series.

1. Create a new Silverlight Application + Website
2. Set Width and Height of [UserControl] to 600 and 200
3. Set the Background of LayoutRoot in MainPage to #333333
4. Add a new UserControl and name it “ball”
5. Add a small Ellipse centered on the upper left corner in the ball UserControl