Want to get started with Silverlight and don't have a clue as to where your services should go? Have no fear. In this feature we'll walk you through setting up an account on Windows Live and getting your services hosted there, both for development and deployment.
November 1, 2007
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"/>
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.
|
|
|
Step Four: Add Basic Video Controls
In Expression tutorials, you get to see a lot regarding automatic timelines and events and controls. Surprisingly, these only apply to WPF projects, not Silverlight. So far, you can't add events of any kind to a Silverlight application from within Blend 2.
|
Silverlight Streaming Plug-in for Expression Encoder On October 30, 2007, Microsoft announced some very cool news that makes Step Five a lot simpler. Rather than going through the manual process of modifying your app for Silverlight Streaming, such as creating the manifest.xml file, zipping everything, and uploading the app through the web admin interface, you can do it all through a plug-in. If you're using Expression Encoder to optimize your video, as I did for this demo, then be sure to check out the alpha preview version of the Silverlight Streaming Plug-in for Expression Encoder. With the plug-in installed, you can select Silverlight Streaming as your "Publish to" option. Enter your SLS Account ID and other information, hit Publish, and you're good to go. You'll even get an iFrame snippet like the one above to put onto your page. |
|
|
Go to Visual Studio and reload. Open Page.xaml.cs, which looks pretty empty at the moment. Because of the work you did in Blend, you have some new objects available to play with, but they're not yet available to IntelliSense® (bug or feature—you decide). Just build the project and you'll see them.
In the Page_Loaded routine, add a couple of event handlers:
btnGo.MouseLeftButtonUp += new MouseEventHandler(btnGo_MouseLeftButtonUp);
btnPause.MouseLeftButtonUp += new MouseEventHandler(btnPause_MouseLeftButtonUp);void btnPause_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
blendvideo_wmv.Pause();
}
void btnGo_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
blendvideo_wmv.Play();
}Hit F5. You should be able to stop the video with your red dot and play it again with the green one. How's that for some basic control?
|
Problems I Encountered—You May, Too Knowingly working with beta, and alpha, software means you don't get to bitch when things go wrong. So instead I'm going to call these Helpful Tips, which I impart to you solely for your benefit. Here are some of the more common problems you might encounter when trying to build your first Silverlight app. Can't install .NET 3.0 or .NET 3.5 (meaning you can't install Expression or Visual Studio 2008). Access to the path 'c:\Program Files Expression Blend wouldn't recognize the XAML file created by Visual Studio 2008 Beta 2. AG_E_RUNTIME_MANAGED_ Demo Page Keeps Prompting to Install Silverlight But Won't Play the Video |
Step Five: Publish to Silverlight Streaming by Windows Live
If it works locally, then you're ready to publish . Developers with limited server resources for hosting experimental software will love Windows Live. Of the many services available, the one with the most immediate benefit would be the Silverlight Streaming service With it, you can upload a video of up to 22MB and host it on Microsoft's servers.To prep your new app for Silverlight Streaming, open TestPage.html and replace
<script type="text/javascript" src="Silverlight.js"></script><script type="text/javascript"
src="http://agappdom.net/h/silverlight.js"></script>function createSilverlight()
{
Silverlight.createHostedObjectEx({
source: "streaming:/XXX/SLDemo",
parentElement: document.getElementById
("SilverlightControlHost"),
id: "SilverlightControl",
events: {}
});
document.body.onload = function() {
var silverlightControl = document.getElementById
('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
Open Page.xaml and replace
x:Class="SLDemo.Page;assembly=ClientBin/SLDemo.dll"x:Class="SLDemo.Page;assembly=SLDemo.dll"<SilverlightApp>
<source>Page.xaml</source>
<version>1.0</version>
<width>100%</width>
<height>100%</height>
<inplaceInstallPrompt>true</inplaceInstallPrompt>
<background>#FFFFFF</background>
<framerate>24</framerate>
<isWindowless>false</isWindowless>
</SilverlightApp>In your project folder, create a zip file called "SLDemo.zip" and add the following files to its root:
- blendvideo.wmv
- SLDemo.dll (from ClientBin directory)
- manifest.xml
- Page.xaml
Once it's done uploading, it's time for the ultimate test. Go back to Visual Studio and run it.
Deploying an uploaded project on your site couldn't be simpler. The Silverlight Streaming admin page gives you all the code you need to embed the new project in a simple web page. With the exception that the dimensions were completely wrong (at least for this demo), the snippets worked out well for me. You can see the result here.
However, the code snippets on the admin page don't do this service justice (and for that reason, they may very well be replaced by the time you read this). For true elegance, Silverlight Streaming has implemented iFrames, specifically for sites that disallow Javascript. So instead of adding script to the html header and including a separate Javascript file, add the following line to the body of your page, or anywhere you want to include your Silverlight app, where XXX is your account ID and "SLDemo" is the name of your application.
<iFrame src="http://silverlight.services.live.com/invoke/XXX/
SLDemo/iframe.html" frameborder="0" width="640" height="480"
scrolling="no"></iFrame>Where to Go From Here
As part of a huge push, Microsoft has created a ton of training material for Silverlight, Expression Blend, and Visual Studio 2008. Here are just a few of the resources you might find helpful.* This article was commissioned by and prepared for Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.