Friday, December 1, 2006

How to make Windows Media Player Skins

What is a WMP skin?
WMP or Windows Media Player Skin is a way of customizing how the media player looks. Basically a wmp skin is a .wmz file found on "X:\Program Files\Windows Media Player\Skins\" folder (Replace X with your drive letter). Here we shall atempt to create a simple skin, from which you can create more advanced skins.


WMZ File Format
WMP Skins consists of a collection of files zipped together. So it means, the WMZ file on your computer is actually a .ZIP file. Inorder to decompress the file and view the content files, rename the .WMZ file to .ZIP and use a unzipping utility such as WinZIP or WinRAR to extract the containing files.
Take for example the Classic.wmz file, renaming and extracting gives us the following files:


classic.wms classic.js back_disabled.bmp back_down.bmp
back_hover.bmp back_up.bmp currentpos_background.bmp currentpos_thumb.bmp
divider.bmp ffw_disabled.bmp ffw_down.bmp ffw_hover.bmp
ffw_up.bmp forward_disabled.bmp forward_down.bmp forward_hover.bmp
forward_up.bmp icon_stereo.bmp icon_wmlogo.bmp intro_disabled.bmp
mute_down.bmp mute_hover.bmp mute_up.bmp next_disabled.bmp
next_down.bmp next_hover.bmp next_up.bmp pause_disabled.bmp
pause_down.bmp pause_hover.bmp pause_up.bmp play_disabled.bmp
play_down.bmp play_hover.bmp play_up.bmp prev_disabled.bmp
prev_down.bmp prev_hover.bmp prev_up.bmp rw_disabled.bmp
rw_down.bmp rw_hover.bmp rw_up.bmp stop_disabled.bmp
stop_down.bmp stop_hover.bmp stop_up.bmp toggle_down.bmp
toggle_hover.bmp toggle_up.bmp volume_background.bmp volume_thumb.bmp

The main file in this collection is the "Classic.wms" file. It is just an XML file and can be edited or created with any text editing software.


Can't see the WMZ extension?

Goto folder options and uncheck "Hide Extensions of known Type"

Click here to Download the sample skin file made in the following section.



Starting with your own skin ...

  • Make a folder in the ":\Program Files\Windows Media Player\Skins\", with a suitable name, as in my case "digitalpbk".
  • Next inside the folder make a new file, with the name and extension ".wms" , (digitalpbk.wms).
  • Paste the following code with suitable substitutions
    Show/Hide Code

    <theme
    title="DigitalPbk"
    author="Arun P"
    copyright="(c)2006 http://digitalpbk.blogspot.com . All rights reserved."
    version="1.0"
    >
    <view>
    </view>
    </theme>

  • Save the file.





    Now we have made a base for our skin. Check out if you have done it right, by taking the WMP Skin chooser. Look for the skin with the name you have given (digitalpbk), and click it. Depending on the version of WMP you are using you will see a white rectangle. The Picture here shows the skin on Windows Media Player 11.



  • Next we can start making the actual theme. Modify the view node to accomodate the following :
    Show/Hide Code

    <view id="mview"
    left="0" top="0" width="600" height="267"
    resizable="false"
    minWidth="600" minHeight="267"
    titlebar="false"
    title="Digitalpbk"
    scriptFile="digitalpbk.js"
    onload="init()"
    backgroundColor="none"
    >

    Make a new js file under the folder (Skins\digitalpbk\). For eg: digitalpbk.js. This will be our primary script file. As you can see it is very much similar to a HTML,

    id represents the name or identifier of the tag (node)

    left, top, width, and height give the dimensions

    minWidth and minHeight restricts the minimum possible size of the Skin (not used on resizable="false") just given for illustrative purpose.

    resizable="false" specifies that our skin cannot be resized,giving false makes it remains in the specified dimensions.

    titleBar="false" hides the title bar (The one on top with the Close, Maximize, And Minimize buttons).

    scriptFile represents our javascript file which handles the programming part of the skin.

    onload and onresize are events which are triggered when the window is loaded or resized respectively. Please note that the onresize event is not called in case the skin is not resizable.

    backgroundColor="none" specifies that the skin is transparent in areas where nothing is there. Alternatively you can specify a color to fill those areas, but transparency is cooler.

    At this point if you apply the skin you wont be able to see anything! In case you applied the skin and want to return to the full mode, press Ctrl + 1 to return to full mode.


  • Regions in the Main View are divided into various Sub Views. Now we are into the actual making of the user interface, the buttons, the sliders etc.
    First we place a base for the control view, with a suitable background. The following code comes under the View node. (<view></view>)

    <subview backgroundImage="main_bg.png" transparencyColor="#ff00ff" >
    </subview>

    You can generally use any background image of formats bmp,png,gif etc. I have used a png file with a car as base. When making the picture portions you want to be left transparent must be filled with a particular colour (#FF00FF commonly used). This colour is specified in the transparencyColor attribure.
    Now the product looks somewhat like this:



  • Next we place buttons for minimizing, closing and return to full mode. Let us place them somewhere in the bottom center. (Inside the subview node)
    Show/Hide Code

    <buttongroup id="mainfx" left="120" top="240"
    image="mfx_norm.gif" hoverImage="mfx_over.gif"
    downImage="mfx_over.gif" mappingImage="mfx_map.gif"
    transparencyColor="#ff00ff" >
    <buttonelement mappingColor="#0000ff" onClick="view.minimize()" upToolTip="Minmize" cursor="hand"/>
    <buttonelement mappingColor="#0080ff" onClick="view.returnToMediaCenter()" upToolTip="Return To Full Mode" cursor="hand"/>
    <buttonelement mappingColor="#00ffff" onClick="view.close()" upToolTip="Close" cursor="hand"/>
    </buttongroup>

    This code places three buttons with hover effects.

    image attribute specifies the normal image file

    hoverImage specified the hover image file

    mappingImage provides the map of the buttons so that the program knows to differentiate the three buttons.



    Normal Image :
    Hover Image :
    Mapping Image :

    The mapping color specified in the buttonelement tag is the colour given on the mapping image. Thus three buttons with hover effects are ready.
    The onclickevents does the functions specified and can be easily understood. cursor="hand" specifies the cursor type when over the buttons.

  • Similarly we will place buttons Play, Pause, Stop, Next Previous etc.
    Show/Hide Code

    <buttongroup id="pps" left="128" top="15" image="pps_norm.png"
    hoverImage="pps_over.png" downImage="pps_over.png" mappingImage="pps_map.png"
    transparencyColor="#ff00ff" >
    <buttonelement mappingColor="#8080FF" onClick="player.controls.stop()"
    upToolTip="Stop" cursor="hand"/>
    <buttonelement mappingColor="#8000FF" onClick="player.controls.pause()"
    upToolTip="Pause" cursor="hand"/>
    <buttonelement mappingColor="#0000FF" onClick="player.controls.play()"
    upToolTip="Play" cursor="hand"/>
    </buttongroup>
    Normal Image :
    Hover Image :
    Mapping Image :
  • Next we add a volume slider bar.
    Show/Hide Code

    <customSlider id="volume" left="520" top="70"
    min="0" max="100" borderSize="0" image="vol.png"
    positionImage="vol_pos.png" enabled="true"
    value="wmpprop:player.settings.volume"
    value_onchange="wmpprop:player.settings.volume = value;updateVolToolTip('volume');player.settings.mute = false;"
    cursor="hand"
    toolTip="Volume" onMouseUp="toolTip='Volume'" transparencyColor="#ff00ff" />
    NormalImage is a series of images for each position of the volume.

    positionImage is map of grayscale gradient representing a series of buttons indicating volume levels.

    Value indicates the volume value and initialized to the volume. When changed, the volume is updated. updateVolToolTip is a javascript function which updates the volume tooltip and its code is pasted in the "digitalpbk.js" which is as follows:

    function updateVolToolTip(id){
    vol = "";
    vol += player.settings.volume;
    eval(id + ".toolTip = vol" );
    }

    Normal Image :
    Position Image :

  • Next let us learn how to add dynamic and scrolling text.

  • Show/Hide Code

    <text id="time" left="250" top="210" width="100" fontSize="9" scrolling="false" fontSmoothing="true" foregroundColor="#888888"
    fontStyle="bold" justification="center" value="wmpprop:player.controls.currentPositionString" fontFace="arial narrow,arial,tahoma,verdana" />
    <text id="abt" left="190" top="210" width="75" fontSize="9" scrolling="true" scrollingAmount="2" scrollingDelay="10" fontSmoothing="true" foregroundColor="#888888"
    fontStyle="bold" justification="center" value="A Skin by ArunP, Click on the car's logo to visit http://digitalpbk.blogspot.com to find out how you too can make cool skins like this, easily." fontFace="arial narrow,arial,tahoma,verdana" />

    The first one displays the position in seconds of the media.
    The second one displays a scrolling text.
    Similarly you can add dynamic text that displays the Media Name, Bitrate, Volume, and other effects, and add your own custom text.
  • Finally adding a link in the skin to our site:

  • Show/Hide Code

    <button left="145" top="161" image="logo.png"
    hoverImage="logo_over.png" downImage="logo.png"
    onClick="jscript:player.launchURL('http://digitalpbk.blogspot.com/')"
    upToolTip="Visit blog" cursor="hand" />

  • Similarly you can add a custom slide bar for navigation, add buttons to provide for next and previous etc.


  • More tags and javascript functions and other exciting effects like playing sound can be achieved using skins. You can find out these tricks by just going through the source of various skin files. (The way to rip the .WMZ file has already been discussed above).


  • Finally inorder to package your skin, ZIP all the files using WinZIP/WinRAR or any other compressing utility. Note that you should zip all the files and NOT the folder. Rename the ZIP to WMZ, and your all set.





Click here to Download the skin file we just made (if you already haven't done so).



Winding up

Hope this section was interesting and helpful, any comments, suggestions or info? Please feel free to comment...

36 comments:

Unknown said...

Hi,
Recently I have been trying to develop my own WMP skin but have hit a problem. I want to display the artist, track name, track number and album fields as text elements, and whilst this is easy enough for the track name (defining the value as "wmpprop:player.currentMedia.name"), I cannot find similar expressions for the other fields.
After much research I feel that some javascript may be required, but am not sure how to go about this.
Any help you could provide would be much appreciated.
Thanks,
Dave - leftfootleashed@googlemail.com

Anonymous said...

Hi dave,

try the following :


wmpprop:
  player.currentMedia.getItemInfo('Author')
  player.currentMedia.getItemInfo('Copyright')
  player.currentMedia.getItemInfo('Title')
  player.currentMedia.getItemInfo('Album')
  player.currentMedia.getItemInfo('Band')

Tip : Whenever your at a problem, rip some skin and look how they have done it.

Unknown said...

Thanks a lot!
Dave

EYEsee said...

Hey, I stumbled across your page here regarding the wmp skin. I am in the process of making one now, but have a seek bar issue. If you email me, I will be more then happy to send you the file, and you can then see exactly what the problem is.

eyesee@bragginrites.com

Thanks

Anonymous said...

I'd like to do something like this but with my own controls on top of the WMP controls. One example would be to add a slider to control speed of playback.

any ideas?

Anonymous said...

Hi,
Thanks alot for the tutorial! but I still need a little help: I want the play to switch to pause, and I want the words to switch out... can you help?

Arun Prabhakar said...

I think with a little javascript you can do it.

Anonymous said...

hi , great tutorial. i have been trying to create a skin and had trouble with the volume slider. it is the same basic idea as the one on the car except mine is horizontal. i dont quite understand how the images work, but i made the one image which is all grayscale and another with the 15 different states of my volume control all in one image. first i tried with them all by eachother in a long horizontal panorama. this resulted in teh whole picture moving instead of "jumping" from one to the other. i tried with them all verticle, and this resulted in the slider visual being stuck in the lowest position.any help would be appreciated. thank you

Arun Prabhakar said...

Here is what you have to do:

Make a horizontal grayscale picture of the above picture. Then make all the volume sliders horizontal (not the whole picture) but each of the 15 different states horizontal and join them end to end so that the height remains the same and width increases.

Anonymous said...

i figured out the issue i had with the volume control. i had added a space between each image. a different issue i have is that the volume doesnt change with the exact position of the cursor. i think it is going off of the 12 step volume that you used. i do not know how to change it because i do not see any variables to change. i also though it may have to do with the grays that i used.

Arun Prabhakar said...

Yes, you must have as many consecutive pictures as there are gray scales in the mask picture. When you click on a corresponding region the gray scale of that region is computed and corresponding volume image segment is shown on the skin.

Unknown said...

Hi, Arun. I followed your tutorial down to the last detail, but still can't get this skin thing to work properly. Can you point out what I'm doing wrong? I saved it here: http://stuley.com/stuley.zip

Arun Prabhakar said...

hii stuley ...
the problem is here : around line 55


value="wmpprop:
player.currentMedia.getItemInfo('Author')
player.currentMedia.getItemInfo('Title')
player.currentMedia.getItemInfo('Album')
player.currentMedia.getItemInfo('Band')"



Try replacing that with this


value="wmpprop:player.currentMedia.getItemInfo('Author')+player.currentMedia.getItemInfo('Title')+ player.currentMedia.getItemInfo('Album')+ player.currentMedia.getItemInfo('Band')"

Harpreet said...

Hi,
I developed a skin with just the following buttons:-
Play; next; previous; stop; close;
minimize. Now I want to add more buttons such as Volume Control; Shuffle on/off; Repeat on/off; and running time display to my skin. But I dont know how to write a Java Script. So can I do that without this script. Or please elaborate the Script too. I am just waiting for the reply. Otherwise, good job you have done.
Thanks,
Harpreet - harpreet.money@gmail.com

Anonymous said...

Hi,
Same as dave, I have serious problems making the skin show artist in a text tag. I have taken your advice and disassembeled several skins and still can't figure out the problem. Mail me thebpycalledsimen (at) hotmail (dot) com

Anonymous said...

sorry about type-o
e-mail is: theboycalledsimen(at)hotmail(dot)com

Anonymous said...

Hullo...

I was able to get like the WMS file right, and I was able to get it toread off from the js file. But im having problems with starting the js file. You said to put a base for control view with a proper background, and then after the view nodes to put the subview code you gave. I'm just really confused here. I'm a complete newbie at javascript, this project of making my own WMP skin being my first attempt at it.
Could you help?

Anonymous said...

hey

i am making my own skin from this tutorial and so far i have made a background and the close/minimise buttons. i am now trying to put in play/pause/stop buttons and i have made it so that the buttons are visible and change when you hover over them, but nothing happens when you click on them. Do you have any ideas how to fix this?

Anonymous said...

How exactly do you make forward/back buttons?
I tried ripping some files but when I tried similar code, it did not work. So, Can you please tell me the code for forward/back buttons?

Anonymous said...

I still need help... >.<

Anonymous said...

Can you please tell me where I can find description of the different JavaScript objects related to this.

Unknown said...

Ok, I am trying to make my own skin according to your guide, but my problem is the 1st step; when I use your "copy this with suitable substitutions"I get the white screen like your example shows, but when I try to altercate any of the lines to show a diff. backgroundI don't get anything. HELP please. email is crazy04@mindless.com

Thank you.

Anonymous said...

very good tut DUDE!!
i have tried to create a skin by reading your tut it helps me a lot but the PROBLEM is that WHEN I CREATE THE "myskin.wmz" FILE IT GIVES ERROR saying My SKin is invalid plz sort me out

TheGeek said...

Hiya!

I've made about eight or nine WMP skins using this tutorial, and now I want to try adding a playlist. How would you do that?

And also, is there a way to position the playlist. The skin is a pic of an iPod, and I want to position it over where the screen is.

Anonymous said...

I have been trying to make a windows media Skin i have managed to create to interface and the close and min buttons put my play stop buttons will not come up on my skin could you help me!!! or could you email me with some help c.finney101@hotmail.co.uk

Anonymous said...

Hey Arun,
I tried to make a skin based on your tutorial, and everything is fine. However, my buttons, with the exception of minimize, restore, and close, are not appearing. It seems like they aren't showing up at all despite the fact that I tried copying you tags directly from the sample. Everything looks exacty the same as yours; I don't understand why I only changed file names, yet it isn't working.
swimmingfish101

Anonymous said...

Hey Arun,
Never Mind about my previous comment regarding the buttons; I've figured it out. Thanks for the blog!
swimming.fish.101

Anonymous said...

Hi. This is a great tutorial. I must be doing something wrong because whenever I try it, I get this error from the .js file:


Microsoft JScript compilation error: Line: 0 Column: 0
Syntax error
view id="mview"
^

Can you help me out a bit?

Anonymous said...

Cool skin. Thanks for explaining how to do this. However, with my crazy schedule, I don't have much time to do this myself. Would love someone to make a butterfly WMP skin. Show all 4 wings. Inside of wings could be where the visualizations show up. Body could be for volume. Other buttons could be in a thin bar around or underneath the butterfly. It would be on the small side, but not too small. Think this would be so cool, and a lot of girls would love it.

Anonymous said...

How do you get the annoyin purple outline out of the skin. I'm making one now and im getting the purple thats supposed to be transperent around all my buttons.

Anonymous said...

Hello Arun! I really like this tutorial, but I have a problem; When I try out my theme, It comes up with "Microsoft JScript compliation error: Line: 0 Column: 0|Syntax error|view|^"
Any reason why?
BTW, I'm using WMP9.
This is what the "mini.js" looks like (Changing the }'s to > & {'s to <):
{view}
{subview backgroundImage="mini.bmp" transparencyColor="#ffffff"}
{/subview}
{/view}

backstabber said...

Hey arun i have a problem.
I type the name and all that but then it says in skin chooser

Title: DLX
Author:
Copyright:

I know why it says DLX by the way

Anonymous said...

i cant past the code into my .wms folder?

Anonymous said...

can you make a media player skin for me... Sony ericsson K550i white skin theme.... thank you so much..
I dont know how to make one...

Unknown said...

Microsoft JScript compilation error: Line: 0 Column: 0
Syntax error
<view id="mview"
^
i need help with this please

Rachat de credit said...
This comment has been removed by a blog administrator.