Flash to Silverlight

Procedural Animation

In the last tutorial, we covered using
Storyboards to create preset animations which are very similar to timelines
in Flash. Another animation method commonly used in Flash is animating objects with
code during the ENTER_FRAME event.

The equivalent event in Silverlight is called CompositionTarget.Rendering. In this
tutorial we’ll demonstrate how to use the event.

Here’s an example using procedural animation in Flash:

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

Create a new Flash File (ActionScript 3.0) with an actions layer and single frame.

Set the Size to 600 x 200 and the Background color to #333333.

Draw a circle and convert it to a Movie Clip named “ball”

Using the Project panel, create a new class named “Ball” and bind it to the “ball”
library symbol.

Now let’s take a look at how you would create this example in Silverlight.

Set the Stage and Create a Ball Control

We’re staying strong with our initial setup pattern. This tutorial setup is the
same as the last one, so we’ll quickly breeze through the first few actions. This
time I chose to use a tiny 4px wide green circle.

If you have questions on how to accomplish one of the tasks below, please refer
back to The Beginning
tutorial in this series.

Create a new Silverlight Application + Website

Set Width and Height of [UserControl] to 600 and 200

Set the Background of LayoutRoot in MainPage to #333333

Change the LayoutRoot Grid to a Canvas

Add a new UserControl and name it “ball”

Add a small Ellipse centered on the upper left corner in the ball UserControl