Are you new to WMP Skin Making?
We have the tutorial for it.
Making Images:
The images consist of mainly Main and Map. You can add disabled, hover, down and up images. It can use gif, JPG, JPEG, PNG (WMP12 only) and GIF file format.
Main File
Map File
You can also make seek thumb, volume thumb, and EQ image files.
The Thumb Files
You can also make button images.
When you are done making images, you create a code:
<THEME id="Summary" title="Example" author="Anyone" Copyright="©XXXX Anyone. All Rights Reserved">
<VIEW
clippingColor = "#800080"
transparencyColor="#800080"
backgroundImage = "main.gif"
titleBar = "false">
<BUTTONGROUP
mappingImage = "map.gif">
<BUTTONELEMENT
mappingColor = "#00FF00"
upToolTip = "Play"
onClick="jscript:player.controls.play();" />
<BUTTONELEMENT
mappingColor = "#00FFFF"
upToolTip = "Pause"
onClick="jscript:player.controls.pause();" />
<BUTTONELEMENT
mappingColor = "#FF0000"
upToolTip = "Stop"
onClick="jscript:player.controls.stop();" />
<BUTTONELEMENT
mappingColor = "#FFFF00"
upToolTip = "Next"
onClick="jscript:player.controls.next();" />
<BUTTONELEMENT
mappingColor = "#0000FF"
upToolTip = "Previous"
onClick="jscript:player.controls.previous();" />
<BUTTONELEMENT
mappingColor = "#800000"
upToolTip = "Minimize"
onClick="jscript:view.minimize();" />
<BUTTONELEMENT
mappingColor = "#008000"
upToolTip = "Return to Full Mode"
onClick="jscript:view.returnToMediaCenter();" />
<BUTTONELEMENT
mappingColor = "#000080"
upToolTip = "Close"
onClick = "JScript: view.close(); " />
<BUTTONELEMENT
mappingColor = "#FF00FF"
upToolTip = "Next Visualization"
onClick = "JScript:myeffects.next(); "/>
</BUTTONGROUP>
<seekSlider zIndex="1"
left="222" top="106" height="16" width="180"
direction="Horizontal"
thumbImage="thumb.gif"
>
</seekSlider>
<slider id="volume" zIndex="2"
left="222" top="68" height="16" width="180"
direction="Horizontal"
min="0" max="100" toolTip="Volume"
thumbImage="thumb.gif"
value="wmpprop:player.settings.volume"
value_onchange="player.settings.volume=value;"
>
</slider>
<text left="211" top="158" width="64"
foregroundColor="#000000"
fontSize="8" fontStyle="bold"
justification="left"
value="wmpprop:player.controls.currentPositionString"
/>
<text top="132" left="211" width="380"
left="jscript:metadata.left+metadata.width+2;"
foregroundColor="#000000"
fontSize="8" fontStyle="bold"
wordWrap="0"
scrolling ="true"
scrollingDelay="0"
scrollingAmount="2"
value="wmpprop:player.currentmedia.name"
>
</text>
<PLAYLIST
top = "190"
left = "2"
width = "196"
height = "99"/>
<VIDEO
top = "185"
left = "210"
width = "207"
height = "99"
maintainAspectRatio="false"
stretchToFit="true"
shrinkToFit="true"/>
<EFFECTS
id = "myeffects"
top = "185"
left = "210"
width = "207"
height = "99"
currentEffectType="bars"
currentPreset="0"
onClick="previous();"/>
<BUTTON
left="4"
top="70"
upToolTip="Audio controls"
image="EQ_Up.gif"
hoverImage="EQ_Hover.gif"
downImage="EQ_Down.gif"
transparencyColor="#00FF00"
onClick="sEq.visible=!sEq.visible"
>
</BUTTON>
<!-- Audio controls subview: A common way to present
the graphic equalizer controls. This audio controls
subview includes the graphic equalizer sliders and
the balance slider -->
<SUBVIEW
id="sEq"
left="4"
top="86"
width="194"
height="65"
backgroundColor="none"
>
<!-- Equalizer tag: You must have this to use equalizer controls -->
<EQUALIZERSETTINGS id="eq" enable="true">
</EQUALIZERSETTINGS>
<SLIDER
id="eq1"
left="0"
top="0"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel1"
value_onchange="eq.gainLevel1=value;"
>
</SLIDER>
<SLIDER
id="eq2"
left="jscript:eq1.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel2"
value_onchange="eq.gainLevel2=value;"
>
</SLIDER>
<SLIDER
id="eq3"
left="jscript:eq2.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel3"
value_onchange="eq.gainLevel3=value;"
>
</SLIDER>
<SLIDER
id="eq4"
left="jscript:eq3.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel4"
value_onchange="eq.gainLevel4=value;"
>
</SLIDER>
<SLIDER
id="eq5"
left="jscript:eq4.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel5"
value_onchange="eq.gainLevel5=value;"
>
</SLIDER>
<SLIDER
id="eq6"
left="jscript:eq5.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel6"
value_onchange="eq.gainLevel6=value;"
>
</SLIDER>
<SLIDER
id="eq7"
left="jscript:eq6.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel7"
value_onchange="eq.gainLevel7=value;"
>
</SLIDER>
<SLIDER
id="eq8"
left="jscript:eq7.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel8"
value_onchange="eq.gainLevel8=value;"
>
</SLIDER>
<SLIDER
id="eq9"
left="jscript:eq8.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel9"
value_onchange="eq.gainLevel9=value;"
>
</SLIDER>
<SLIDER
left="jscript:eq9.left+20"
top="jscript:eq1.top"
toolTip="Graphic equalizer"
direction="vertical"
backgroundImage="EQ_Slider.gif"
thumbImage="EQ_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
min="-14" max="14"
value="wmpprop:eq.gainLevel10"
value_onchange="eq.gainLevel10=value;"
>
</SLIDER>
<!-- Balance slider -->
<BALANCESLIDER
left="60"
top="48"
backgroundImage="Bal_Slider.gif"
thumbImage="Bal_Thumb.gif"
transparencyColor="#00FF00"
borderSize="8"
>
</BALANCESLIDER>
</SUBVIEW>
</VIEW>
</THEME>
Save that file as a .wms file.
Then create a new zip file and put all the content in it then rename the .zip to .wmz and you finally made a skin.