A New Skin for Windows Media Player
Published: September 17, 2001
By Galan Bridgman, Windows XP Expert Zone Community Columnist
Editor's Note: Past articles by members of the online community are archived for your use. The information may become outdated as technology changes. For the most current information, please search the Web site or post a question in the newsgroups.
One hundred and twenty six—that's the number of framed pictures of people in our house. My wife is often complimented by guests for her decorating skills and for how warm our house feels. I know they are talking in large part about the level of personalization our house exhibits. I must admit, I like having these pictures everywhere.
You've probably noticed how each new version of Windows gets progressively easier to personalize. It started years ago with wallpaper and screen savers, progressed to desktop elements, then to themes, and now, in Windows XP, even the logon screen contains a picture for each user account that you can customize with any picture you want.
My logon screen, just in case Bill stops by.
There's another part of Windows XP that can be customized and that's the Windows Media Player. Starting with version 7.0, Windows Media Player supports a skin to customize its appearance. A skin is a program that controls the appearance of Windows Media Player and includes some of the basic interface elements of the Media Player. There are a lot of great skins out there, and I encourage you to check them out with the links provided at the end of this column. However, none of the ones that I found contained quite the degree of personalization I thought would be fun to add to Windows XP. So I decided to make a skin that could be downloaded and easily customized by you, rather than telling you how to make your own skin.
A Brief Primer on Skins
There are three basic elements to a skin: artwork, layout, and behavior. The artwork is laid out by an XML skin definitions file describing all the positions and sizes of the graphics, and the pieces are glued together and made functional by a file in JScript that defines the behavior of each element of the skin. The files that make up the skin are then placed in a compressed package in Zip format to facilitate the transport and exchange of skins. Then the extension is set to .wmz so the Windows Media Player will recognize the package as a skin when you want to install it.
When starting to develop a custom skin, I found that a good graphic artist would have no problem with the artwork, a good Web designer would have no problem with the layout, and a good programmer would have no problem with the behavior. But what if you don't possess the combined skills of three people?
 | ...I decided to make a skin you could download and easily customize in a few minutes using the tools provided by Windows XP. |  | |
| |
|
That's why I decided to make a skin you could download and easily customize in a few minutes using the tools provided by Windows XP. Just like the picture frames we place on our real desks, I wanted a Media Player skin I could place on my computer desktop that looked like a picture frame with my pictures in it. Or yours, as the case may be.
Getting Your Photos Ready
All you need to customize your PictureFrame skin are two images 128 pixels wide by 140 pixels high. They need to be in a standard 24–bit .bmp format. You'll probably need to create these image files. Depending on how skilled you are at working in digital media formats, this may be a trivial task, or it could be a challenging one. If it's the former, I probably don't need to say another word. If it's the latter, refer to the other Expert Zone columns for tips on using the Scanners and Camera Wizard if you have a digital camera, and learn to use a simple graphics–editing program like Paint, which is built into Windows XP. Or you may ask a more computer–literate friend to make them for you!
If you already have pictures you can use, but they are in another format such as .jpg, you'll need to use an editing program to convert them to .bmp. In addition, you'll need to scale the images to the required 128x140 pixels, taking care not to stretch them so that the image is noticeably distorted. You'll get a more pleasing result if you crop an existing picture to something approximating the target dimensions and then resize it to the exact size. Some quick math will tell you that the ideal dimensions in this case will be something that is 1.09375 times taller than wide (140 divided by 128).
If the pictures you want to use are already smaller than 128x140 and you don't have an original image to rescale, you might consider centering your pictures inside a black background to get to the required size instead of stretching them. This makes your pictures look like they are professionally mounted inside a matte, and avoids the pixelation that would occur from resizing them larger than the original. (With many editing applications this can be accomplished easily by adjusting the canvas size.)
After you have your two pictures ready, name them left.bmp and right.bmp. You're now ready to make a skin!
Modifying the PictureFrame Skin
The next step is to get the skin from the Expert Zone Web site. To do this, click the link in the sidebar to this column. The original file is in Zip format to make it easier for you to download and start working with. When prompted, save the file to your disk. Using Windows Explorer, navigate to the folder that contains the PictureFrame.zip file. Depending on whether you have a program like WinZip installed, this next step will differ slightly. If you don't, double–click the file and Windows Explorer will open the Zip file into a folder. This is a new feature of Windows XP. If you do have WinZip installed, right–click the file and then click Explore. This will also open the file in a folder. After you are in the folder view, drag and drop your two picture files into the folder. Answer Yes to overwrite the existing files. Now navigate out of the Zip file (using either the Back or Up arrows on the Windows Explorer toolbar) to where you can see the file again.
Now you need to rename the extension of the file to .wmz, the name Media Player recognizes as a skin. (Note: If you don't see the .zip extension you need to turn on the display of extensions. From the Windows Explorer menu bar, click Tools, then Folder Options, then click the View tab, and then clear the Hide extensions for known file types check box. You can change this setting back after you the rename the file name extension, if you like your folders displayed without extensions.) Select the file and click Rename this file in the task bar, and change the zip extension to .wmz.
You're all set! Now double–click the file and a dialog box pops up that displays the progress. When it's finished, it will have a View Now button. Click it and Windows Media Player opens up to your new skin, personalized with your own pictures.
The PictureFrame skin.
Using the New Skin
The frame in the middle is where video is played and all the controls are placed. I tried to put the most commonly used features into this skin, but whenever it doesn't have the function you want to perform, just click the Return to full mode button. The Media Player displays in full mode where you can perform actions, and then pop back again into skin mode. Hovering over any element of the skin will display a ToolTip describing what the element does.
Keep the .wmz file you created handy, because you'll need it again when you want to update your pictures. To do this, rename your .wmz file back to .zip again, modify it as you did before, rename it as .wmz and double–click to install the updated skin. Media Player will ask if you want to overwrite the existing skin.
I hope you enjoy using this skin, and by all means, if you are familiar with all the tasks outlined above, try making your own skin. I've provided links for skin creation resources below too.
Galan Bridgman is a developer, architect, and enthusiast for digital media technologies. He co-developed QuickTime for Windows for Apple Computer. At Starlight Networks he developed innovative client and backend technologies using ActiveMovie® and NetShow® Server, the precursors to Windows Media Technology. He is a full-time consultant, and is currently developing a next-generation, fully-automated radio station using Microsoft Windows Media 9 Series technologies. After hours he enjoys showing others how to make the most of Microsoft's latest Windows Media applications. Check Galan's Web site for more information about him.
