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

The Beginning

With the tools installed, it’s time to begin creating Silverlight projects. We’ll start with something simple – adding a ball to the stage when the mouse is clicked.

Here’s an example 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 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.CLICK, addBall);

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

Creating a new project in Blend 

To create a new Silverlight project in Expression Blend click “New Project…” found on the Welcome Screen or the top menu under the File menu item. This brings up the “New Project” dialog which displays a list of the available project types. By default the “Project types” node is selected in the left menu, but if you select the Silverlight node you will see the full list of Silverlight project types:

• Silverlight Application + Website – creates a Silverlight application and an HTML website to host the compiled application. This is useful when you plan to style the containing HTML or add content.
• Silverlight Application – creates a Silverlight application and generates a dynamic HTML file every time the application is run.
• Silverlight Databound Application – creates a Silverlight application using the MVVM programming pattern and generates a dynamic HTML file every time the application is run.
• Silverlight Control Library – creates a library used as an external reference for Silverlight applications. This is useful for reusing and organizing your code.
• Silverlight SketchFlow Application – creates a Silverlight application in SketchFlow mode used for creating rapid prototypes.

For this project, we’ll use the Silverlight Application + Website project type. Select the option in the menu and hit OK. Blend will now create a solution file and the two projects, along with a few files to get you started.

The solution and project file used by Blend is the same format used by Visual Studio. This enables the workflow between the two tools to be seamless. A shared file system, including source control, is one of the great advantages of the tool set. Design tasks and development tasks can be accomplished using the same files using the respective tools. No need to copy and paste between the two.