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.
|
So just make up a few of your own. In Blend you draw a circle (or another ellipse, if that's your fancy) by holding down the Rectangle tool until you get a flyout, then choosing the Ellipse tool. Put one in the bottom-left corner of the canvas. Using the Properties tab on the right, name it "btnGo" and color it green. Copy the circle and move the copy to the bottom-right. Call this one "btnPause" and color it red. See Figure 7 for my version.
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);
If you type these in directly, you'll notice that the IntelliSense automatically adds the requisite methods for you, with exception placeholders. Replace these with the following:
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).
This could be 1000 different things. Unfortunately, error messages are nearly meaningless, so troubleshooting means poring through massive error logs. It turns out the problem I was having was very common - a corrupt metabase. As a quick check, open Services and make sure IIS is running. If it's not, start it. If it crashes, there you go - you now know what the problem is. If possible, restore your metabase from a good copy. If all else fails, you'll need to uninstall and reinstall IIS. Once I did that, I was able to install the framework and the other necessary software with no further problem.
Access to the path 'c:\Program Files
\Microsoft Visual Studio 9.0\Common7
\IDE\ProjectTemplatesCache
\CSharp\Silverlight\1003\SilverlightProject.zip
\TestPage.html.js' is denied.
If, like me, you prefer AVG as your (free) anti-virus, you may run into a lot of problems with Microsoft products, particularly the new beta stuff. Par for the course, it turned out that AVG was locking access to this obscure file. Turning off both AVG services didn't do the trick. Even when AVG wasn't running, I still couldn't start a Silverlight project. Setting aside for a moment a debate about the wisdom of naming files with an ".html.js" extension, AVG has given me problems with other applications, as well, so I decided to uninstall it. Problem solved. For more info on this problem, check out this thread.
Expression Blend wouldn't recognize the XAML file created by Visual Studio 2008 Beta 2.
The Beta version of Expression Blend distributed at MIX (as well as the version later mailed to MIX attendees) doesn't completely work with Visual Studio 2008 Beta 2. That's why this article references the September preview of Expression Blend 2, available for free. That worked beautifully.
AG_E_RUNTIME_MANAGED_
ASSEMBLY_DOWNLOAD
(ErrorCode: 2252)
Don't be fooled—this just looks like a helpful message. It's really not. It's another very common problem with multiple solutions. Essentially, your dll isn't getting found. If this happens locally, the problem could be with your IIS configuration. It may also have to do with a typo in your Page.xaml file. Previous versions of Blend also caused this error by changing class references in Page.xaml. But in the case of this demo, the problem came up on two separate occasions. The first turned out to be a reference to ClientBin as the assembly location in Page.xaml, hence the instruction to remove it before compiling. The second occurred on the client side when people tried to view the finished product. This time it turned out that the manfiest.xml file specified 1.0 instead of 2.0. But once that was changed, users still had problems...
Demo Page Keeps Prompting to Install Silverlight But Won't Play the Video
If your manifest.xml specifies version 2.0 but users have version 1.0 installed, they will get a prompt to download Silverlight. But that prompt won't specify which version of Silverlight. If they pick the most obvious choice at the top of the page, then they'll get caught in a loop, with the app prompting them to download, them downloading, the app prompting them to download, etc. This is because specifying Silverlight 2.0 in manifest.xml doesn't seem to trigger an automatic update of the correct runtime version. Whether this will be fixed soon is up for debate. But for now, be sure you have version 2.0 of the runtime installed on your machine.
|
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>
with
<script type="text/javascript"
src="http://agappdom.net/h/silverlight.js"></script>
Next, open TestPage.html.js and replace the entire thing with the following
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();
}
}
where XXX is your Silverlight Streaming Account ID (also available
here if you've forgotten it already). Note that the primary difference between this and what you already had is that you're using Silverlight.createHostedObjectEx instead of Silverlight.createObjectEx and giving it a streaming source.
Open Page.xaml and replace
x:Class="SLDemo.Page;assembly=ClientBin/SLDemo.dll"
with
x:Class="SLDemo.Page;assembly=SLDemo.dll"
The key to your Silverlight project is your manifest.xml file which, you'll notice, you don't get automatically. Go ahead and add one to your project and fill it with the following:
<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>
Build the project and make sure you end up with an updated SLDemo.dll in your ClientBin directory.
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
From the
Silverlight Streaming Admin page, upload a new application. Call it "SLDemo" and include the new zip file you just created. Also on this page, you can preview your project, replace it, or delete it entirely.
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>
As you can see
here, the result looks exactly the same.
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.
Windows Live Dev Site
Windows Live Platform Quick Applications Beta
Windows Live Developer Forums
QuickStart: Hello World 2.0 for Silverlight Streaming
Microsoft Silverlight Tools Beta for Visual Studio 2008
Microsoft Silverlight Streaming by Windows Live Developer Site
MSDN® Silverlight Developer Center
How To: Upload an Application (to Silverlight Streaming)
Windows Live: Silverlight: Manage Applications
Silverlight Tutorials
Microsoft Expression® Blend 2 (Latest Preview)
Expression Tutorials
Another Good Tutorial: Beginning Silverlight 2.0 Part 1
* 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.
Print
Previous Page: Prepare Your System
Justin Whitney is a regular contributor to DevX.com and Jupitermedia. He currently lives in San Francisco, where he consults for leading high-tech firms and writes about emerging technologies.
Dzone.com
Digg.com
Slashdot.org
Reddit.com
Del.icio.us