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

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.

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