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

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:

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”
4. Using the Project panel, create a new class named “Ball” and bind it to the “ball” library symbol.
5. Import the Event class:
   import flash.events.Event;
6. Add the following properties to the Ball class:
   var vx:Number;
   var vy:Number;
   var count:Number = 0;
7. Add following code to the constructor:
   vx = Math.random()*5 - Math.random()*5;
   vy = Math.random()*5 - Math.random()*5;
   addEventListener(Event.ENTER_FRAME, flyAway);
8. Add the event listener method:
   function flyAway(e:Event){
      x += vx;
      y += vy;
      vx *= .995;
      vy *= .995;
      if(count++ > 50 ){
         removeEventListener(Event.ENTER_FRAME, flyAway);
         parent.removeChild(this);
      }
   }
9. Add the following script 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.

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.

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. Change the LayoutRoot Grid to a Canvas
5. Add a new UserControl and name it “ball”
6. Add a small Ellipse centered on the upper left corner in the ball UserControl