It is possible to create a personalised skin for Media Player for the Smartphone, and redesign the graphics and buttons to your own preferences.
Although a full guide to this is on the Microsoft website, it is written to cover various different mobile devices running Microsoft operating systems (ie. including those using onscreen buttons for mouse/stylus functionality), and isn’t really Smartphone-specific. (It also neglects to mention that if you follow the instructions it details, your custom skin won’t survive a reset on a Smartphone!)
There are 3 main steps to creating a skin for Media Player;
-Designing the graphics for the skin
-Creating a .SKN file
-Installing the skin onto the phone (Note: your phone will need to be application-unlocked in order to do this step properly- you can install a skin on an application-locked phone, but it will be lost when you turn the phone off.)
This guide is intended to show you the quickest, simplest way of creating a skin, and is based around modifying the default skin rather than creating one from scratch.
The graphical elements of the skin will be made up of 2 or more image files. The first is the wmplayer.gif file- this is the basic background for the skin.
When one of the buttons is pressed on the phone, the skin can be designed so that something happens to the graphics to correspond with this. The way this works is simply by overlaying a section of the “pushed” image over a section of the background file when the button is pushed. These graphics to be overlaid are a part of the pushed.gif and disabled.gif files.
I’m going to start off with this image of a Marshall guitar amplifier I found on the internet, which I’m going to build this skin around; it’s been cropped to 176 pixels wide by 180 pixels high, which is the available screen size for Media Player (note- this is slightly smaller than a normal Homescreen background to make room for the iconbar information at the top.) All I’ve done is found a suitable photo of an amplifier on the internet, cut it to size, drawn arrows on what was originally a plug socket (which I’m going to use for the buttons to skip tracks), and emphasised one of the dials, which I’m going to use for the volume controls.
The button images I’m going to use are the buttons I’ve drawn in to skip the track forwards and backwards (coloured in red), the “dial” to turn the volume up and down moving to the “2 o’clock” and “10 o’clock” positions, and to play/pause I’m going to change the colour of the power switch on the right to a bright red and a duller red.
To make the images, I’ve simply copied the image into Paint, modified the relevant section, noted the coordinates of the modified sections (you need these when making the SKN file- the coordinates of the cursor are displayed at the bottom of the screen when using Paint) and put them all into a single new GIF image file called “pushed.gif”;
For the “disabled” images, I’ve just used the “skip” switches coloured grey, and the power switch in it’s original black colour in a file called “disabled.gif;
The .SKN file is a text file which determines what appears where on the screen.
This is a breakdown of how I have modified the default skin to create my customised Marshall skin. (The default SKN file should be on your phone in the Windows directory, under the name wmplayer.skn, and can be opened using a standard text editor such as Notepad.)
| // | ‹Name› | ‹File name› | ‹X,Y› |
| // | ------ | ----------- | ----- |
| Background | wmplayer.gif | 0,0 | |
| Disabled | disabled.gif | 0,0 | |
| Pushed | pushed.gif | 0,0 | |
| Region | wmplayer.gif | 0,0 | |
| Super | wmplayer.gif | 0,0 |
This sets what the various image files are called, and where the images to be used are in the file (this is so more than one image element for the skin can be saved in one GIF; ie- 0,0 is the first pixel along, first pixel down from the top left corner.)
To keep things simple when it comes to installing my new skin, I’m going to use the same file names.
This sets where video images will be played- (ie. 8 pixels along and 30 pixels down will be the top left corner of the video part of the screen, 160 pixels wide by 120 pixels high will be the size.) I’m going to set mine to take up as much of the screen as possible, leaving the controls along the top and a space at the bottom (for text- what track is playing etc.), so the coordinates for my skin will read; 0,32,176,130 (note- no spaces between numbers or commas.)
| // | ‹Function› | ‹Type› | ‹Location› | ‹Push Image Src› | ‹Dis Image Src› | ‹Hit R,G,B› | ‹Norm 2 Image Src› | ‹Push 2 Image Src› | |
| // | ---------- | ------ | ------------ | ---------------- | --------------- | ----------- | ------------------ | ------------------ | |
| VolumeUp | Toggle | 70,33,39,36 | Pushed @ 76,1 | Background @ 70,33 | 0, 0, 0 | ||||
| Prev | Push | 31,70,38,39 | Pushed @ 0,0 | Background @ 31,70 | 0, 0, 0 | ||||
| Next | Push | 111,70,37,39 | Pushed @ 39,0 | Background @ 111,70 | 0, 0, 0 | ||||
| PlayPause | 2Push | 70,70,39,39 | Pushed @ 154,0 | Disabled @ 39,0 | 0, 0, 0 | Disabled @ 0,0 | Pushed @ 193,0 | ||
| VolumeDown | Toggle | 70,110,39,37 | Pushed @ 115,1 | Background @ 70,110 | 0, 0, 0 |
(Note: This section should ideally be viewed on a reasonable sized screen to stop the text from wrapping and for the code to be clear.)
This sets where on the screen the “buttons” for each function (play/pause, skip forward, skip back, volume up&down) appear, and where on the “pushed” image file (specified above) the element for the pushed buttons are.
For my skin, the “VolumeUp” and “VolumeDown” are in the same place, so their location will be identical- 27,15, 18, 18. However, the button images to be used are different, so they will have different coordinates within the “pushed” graphic (32,0 and 51,0 respectively- the size of the “pushed” image is already set in the “location”) For the “disabled” images, I’m going to keep the volume set in neutral, so the coordinates are identical to the location coordinates- effectively overlaying the image on top of itself.
Next is the “Prev” and “Next” buttons, which work in exactly the same way, except they have different locations to one another on the background image. The only difference is that I want them to be coloured grey when the buttons are disabled (eg. when there is no track to skip to), so their disabled image source will change to “Disabled @ 0,0” and “Disabled @ 16,0”
Finally is the “PlayPause” button. Unlike the others, it’s type is “2push”, which means that pushing it a second time will have a different effect to the first- while the first push will play, the second will pause (a third push will play again etc.) The “pushed” image is what I want to display when the music/video is playing, and the “Push 2” image is what I want it to display when the music/video is paused (a dim red switch.) The “disabled” images are of the button in black, indicating that nothing can be played.
(Note that the “hit R,G,B” section related to using Region files, which are used when there is a button to click with a mouse or stylus, and are not used in Smartphone skins.)
| // | ‹Item› | ‹Location› | ‹Align› | ‹Font› | ‹Color› |
| // | ------ | ---------- | ------- | ------ | ------- |
| On | 60,151,95,18 | Left Nina,10,B | 255,255,255 |
This sets where the status text (ie. “playing”, “stopped” etc.) appears on the screen. The Location coordinates work in the same way as for the images- 4 numbers defining the x and 7 coordinates of the top right corner of where the text appears, and the width and height of the region. The alignment is self-explanatory (left, right or center), the Font defines the font name, size and weight (B= bold, N= normal), and the colour is the RGB values of the text colour (as in Homescreen colours, these can be from 0 to 255, except this uses ordinary decimal numbers instead of hexadecimal.)
To save space and keep as much of the screen empty for video playback, I’ve deleted this from my skin.
| // | ‹Item› | ‹Location› | ‹Align› | ‹Font› | ‹Color› |
| // | ------ | ---------- | ------- | ------ | ------- |
| Time | 5,151,51,18 | Right | Nina,10,B | 255,255,255 |
This sets where the elapsed time of whatever is playing will appear on the screen, and works in much the same way as the Status section.
I’ve shifted this to the right hand side of the screen, right at the bottom, so my location coordinates are 0,162,40,18
| // | ‹Location› | ‹Font› | ‹Color› | ‹Text item combinations› |
| // | ---------- | ------ | ------- | ------------------------ |
| 12,9,150,18 | Nina,10,B | 255,255,255 | Title+Author+Bitrate,Title+Bitrate,Filename+Bitrate |
This sets where the Marquis- the scrolling text with the track name, artist etc. appears on the screen, and what information it contains.
It’s worth noting that when the text scrolls, the background has a tendancy to move with it, so it’s well worth making sure that the graphics behind the marquee is a solid block of colour. (For my Marshall skin, the background is virtually solidly black, so this isn’t an issue.)
I’ve lined this up next to the “Time” display, with the coordinates 42,162,134,18
This section is empty, but usually deals with the Trackbars settings- trackbars are not usually used on Smartphone skins.
Simply replace the default skin files in the Windows directory (wmplayer.skn, wmplayer.gif and pushed.gif) with your customised files. Be warned- when you next switch your phone off and on, these will revert to the default files
Copy your customised files to a suitable location in the IPSM directory (eg. create a folder called “MediaPlayer” and put them in there.)
Run a registry editor (eg. PHM Registry Editor- available from http://www.PHM.lu) and go to the following registry entry;
HKEY_LOCAL_MACHINE / Software / Microsoft / Windows Media Player 8 / Parameters
and change the "SkinDir" value to the folder where you put your skin files (eg. “\IPSM\MediaPlayer”.) If you have kept the filenames the same, then there is no need to edit the registry any further- next time you restart Media Player, it will use your new custom skin!
