Flash to Silverlight

You do Flash and now you want to add Silverlight to your skillset?
You've come to the right place.

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.

Centered and Fixed circle
  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

Pages 1, 2, 3

Next Step »

The ball is ready! Let's animate it down and fade it out with a Storyboard.

blog comments powered by Disqus