As I promised I’ve made an in-depth video tutorial on how I created the iZufall.com website using Microsoft Expression Design. The video itself was easy enough to make but I spent several hours today trying to conform it to the stats required to be able to upload it to the Silverlight Streaming Server.
Turns out publishing to the Silverlight Streaming Server and posting Silverlight applications isn’t all that easy. Here’s a “quick” run-through:
Step One: Create a Video
Easy enough. You can use anything to create the video and export it to whatever standard format you want.
Step Two: Conform the Video Using Microsoft Expression Media Encoder (EME)
Should be easy enough. Simply import the video file into EME and tweak the settins until you get the desired result. Only here you have to watch what you are doing. Turns out the Silverlight Streaming Server only accepts wmv files that are less than 22mb. My tutorial is huge (800×600) and over 13 minutes long (because I can’t stop talking). My first export (which took 20 minutes) totaled at 32mb so I was 10 over. With tweaking I managed to get it down to 23mb and finally 17.something. This tedious process took about 3 hours because the estimated size EME projects is completely off the charts wrong (the first time it estimated 70mb, the second 34 and the final one 26).
Anyway, when the video is exported EME spits out a list of files under the export folder. This list consists of the following (in alphabetical order):
- BasePlayer.js
- Default.html
- MicrosoftAjax.js
- player.js
- player.xaml
- PlayerStrings.js
- preview.jpg
- Silverlight.js
- StartPlayer.js
- YourVideoFile.wmv
The files are under a time stamped folder with a cryptic name like (in my case) “MORTEN 06-08-2007 1.24.08 PM”. I’m sure you can change this but I’m lazy.
Step 3: Upload Your Application to Silverlight Streaming Server
Once you’ve finished and tested your application you can post it on the Silverlight Streaming Server which allows you to post up to 4gb of free content. First you go to silverlight.live.com and create an account and then you log in. Once inside you can upload your application. But wait! Your application isn’t like a Flash .swf file… it’s a whole whack of files! So it’s not as easy as it seems after all.
As is typical I did not read any of the info and just zipped the whole export folder and tried to upload it directly. After waiting for an awfully long time (there is no bar telling you the progress of your upload or if it’s uploading at all) the project was created and I got a message that my archive was missing a file called “manifest.xml”. Serves me right for not reading the manual I guess. Turns out you have to build an xml file called “manifest” and put it in your archive to get your application to work. God knows why this xml file isn’t auto generated by EME since it is the same for all Silverlight Applications but alas it’s not so you have to make it yourself. The script is as follows:
<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>BasePlayer.js</js>
<js>PlayerStrings.js</js>
<js>player.js</js>
<js>StartPlayer.js</js>
</jsOrder>
</SilverlightApp>
In addition the archive should not include all the files from the export. The proper zip archive should include the following:
- manifest.xml – The file you have just created in the previous step
- player.xaml – The XAML file correcponding to your Silverlight application
- *.wmv — Video file(s)
- *.jpg — Image file(s), thumbnails for the chapter markers and the preview
- *.js – All the scripts in the Output folder EXCEPT Silverlight.js
Confused yet? I know I was. Anyway. Once this is done you can upload the zip archive and the application will appear on the server.
Step Four: Posting Your Application
Again, if you are used to the relative simplicity of posting Flash content on a site you’ll be frustrated by how complicated it is to publish Silverlight apps. Once the project is uploaded you get a whole pile of code you have to use. I cut the below section straight out of the Manage Application page:
There are three steps required to add this Silverlight application to your web page.
1) Add the following script references to the page header section.
2) Insert the following HTML where you want the application to appear in the body of the page.
3) Save the following script in a new file named “CreateSilverlight.js” and place it in the same directory on the server as the page.
I believe there is an easier way of doing this – I vaguely recall seeing something about using iFrames but I have to do some more research before I can confirm it.
Final Thoughts
Since it took me so long to compress the project and upload it I had to leave my computer to go to my other job so I haven’t been able to test the last step and actually post the video tutorial yet. Hopefully I’ll be able to do this some time tonight so you can take a look at the final product and read my experiences actually posting an app.
For now I’ll just say this: Creating and publishing Silverlight applications seems unnecessarily cumbersome. I know this is just the beginning but for now this is not user friendly in any way. I’m assuming that publishing applications on your own server is easier (and I’ll test this tomorrow) but using the Silverlight Streaming Server is way too complicated for the novice user.
When I have this video and the second half where I demo how I the project went from design to functional website using Expression Web I’ll make another video walking through the process of creating and publishing a simple Silverlight application using Silverlight Streaming Server to make life a little easier for the next person that wants to try it out.
Here are some useful links to sites I used when figuring this whole thing out:
QuickStart: Package a Video File using Expression
Using the Silverlight Streaming Administration Site
That’s all I got for now. Stay tuned for the video tutorial :o)
16 replies on “Posting a Silverlight Application – Major Headache”
[…] the digital content using Silverlight Streaming. There are great posts from Catherine Heller and Morten on how to post Silverlight content, but I thought a Silverlight screencast to answer […]
[…] the digital content using Silverlight Streaming. There are great posts from Catherine Heller and Morten on how to post Silverlight content, but I thought a Silverlight screencast to answer […]
[…] the digital content using Silverlight Streaming. There are great posts from Catherine Heller and Morten on how to post Silverlight content, but I thought a Silverlight screencast to answer […]
I couldn’t understand some parts of this article Posting a Silverlight Application – Major Headache, but I guess I just need to check some more resources regarding this, because it sounds interesting.
One more thing about hosting the application is that zipping up the whole output folder might not work. Vista might want you to zip one file and then drag the rest in one by one.
I have a flash site
i’m looking for the script who shows google adsense in flash.
how can i get it?
Thanks!,
Phentrimine is used for treating female infertility.
can’t somenoe in this forum support our producer
making our new joomla site lejlighed silkeborg to work properly.
this company site ïsn’t operating present moment.
I want to listen good music!
This look interesting,so far.
If there are any real people here looking to network, leave me a post.
Oh, and yes I’m a real person LOL.
See ya,
The new season of survivor this fall is going to be great.
I’m trying to get my application or video to upload the silverlight.live.com and when I encode using Expression Encoder 2 – I get no BasePlayer.js file. I upload my application with manifest.xml file and when testing the application I just get a blank black screen. I also noticed the the output video file has no file extension on it (.wmv) I tried adding the file extension and uploading just the video but that didn’t work either. Just curious if anyone has had a similar problem…
Do you watch TV episodes at Hulu?
I found a great website where you can watch news, sports, TV episodes and movies and wanted to share.
WatchTV
Hello,
I just recently graduated from college and uncovered a variety of different funding sources so that in the end I didn’t pay very much out of pocket for my education. If you take the time and do a little research there are quite a few little known scholarships or grant sources which means less competition for those. These sources generally are for low dollar amounts but if you can start finding a number of these it starts to add up fast. One such source that I discovered last spring semester offers up to a $10,000 Scholarship for Women which you can use how ever you want towards your education. I would not stop with just this one source but get online or go to the library and start looking for more. Like I said, I was able to get a large portion of my education paid for by doing this.
Cheers
Mary
Are there any acai berry side effects? Find out here!