If you've seen any of the Silverlight™ demos, you can't help but to have noticed its treatment of streaming video. Typically, HD quality video streams can consume a lot of disk space and bandwidth. Fortunately, Microsoft recognizes the needs of the developer who is just getting started in this area, developers who may not have the resources to host a video file, or the bandwidth to support its delivery to multiple users.

So among its many interesting offerings, Windows Live™ provides a hosting space, currently free, for streaming Silverlight media called "Microsoft® Silverlight Streaming by Windows Live", or SLS for short. This makes a great entry point for getting started with both Silverlight development and integration of Windows Live services. As stated on http://silverlight.live.com, "While the product is in pre-release, storage and delivery is free up to 4 GB, with outbound streaming up to 700 Kbps. As we move out of Beta, developers/designers will have continued use of the service with up to 1 million minutes of free video streaming at 700 Kpbs per site per month. Unlimited streaming will also be available for free with advertising, or with payment of a nominal fee for the service for use without advertising."

To give you a sample walkthrough, I'm going to build a bare-bones site that focuses on this service. In this demo, you'll start a Silverlight project, add a video, reshape the video, add some basic controls, and publish using Silverlight Streaming.

"Streaming" vs. "Progressive Downloads" A point of order, technically the Silverlight Streaming service doesn't "stream" videos. With streaming media, you can access any portion of the file on demand and it will begin playing it before the download is complete. With a progressive download, the file will begin playing on demand, as well. But if you jump forward you must wait for the entire file to load up to that point before it will play. Technically speaking, SLS offers the latter.

Step One: Prepare Your System

Silverlight apps represent the convergence of several different pieces. Based on what kind of app you build, you may need more than the bits listed here. But for this walkthrough, you're going to need:

• Visual Studio® 2008
• Microsoft Expression® Blend 2 March Preview
• Silverlight 2.0
• Silverlight 2.0 SDK for VS 2008
• A Silverlight Streaming account

Step Two: Create a Project in Visual Studio

When you create a new project in Visual Studio, you should see the option to create a Silverlight project, as in Figure 1. Call this project "SLDemo".

Figure 1. New Silverlight Project

When the project is created, you'll see that, as expected, all of the references and default pages, including a Page.xaml file, have all been set up for you, as in Figure 2. Where you start your Silverlight project can have an impact on what you start with. If you start sample projects in both Blend 2 and Visual Studio, you'll notice some differences in XAML references and default pages, but those don't greatly impact the result of what you're doing.

Figure 2. Silverlight Solution Members

Just to see if your install is working correctly, create a simple "Hello, Y'all" app. On Page.xaml, in the <Canvas> tag, add:

	<TextBlock Width="100" Height="100" Text="Hello, y'all!" 
                  TextWrapping="Wrap"/>

Press F5. You should see a basic page with "Hello, y'all!" at the top.

Note: be sure to read Wei-Meng Lee's great article, "Get Started with Silverlight Using Visual Studio 2008 and Expression Blend 2" for more detailed information about the parts of a Silverlight project and how Visual Studio and Expression Blend 2 work together.

Step Three: Add Video and Mask

Next, open the solution in Blend 2. This is, I think, the coolest thing about Silverlight development using Expression and Visual Studio: side-by-side development. Developers and Designers work on the same solution at the same time. As long as everyone behaves (i.e. designers don't code and, God forbid, developers don't draw), then it should speed up app development significantly. Though I haven't personally experienced this, word from demo teams has been that this is, indeed, the case.

When you open the solution in Blend, you'll see the same project hierarchy and members as in Visual Studio, though with a decidedly cooler interface. Yes, this is a tool for designers. Go ahead and delete the textbox—you won't need that anymore.

Before you go on, here's a sample asset for you in case you don't have your own video you'd like to play with: blendvideo.wmv. Watch video in Silverlight.

Right-click on the project "SLDemo" and choose "Add Existing Item". Add the video of your choice, whether this one or your own. Once it's in the project, double-click to add it automatically to your canvas. Resize as is your pleasure. You should end up with something like Figure 3.

Figure 3. Adding Video in Blend 2

Quick Tip: hold down the Shift key while you drag the corner points for proportional resizing.

Flip back over to Visual Studio and you'll see the project update action in progress. Important: hit "Yes" or "Yes to All" to update your project. You can run the new video as-is from either tool, but for now go back to Blend and hit F5. It should open a new browser instance and play the video on an otherwise blank page.

As it stands now, the video looks a little boring, so add a mask. Masks are fun—you can create custom shapes in Expression Design and bring the XAML into Blend for some very cool effects. That is, if you're a designer. But I'm not, so I'm going to add a box.

From the toolbar, choose the rectangle tool. Drop a rectangle onto your canvas and resize to cover the entire video. Since snapping is on automatically, you can easily resize the dimensions to fit over the existing video object. To make rounded corners, click on the Selection tool (or press V) and hover over a corner of the rectangle until you see the rounding icon. It's right on top of the resizing arrow so this might take some fine motor coordination. You can see what to look for in Figure 4. Grab hold of this and pull toward the center of the rectangle until you get the corners you want.

Figure 4. Rounding Icon

To make a mask, select both the rectangle and the video in the Objects and Timeline panel on the left, then choose Object -> Path -> Make Clipping Path, as in Figure 5. The result should be something like Figure 6. Hit F5 and you'll see the video play in a fancy rounded-rectangular shape.

Figure 5. Making a Clipping Path from an Ellipse

Figure 6. Result of Clipping Path