n summer 2007, Microsoft released version 1.0 of Silverlight, a revolutionary way to build rich interactive experiences on the web. Silverlight is a cross-platform, cross-browser plug-in that extends the browser’s Document Object Model (DOM) with vector graphics and multimedia features. Based on XML Application Mark-up Language (XAML), the same technique used in the Windows Presentation Foundation (WPF), Silverlight can be scripted with JavaScript and can work within AJAX-enabled web pages.

Microsoft Silverlight Streaming by Windows Live is a free streaming and application hosting service for delivering rich interactive applications (RIAs) over the web. Silverlight supports a range of video formats including high definition (HD) and (SMPTE) VC-1.

Silverlight provides a consistent user experience with Firefox and Safari on the Mac and Firefox and Internet Explorer on Windows. Even Linux users can run Silverlight using Novel’s open-source Moonlight code. In fact, you’re not locked into the Microsoft platform at all?it’s just as easy to deliver Silverlight experiences from PHP sites on Apache/Linux as it is from ASP.NET sites on a Windows Server.

In this article you’ll see how to get started with Silverlight and how to upload your applications and rich media to the Silverlight Streaming Service.

“Hello World” in Silverlight
Users need to install the Silverlight 1.0 runtime for their browsers. The first users visit a Silverlight-enabled site such as http://www.microsoft.com/silverlight, they’re directed to an installation process. The runtime is surprisingly small (less than 2 MB) and installs quickly and painlessly.

I’ll start with a simple Silverlight “Hello World” demonstration.

Using XAML, define a Canvas that includes a TextBlock with the “Hello World” text and save this file as Hello.xaml:

Create a short HTML page to host the Silverlight control, and call it Default.html:

You must also provide two JavaScript files. The first, Silverlight.js, is part of the Silverlight SDK, so you get it when you download the SDK. The second, CreateSilverlight.js contains the code responsible for instantiating the Silverlight control with your specific XAML page. Here’s the code:

   function createSilverlight()   {        Silverlight.createObjectEx({         source: 'Hello.xaml',         parentElement: document.getElementById(            'SilverlightPlugInHost'),         id: 'SilverlightPlugIn',
?
Figure 1. Running the Silverlight Hello World Application: Loading the default.htm page runs the CreateSilverlight.js script to instantiate the Silverlight control.
         properties: {            width: '400',            height: '400',            background:'#ffffff',            isWindowless: 'false',            version: '1.0'         },         events: {            onError: null,            onLoad: null         },                  context: null       });   }

You should now have four files: default.htm, Hello.xaml, CreateSilverlight.js, and Silverlight.js. Launching default.htm in a browser runs the application (see Figure 1).

Silverlight Streaming
Microsoft has a software and service strategy and this is where the Silverlight Streaming by Windows Live service comes in to play; developers can deploy their Silverlight applications and rich media “in the cloud,” leveraging Microsoft’s high performance, high availability content distribution network.

While the product is in pre-release, storage and delivery is free up to 4 GB of content, with outbound streaming speeds up to 700 Kbps. After release, developers will have continued use of the service with up to 1 million minutes of free video streaming at 700 Kpbs per site per month. That should be more than enough for testing or small applications. Those who need more can get unlimited streaming for free by accepting advertising or, for a nominal fee, without advertising.

To get started, sign up for a free Silverlight streaming account. You will need a Windows Live ID. If you don’t have one, you can create a new Windows Live ID for free.

Uploading Content
Your content resides on Microsoft’s Windows Live servers, so you need to move your Hello World sample to the Silverlight Streaming Service.

First create a simple manifest.xml file that describes the constituent parts of your Silverlight Streaming application:

         1.0       Hello.xaml   

For this simple example, you no longer need the default.html or JavaScript files. You just need to create a Hello.zip file that contains manifest.xml and Hello.xaml.

On Windows, select all the files (using multiple select), right-click and select Send To Compressed (zipped) folder. You can use any of the popular ZIP-format compression programs, but you need to make sure that the manifest file appears in the top-level root of the zip file?zipping the parent directory is a common error and will not work!

Log in to Silverlight Streaming at http://silverlight.live.com using your Windows Live ID and click Manage Applications. Select Upload a Silverlight Application, specify a name (Hello) and browse for your Hello.zip file. Click Upload (see Figure 2). Silverlight Streaming uploads your file.

? Figure 2. Uploading Content: Uploading your application to Silverlight Streaming is simple: just upload a zip file containing the content and a manifest.

? Figure 3. Sample HTML and JavaScript: After you upload your application, the site creates test links and sample code automatically.

	?
Figure 4. Testing Uploaded Content: Click the Launch Application Test Page to run your application.

Depending on your connection speed and the size of the content, uploading may take a while. If all goes well, you will see a page that allows you to test your application. You will also be given sample HTML and JavaScript that you can cut and paste into your own web site to run the application (see Figure 3).

To test your application, click the Launch Application Test Page link (see Figure 4).

You can also provide a link so others can run your application in an IFRAME. The URL to run your application will look similar to this:

	?
Figure 5. Running In an IFRAME: You can let other web pages invoke your application from within an IFRAME. The application runs using an obfuscated URL.

   http://silverlight.services.live.com/      invoke/accountId/appName/iframe.html

In the preceding URL, accountId is your Silverlight Streaming numeric account identifier and appName is the name of your application (in this case, it would be Hello). You can find out your accountId by clicking the Manage Account link. The IFRAME invoker redirects the IFRAME to an obfuscated URL as shown in Figure 5.

That’s a quick overview of how to get a hosted Silverlight application running, but what happened to the rich multimedia? One of the easiest ways to get started with Silverlight video and audio is by using Expression Encoder.

Expression Encoder
Expression Encoder puts video in a streaming format, and lets you edit and encode digital video and audio, add leaders, trailers, and watermarks and control the quality and encoding of the output.

	?
Figure 6. Automatic Silverlight Media Players: Microsoft Expression Encoder can automatically generate Silverlight media players from predefined templates.

You can download a Trial edition of Expression Encoder to try it out. The program is simple and intuitive to use, and there is a short video tutorial available to get you up and running quickly.

You’ll find a number of predefined Silverlight media player templates in the “Job Output” section of the Output tab that create a full Silverlight wrapper for you without any coding. And if you download and install the Silverlight Streaming Publishing Plug-In for Expression Encoder, you can publish a job output from Microsoft Expression Encoder directly to Silverlight Streaming using the public API. Just provide your accountID and Account Key and press Publish (see Figure 6).

Expression Blend 2
Showing basic media types and text is straightforward, but if you are serious about designing professional, rich user experiences with Silverlight, you probably want to use Expression Blend 2, which is a full-featured Silverlight XAML authoring tool for designers. Using the Expression Blend 2 December Preview, you can create a new Silverlight 1.0 Site project, and then interact with the design surface to lay out your graphic design. The tool has a Split view that shows both your design work and the corresponding XAML (see Figure 7).

	?
Figure 7. Microsoft Expression Blend 2 December Preview: The Split view in Expression Blend shows you both the run-time and XAML views of your project.

One advantage of Expression Blend is that it uses the same project file format as Visual Studio, which means that you can open the same site in Visual Studio. That allows developers to build advanced functionality and enables efficient designer/developer interaction.

More Features

Here’s a list of other features that Microsoft Silverlight Streaming by Windows Live offers:

• You can upload and manage your Silverlight applications programmatically using a simple REST API.
• You can use Expression Encoder with a command line interface allowing batch mode operation and on-the-fly trans-coding.
• You can split your application so that the XAML is delivered from your own site, but pulls multimedia content from the Streaming Service. This can be a useful technique to allow more flexible scripting and avoid cross-domain issues.

Finally, the application in this article uses Silverlight 1.0, but the streaming service will also work with the Silverlight 1.1 pre-release and the forthcoming Silverlight 2.0, opening up program code to .NET languages as well as JavaScript.

Video-enabled web applications have traditionally been expensive and difficult to host because of their high bandwidth demands and requirements for streaming and edge-cached networks. Silverlight is more than a Flash replacement?it’s changing the way developers build rich interactive applications on the web. Just take a look around, and you’ll see a wide range of applications, including video, games, and advanced data visualization tools.