Great Effects, Shame About the Script
December 11, 2000
Windows Media Player 7.0
Creating a Skin
Content Is Everything
Putting It All Together
The holiday movie season has started in earnest, and I can already see the reviews bemoaning the fact that more was spent on the special effects than on the scripts—and how the movies suck as a result. Web sites that give out tidbits about the films (pictures and so forth) generate much of the excitement about the movies. Increasingly, having a great trailer that streams across the Internet is a vital part of the experience. The streaming-media experience is only going to get better with increased bandwidth, and with the release of Windows Media 7.0. In this article, I'll cover some of the exciting new capabilities that Windows Media brings to the scripting world. Maybe I'll even prove that investing in the script can actually improve the special effects!
Windows Media Player 7.0
The release of Windows Media Player 7.0 really takes the player from a simple application to a full-blown media center. You can now play, record, and manage digital media from the same application. Best of all, the player exposes an interface that can be scripted, so you can tailor it to your needs. The scripting abilities allow developers to build and script the media player into their applications' user interfaces by using the Windows Media control. You can also change the user interface of the Windows Media Player via the new skins capability. To illustrate how you can enhance your viewing experience with a great script, I've created a few skins for the new player—and I've tried to build in as much script as I can.
Creating a Skin
The Windows Media skins are made up of XML and script. The XML defines the user interface elements that the player reads and displays (much in the same way HTML does in Internet Explorer). The script embedded in the XML allows you to manipulate an object model that represents the user interface (again, similar to the Document Object Model in Internet Explorer). To create my "Script Happens" skin, I used good old Notepad, Microsoft PhotoDraw 2000 2.0, and Windows Media Player 7.0.
The skin used in this example is really quite simple. It has buttons for Play and Stop, a progress bar, and a video display control. When you click Play, the Windows Media Player loads up the latest trailer of "Vertical Limit" and plays it. We seem to have a few too many aspiring mountaineers in the script team, so they're excited to show me what they do every weekend, clinging to the side of a mountain somewhere.
Content Is Everything
To give the player a suitably festive look, I created a simple backdrop that features some appropriate characters and some suitable (and reasonably cheerful) wallpaper. As you can see, my graphic design skills are somewhat lacking—which is why I work in the script group. We don't have any user interfaces to design!
Figure 1. Original background for a Windows Media Player skin
The background is just a bitmap I created in PhotoDraw using stock images from the Web (the wallpaper, the main picture, and the bell). I added the title and bomb using the built-in features of PhotoDraw. I'm far from being an expert, or even a power user of graphics programs, but I really liked PhotoDraw's interface, which seemed to be aimed at novices. In addition to a background image, I needed to create two other images: a mapping image to define the buttons and the image that's used when the mouse hovers over a button.
The mapping image is essentially the same as the original background, but it defines hot spots in different colors for each button. To keep things simple, I kept the buttons to a minimum and just used green and red.
Figure 2. Mapping image with buttons for Windows Media Player skin
The hover file is a slight variation on the original background, and the media player uses it when the user hovers over the hot spots defined in the mapping image. To make the images' functions a bit more obvious to users, I added some text that uses the wonderful designer text feature in PhotoDraw.
Figure 3. The finished skin, with hot spots in the mapping image
You'll notice that the original bitmaps all have a blue outline. The media player uses this as a clipping color, so everything in blue will be transparent when the skin runs. I figured that if Hollywood could have blue screen special effects, why not the Scripting Clinic?
Putting It All Together
Once your graphics are ready, you can start defining your skin in XML. For this article, I've tried to keep the skin as simple as possible to make it easier to see what is going on. The first part of putting the skin together is to set up the main view for the skin by using the <VIEW> element. The key is the backgroundImage attribute, which contains the file used when the skin loads—in this case, main.bmp. I designed this skin to have its own window outline, so the <VIEW> element also has the clippingColor and titlebar attributes set. The bitmap uses blue as the clipping color, so the clippingColor attribute is set to the hexadecimal value "#0000FF".
<THEME> <VIEW clippingColor = "#0000FF" backgroundImage = "main.bmp" titleBar = "false">
Once the background image is completed, the video display control and progress bar need to be added to the skin. For this you use the <VIDEO> and <SLIDESEEKER> elements. I tried to get the video window to display over the holly picture. To do this, I set the top, left, height, and width attributes on the video element to match those of the main picture. In addition, I chose to make the video stretch to fit the video control while maintaining the aspect ratio of the media. The resulting XML is:
<VIDEO top = "76" left = "60" width = "300" height = "200" stretchToFit="true" maintainAspectRatio="true"> </VIDEO>
Adding a progress bar to the skin is simple with the <SLIDESEEKER> element. The left and top attributes are set to position the progress bar above the video control; the media player updates the progress bar automatically:
<SLIDESEEKER id = "myseekbar" tooltip = "current position" height = "10" width = "100" top = "62" left = "160" backgroundColor = "red" foregroundColor = "blue" thumbImage = "thumb.bmp" />
To complete the skin, I needed to add the buttons to play and stop the media. The skin XML schema already has definitions for stop and play buttons, so I used those—but you could easily create your own buttons as well. The skin has one <BUTTONGROUP> element, with the key attributes of mappingImage and hoverImage. The mappingImage attribute tells Windows Media Player where the buttons are on the skin, and the hoverImage attribute is used when the user hovers a cursor over the button.
<BUTTONGROUP mappingImage = "map.bmp" hoverImage = "mainhvr.bmp">
The play button is defined by using the standard <PLAYELEMENT> element. (Strange naming, don't you think?) When you set the mapping color attribute, the media player maps the play button to any color that matches the mapping color in the image specified in mappingImage attribute. I set the color to green (#00FF00) on the map. When you click on the bell, a small piece of JScript® tells the movie player to load the correct URL for the "Vertical Limit" trailer.
<PLAYELEMENT mappingColor = "#00FF00" onClick = "JScript: player.URL='http://www.videopipeline.net/sponsor/wms.asp? PublishedId=307873&vpisrcsite=101&videokbrate=56';" />
The stop button is implemented in the same way, but with the <STOPELEMENT> element. When the user clicks on the bomb, the video stops. There's no need for script here, because <STOPELEMENT> automatically tells the video player to stop.
<STOPELEMENT mappingColor = "#FF0000" onClick = "JScript view.close(); " /> </BUTTONGROUP>
The Scripting Holidays skin, while not the most feature rich at this stage, gives you a start on what you can achieve in the new Windows Media Player with a bit of script and XML. I recommend you take a look at the Windows Media Developer Center, where you can access full documentation on writing skins and a script reference for all the elements in the skins XML file format.
Andrew Clinick is a program manager in the Microsoft Script Technology group, so chances are, if there's script involved, he's probably had something to do with it. He spends most of his spare time trying to get decent rugby coverage on U.S. television and explaining cricket to his American colleagues.