JANUARY TUTOR ■

SKINNING WINDOWS

skinned
windows
Why settle for the dull default of Windows Media Player when you can create your own
funky look? Re-skin the ultra-conservative player with any type of style that you want.
In this month’s PC Tutor we tell you how you can begin to go about it – and then leave
you to your imagination...

ersion 7 of Microsoft Windows Windows Media Player\Skins). Every skin behaviour of the skin using very simple

V Media Player improves on earli-

er versions in a number of areas,
but the most intriguing new fea-
contains a Skin Definition File – a text file
with the extension WMS; most con-
tain a number of art files (BMP,
XML code. With this handful of rules, you’ll
know enough XML to start build-
ing skins:
ture is certainly its support for skins – com- GIF, JPG or PNG files) as well. • XML elements are defined
plete replacements for the program’s user A skin may also contain one using tags, similar to HTML
interface. You don’t need a degree in rock- or more JScript files. tags.
et science to create a skin, just a little The skin files for • Every open tag
patience and the ability to follow instruc- t hi s a r t ic l e a r e (such as <theme>)
tions. In this article, we’ll build a skin step available at www must have a close
by step. Once you know how, you can . p c m a g . c o m / s o l u- tag (</theme>).
devise a skin to reflect your personal inter- tions. Click the Solu- • Elements defined
ests or make a branded skin as a giveaway tions archive link between the open
for your media related Web site. next to the title and and close tags are
Start by downloading WMP 7 from www download the contained in the outer
. m i c rosoft.com/windowsmedia if you Skins.zip file. Place the element.
haven’t already done so. The player comes WMZ files in your Skins • An element that con-
with several sample skins, and you can folder so you can try them as tains no others can use an
download more from the same site. we go. open/close tag (for example
<player/>).
GETTING UNDER THE SKIN XML PRE-PRIMER • Tags are case sensitive, so
Each skin is defined by a WMZ file, which Microsoft has committed to ever stick with all caps or all lower-
is nothing but a ZIP archive, and installing increasing support for XML (eXten- case.
a skin is as simple as copying it to the sible Markup Language), and the Skin • Attributes modify elements and are
Skins folder (usually C:\Program Files\ Definition File defines the appearance and defined by name=”value” strings in the

90 January 2001 www.DITnet.co.ae ■ www.PCmag-mideast.com


open tag.
A bare minimum skin consists of a theme
element containing a view element. Adding
a couple of attributes to the theme yields
the WMS file for the PCMAG_A skin:
<!— A minimal skin —>
<theme
title=”pcmag A”
author=”Neil J.Rubenking”>
<view>
</view>
</theme>
Launch WMP 7, highlight the PCMAG_A
skin in the Skin Chooser, then click Apply
Skin to see a fully functional (but boring)
skin that looks like a plain window.
The skin’s shape is defined using a back-
ground image, with one particular colour
treated as transparent. Areas drawn with
the transparent colour are omitted from
the skin. Start with a 640x480-pixel image
and consider reserving an area about
240x180 pixels for video and special
effects. The image in the PCMAG_B skin
is a simple, rounded rectangle with a
r ound ed r ectangular cu tout and i t’s
installed using the following view ele-
ment’s attributes:
<view
backgroundColor=”none”
backgroundImage=”pcmag.bmp”
transparencyColor=”#00FF00”
titleBar=”false”
resizeable=”false”>
The transparency colour is a hexadeci-
mal number, with two digits apiece for
red, green and blue. In this case, the num-
ber re p resents bright green. Load the
PCMAG_B skin to see the result. It does-
n’t do anything, but you can right click for
menu options and drag the skin around the
desktop.
BUTTONING UP
Every skin needs some or all of the stan-
dard buttons (Rewind, Previous Item, Play,
Next Item, Fast Forward, Stop and Pause).
The buttons need not be rectangular; their
appearance is defined by five images. Four
are pictures of the button panel in differ-
ent states and the fifth maps regions of
the button image to button elements.
First create a picture of the seven buttons
and save it as b_image.bmp. Now modify
the image so it represents disabled but-
tons, perhaps by changing the colours to
grey or drawing big red Xs through them,
and save that as b_disabled.bmp. Load the
original image and modify it to represent
the buttons when the mouse pointer is
www.DITnet.co.ae ■ www.PCmag-mideast.com
■ JANUARY TUTOR
SKINNING WINDOWS
Figure 1: Start a new skin by creating seven button
images and a mapping image.
Figure 3: A visualization subview animates images
based on the music you’re playing.
Figure 2: Then add a progress bar and track title Figure 4: Finally, you can add slide-out panels for
information. playlist and equaliser controls.
hovering over them, perhaps by bright- <playelement mappingColor=”#808000”/>
ening the colours or adding a glow, then <nextelement mappingColor=”#00FFFF”/>
save it as b_hover.bmp. Finally, take the <ffwdelement mapping Color=”#FF00FF”/>
hover image, offset its contents to the right <stopelement mappingColor=”#800000”/>
and down by one or two pixels and save < p a u s e
e l e m e nmt a p p i n Cgo l o r =
it as b_down.bmp. Of course you can use ”#008000”/>
other filenames if you prefer. </buttongroup>
The mapping image consists of blobs of
solid colour that define the areas occu- The left and top attributes locate the but-
pied by button elements. The colour blobs tongroup within the view. Setting cursor to
should be just big enough to cover the hand makes the cursor change into a hand
corresponding button in all of the other when over a button. Each standard button
images. Because the colour blobs aren’t vis- has a pre-defined element type; all that’s
ible, you’ll normally use simple primary needed is a mappingColor that matches
colours. Figure 1 shows the main and map- the button’s colour within the mapping
ping images used in our sample skins. To image. The sample skin PCMAG_C has
enable the group of buttons, insert a but- seven fully functional buttons.
tongroup element within the view element
like this: LISTENING ATTRIBUTES
Attribute values don’t have to be static
<buttongroup things like co-ordinates and bitmap names.
left=”152” top=”20” You can create dynamic attributes that
image=”b_image.bmp” automatically change to match values with-
disabledImage=”b_disabl.bmp” in the WMP itself. These are called listen-
hoverImage=”b_hover.bmp” ing attributes, and they require the wmp-
downImage=”b_down.bmp” prop keyword. Inserting the following pro-
mappingImage=”b_map.bmp” g r e ss b a r e l e m e n t j us t af te r t h e
cursor=”hand”> </buttongroup> close tag adds a bar that
<rewelement mappingColor=”#FF0000”/>tracks how much of the current clip has
<prevelement mapping Color=”#FFFF00”/> played.
January 2001 91
JANUARY TUTOR ■
<progressbar
id=”myprogress”
l e f t = ” 2 1 4 ” t o p = ” 1 3 7 ” w i d t hfontSize=”11”
height=”10”
thumbImage=”thumb.bmp”
transparencyColor=”#00FF00”
bordersize=”5”
tooltip=”Current position”
backgroundColor=”purple”
foregroundcolor=”maroon”
cursor=”hand”
min=”0”
max=”wmpprop:player.currentMedia.dura
tion”
value=”wmpprop:player.Controls.current
Position”
onmouseup=”player.controls.currentPo-
sition=myprogress.value;”/>
The id attribute lets you refer-
ence this element by name.
ThumbImage defines the mov-
ing part of the progress bar – in
this case, a 10x10 red circle.
The bordersize attribute is set to
half the thumb’s width, other-
wise the thumb would be cut off
at the start and end. Other attribut-
es define the position, colour, cursor
and ToolTip for the progress bar.
The max attribute specifies the
range of the progress bar, and it’s tied
to the duration of the current media
clip using the wmpprop keyword.
The value attribute specifies the
thumb’s position, which follows
the play position within the cur-
rent clip. Without any actual pro-
g r a mm in g , w e n o w h av e a
p ro g ress bar that tracks WMP 7’s
progress!
The onmouseup attribute is something
new: an event type attribute. This event
occurs when the mouse is clicked on the
element, possibly dragged, and then
released. At that time, the instruction in the
attribute’s value is executed. In this case, it
sets WMP 7’s current position to the thumb’s
position. This means the user can grab the
thumb with the mouse and skip ahead or
back within the current media item.
The following lines, inserted after the pro-
gressbar element, define a simple static text
element and a text element whose value
tracks the name of the current clip.
<text
left=”194” top=”334”
foregroundColor=”white”
fontSize=”8”
fontFace=”Arial”
value=”Now playing:”
justification=”right”/>
<text
92 January 2001
SKINNING WINDOWS
left=”194” top=”346” width=”240”
foregroundColor=”white”
=”216”
fontFace=”Arial”
scrolling=”true”
value=”wmpprop:player.currentMedia.name”
/>
The second text element’s value is tied to
the name of the current media item using
wmpprop. Setting its scrolling attribute to
true causes the item name to scroll hori-
zontally. Load the PCMAG_D.WMZ skin to
see the skin with buttons, progress bar, and
“Now playing:” text (Figure 2).
SPECIAL EFFECTS
WMP 7 supports a feature called visualisa-
tions – images that move and change in
direct relationship to the frequency spec-
trum and waveform of the current audio
output. Visualisations are displayed with-
in an effects element, which we’ll place
inside a subview element, like this:
<subview
zIndex=”1”
left=”202” top=”146”
backgroundColor=”none”
backgroundImage=”mouthc.bmp”
clippingImage=”mouthc.bmp”
clippingColor=”#FFFFFF”>
<effects
id=”vis”
l e f t = ” 0t ”o p = ” 0 w
” i d t h = ” 2
height=”180”
windowed=”false”
www.DITnet.co.ae
visible=”true”/>
</subview>
As its name suggests, a subview repre-
sents a portion of a view. Setting its zIndex
attribute to 1 makes the subview appear in
front of the main view (a negative zIndex
would put it behind the main view). The
clippingImage and clippingColor attribut-
es limit the visible area of the subview and
the elements it contains. Adding support for
visualisations is as simple as inserting an
effects element within the subview. The
windowed attribute must be set to false so
that the effects element will be affected
by the clippingColor.
We’ll add a pair of buttons to step
through the available visualisations
using a buttongroup with custom
buttons, rather than built-ins. The
complete definition of this but-
t o n g r o u p i s fo u n d i n
PCMAG_E.WMZ; here’s the
code for one button:
<buttonelement
id=”BtnNextVis”
mapping color = ”#0000FF”
upToolTip=”Next visualization”
onClick=”vis.next();”
enabled=”wmpprop:vis.visible”/>
The instruction defined by the
onClick attribute’s value is exe-
cu ted wh en the bu tto n is
c l i ck ed . In t his ca se , t he
i nstr u ct i on c all s th e nex t
method of the effects element,
which we named vis. The but-
ton is only enabled when the
effects element is visible. Figure 3 shows the
result.
MORE ON THE WEB
Space constraints prevent us from includ-
ing sections on adding video elements to
the code and on enhancing the skin by
adding slide-out panels for the playlist and
volume controls, as shown in Figure 4.
These two sections are contained in the
file Skins.rtf, which we’ve included in the
Skins.zip file. The complete code for the
skin is a lso in th e zi p f ile, saved as
PCMAG_H.
You’ve got enough information now to
start creating skins of your own, but we’ve
barely scratched the surface. The Windows
Media Player SDK (downloadable from
http://msdn.microsoft.com/windowsme-
dia) defines all the elements, attributes and
objects used in creating WMP skins. And of
4 course,
0 ” you can open up any skin using
your ZIP utility, extract its contents and
study them to get ideas.
■ www.PCmag-mideast.com