Flash to Silverlight

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

Color Scale and Rotation

In the past few tutorials we’ve looked at positioning in Silverlight, but now we’re going to focus on modifying an object’s visual appearance – specifically, color, scale and rotation.

Here’s an example of modifying color, scale and rotation dynamically 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 100 and the Background color to #333333.
  3. Draw a 50x50 rectangle and convert it to a Movie Clip named “block”, Exporting for ActionScript with a class name of “block”.
  4. Add the following code to frame 1:
    for(var i = 0; i < 10; i++){
       var b = addChild(new block);
       b.x = 25 + 60 * i;
       b.y = 50;
       b.rotation = 10 * i;
       b.scaleX = b.scaleY = 0.1 + 0.1 * i;
       b.transform.colorTransform = new ColorTransform(0,0,0,0,i*28,255 - i*28,255,255);
    }

Let’s take a look at how you would create this example in Silverlight using a Transforms and Brushes.

Set the Stage and Create a Block Control 

The setup is similar to past tutorials in this series. You should be rather good at this part by now. If you have questions on how to accomplish one of the tasks below, please refer back to The Beginning tutorial in this series.

Centered Rectangle
  1. Create a new Silverlight Application + Website
  2. Set Width and Height of [UserControl] to 600 and 100
  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 “block”
  6. Add a 50x50 Rectangle centered on the upper left corner in the block UserControl

Pages 1, 2, 3

Next Step »

Now it’s time to add the Transforms and update the Brushes.

blog comments powered by Disqus