PapaJohn Productions

Newsletter #165 - September 1, 2007
Photo Story 3 to Silverlight
 

 

This week I'd like to take you through the steps to take a story from Photo Story 3 to an online embedded Silverlight player and see it playing on a typical website page...
 
Click the link or picture to view my sample... playing as a file download from my website.
 
Silverlight Player with Story
 
http://www.papajohn.org/Newsletters/165/165.html
 
For this full-sized snapshot, I manually sized the browser to get the player and text positioned on the grid so they looked good. The player controls are a bit small, but you can use them. Just a short single line of html code was needed to embed the player and video in the web page.
 
The main steps are.
      1. Install and/or upgrade the trial version of the Expression Media Encoder (if you haven't already)
      2. Use the Encoder to convert a story to a Silverlight package... adding an overlay logo or frame
      3. Upload the package to a website
      4. Embed the Silverlight package in a standard website page
The Silverlight process can use wmv video files made by Movie Maker, but not stories made by Photo Story 3.... different codecs are used to make and play them. That's why we have to take the story through the Expression Media Encoder.
 
Let's go through the steps in detail, after...
... a note...
 

 
Notes...
 

The forums of SimplyDVSimplyDV are back... having been closed from April 2nd to July 19th for a long holiday and face-lifting.

 

It's under the same owner Colin Barrett, and you may recognize a couple of the moderators (Graham Hughes and myself)...

 

As the forums at WindowsMovieMakers.net have almost all of today's forum traffic about Movie Maker, I look forward to helping reshape the parts of the forums that cover the broader sphere of Microsoft video and multimedia products.

 

Images can now be included in posts at SimplyDV... provided they not exceed 600x600 pixels in size, with a file size maximum of 60 Kb.

 
.... back to the main topic...
 

 
1. Setup the Expression Media Encoder
 
Stories are compressed with the Windows Media image codec and can't be used in Silverlight packages, which needs wmv files compressed with a Windows Media video codec. You could use Movie Maker to convert the story, but for this exercise I'll use the Expression Media Encoder.
 
Download...
Get both the Expression Media Encoder free trial (6.3 MB) and the update to it (1.3 MB).
 
Vista MenuThis fully functioning version will expire 30 days after installation unless you use the product key to extend it to 180 days. The key is provided with the Microsoft website info.
I downloaded fresh copies as I wrote this, and installed them on my Vista Home Basic laptop. Until now I'd only been using the Encoder on my XP laptop.
 

 
Install and Open...
 
The installation, followed by the update, went well using whatever the defaults were.
 
To open the Encoder use Start > All Programs > Microsoft Expression > Microsoft Expression Media Encoder... even easier in Vista is to just type a few letters such as 'enc' and select it from the short list of apps and files you'll see.
 
When prompted... enter the product key to extend the trial version from 30 days to 180. That'll get you well past the end of the year holidays, even if you procrastinate in putting your end of the year stories and movies online.
 
You're ready to make Silverlight packages.
 

 
2. Convert a Story to a Silverlight package...
 
I made a new story for the newsletter, a tweak of a Manarola, Italy story I'd previously made to use as the opening clip of one of my vacation movies.
 
I then dragged and dropped it from a file manager (Total Commander) into the Encoder. Drop it anyplace and it'll know where to go.
 
Here's a screenshot of my encoder session... ready to press the 'Encode' button that generates the Silverlight package. If you only wanted the video file, don't select a template. Choosing a template gets you the full package including the video wmv file. 
 
Encoder Session
 
My story was widescreen, but with the frame around it I didn't want it letterboxed. I opted for the 'Stretch' mode in the Video Profile settings. Some distortion is acceptable and preferred to the letterbox black bars being part of the video under the overlying frame.
 
Add OverlayAdd Overlay... icon or frame
 
FrameThe encoder calls it an 'Overlay Icon' (see the above picture), but I use it for any sized overlay, up to full-frame images. For this sample I used a picture frame with its center cutout and made transparent (using Paint.net). It's a png file I use as an overlay in Movie Maker.
 
Uncheck the 'Maintain Aspect Ratio' in the 'Overlay' settings area. That lets you stretch it to full frame size... or any other size and position over the story.
 
Select a Silverlight template and Encode...
 
Be sure to pick one of the choices with RC at the end of its name, or it won't work in the latest Release Candidate version of Silverlight. The template provides the style for the online player. If your list doesn't include those with RC, then you have the Encoder but not the update.
 
Leaving most of the default settings as is, I pressed the Encode button...
 
Files to UploadIt took about 10 minutes to create the package of files in my default folder...
 
c:\Users\John\Documents\Expression\Expression Media Encoder\Output\TOSHIBANOTEBOOK 8-26-2007 2.16.32 AM
 
You don't need to understand what all these files are... just know that the wmv is the video file made from the story, and the Default.html file is the website page to open... or call on from another page.
 

 
Preview the Package...
 
If you open the wmv file it'll play in Windows Media Player as usual.
 
Get SilverlightTo see it playing in a full-sized Silverlight package on a web page, open the Default.html file with your browser. Here's a link to my sample...
 
http://www.papajohn.org/Newsletters/165/Default.html
 
I got a Silverlight update message when first previewing... you'll probably also need an update, and your browser will need restarting after the update... quick and easy.
 
If you see only blackness in the player, check that the template you used included an RC extension. A template with the same name but without RC won't play in the latest Silverlight version. Re-render it with an appropriate template if needed. I know this because my first one was only blackness.
 

 
3. Upload the package...
 
To a website... any website. That's all you need for an online Silverlight experience... playable on Windows and Mac computers.
 
Beyond that, you may want to use someone else's video in an online Silverlight package, or embed your package in a website page with other things on it.
 

 
Downloaded files...
 
Where do the downloaded video files go? How do you get a copy?
 
The Silverlight player is using a wmv file, which is a file-download process. The file goes into a temporary Internet file folder.
XP - c:\Documents and Settings\PapaJohn\Local Settings\Temporary Internet Files\ContentIE5\(some random code)\(filename.wmv)
Vista - protection measures make access to the downloaded file a bit trickier... I couldn't browse to it or find it in a search when using Explorer or Total Commander
In Vista I got it by using the Internet Explorer 11 menu > Tools > Internet Options > General tab > Browsing history Settings button > View Files > sort by Type > change the sort order so it goes from Z to A > the Windows Media Audio/Video file type will be toward the top of the list > select the file and copy it to another more accessible folder.
 

 
4.  Embed the Silverlight Player in a website page...
 
Here's the total html code for my sample page... the Encoder did all the hard parts. All I needed to do to embed the Silverlight player with the story was to include an iframe in my website page.
 
My files are all in the same folder so I didn't have to tell it the path to the Default.html file.
 
Website page - html
You're seeing my typical html editing using Notepad... not pretty, just functional.
 

 
Conclusion and Closing... and What's Next?
 
You must have detected by now that I have a pretty positive bias toward the new Expression Media Encoder. This newsletter adds another positive test sample to my experiences with it. I'm careful to do lots of testing before heavily investing (time and effort, not necessarily money) in a new software package.
 
What I can still use is some feedback from Mac users... can you view my Silverlight packages? 
 
I have some experimenting ahead of me to learn more about how to best embed Silverlight players, sizing and positioning them on website pages.
 
We're taking off for a long holiday weekend of fun with one of our sons and his family... Have a great week and enjoy your summer fun and video work...
 
PapaJohn