Pixel2Life

Hi,

After the Ultimate Slicing Guide by Faken, here's the Windows Media Player Skinning one by NGPixel. This tutorial is a complete guide to make your own Windows Media Player skin with advanced features. Since this tutorial is huge, I've splitted it in different chapters and pages, each on a specific feature. This guide can be used as a walkthrough from start to finish or as a reference for a specific feature.

All over the tutorial, I use a skin example that you can download (with all the files that you need) here:

(.zip)

---

- 1 - Introduction to WMP Skinning
- 2 - Before Making the Design
- 3 - Making the Design
- 4 - Making the Buttons Mask
- 5 - Introduction to the WMP XML
- 6 - Writing the XML - Skin Informations
- 7 - Writing the XML - Basic Elements
- 8 - Writing the XML - Buttons
- 9 - Moving Panels
- 10 - Moving Elements
- 11 - Building an Equalizer
- 12 - Even more Stuff!
- 13 - Making the Final Package
- 14 - Distribution
- 15 - Using Round Skins
- 16 - Notes & Legal Stuff

---

Let's start!

Chapter 1 - Introduction to WMP Skinning

Windows Media Player lets the user choose from a variety of standard skins, each one providing an additional visual experience that enhances listening and viewing pleasure. Windows Media Player comes with several skins to choose from, but it is relatively easy to create and distribute custom skins.

When you first a download a skin, you download one main file that contains all the informations (scripts, codes, graphics, actions, etc.) that are used to display the complete skin. Maybe you ever tried to open one of these files with notepad, not much success you might had. WMP Skin files (.wmz) are actually zipped files.

You can try to open one with WinZip (change the extension to .zip and extract the contents). You will then find all the components of the skin such as images, scripts, JS files, etc.

Skins are made of 3 main parts (one is optional). Images files, XML file and JS file (javascript). The images files are what you see: the background, the buttons, the EQ panels, etc. The XML file contains all the properties of each object in the skin. All the sizes, positions, actions, properties of each object including the panels and visualizations window are listed in that XML file. Finally, there's the optional JS file which contains all the javascripts you need in your skin. For exemple, to animate a panel that slide to the right, you need to insert some codes in your JS file just like you would do for an HTML page.

The XML file and the JS file can be opened with any text editor. For faster and easier looking, use Macromedia Dreamweaver. You will get highlighted code and colored tags.