因为不太知道怎样的教程比较合用，所以我想把这个教程做成互动式的，一部分一部分地放上来，大家可以对这篇文档提出自己的建议和要求，我根据大家的需求来改，目前拟定的目录如下：

!OVO?i0微软媒体播放器SKIN制作教程目录创意公社- ideaer.cfJHO;fl

微软媒体播放器SKIN制作教程之（一）――简介

微软媒体播放器SKIN制作教程之（二）――XML热身

/{T.R\*W/@,B0微软媒体播放器SKIN制作教程之（三）――准备图片

微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML

ZvhB"y'S0J"z0微软媒体播放器SKIN制作教程之（五）――媒体播放器用到的JS创意公社- ideaer9CxC#M8G*aa?'\

微软媒体播放器SKIN制作教程之（六）――常用参数

0Ell)`2N$G\B#x4?&Vx0如果大家有进一步的要求，还可以搞一些进阶教程。

/Z*Sna!lj0微软媒体播放器SKIN制作教程之（一）――简介创意公社- ideaer)Wu'DpVk

9@?h?h7H^k4C0一个微软媒体播放器SKIN其实是非常简单的，它主要由三部分文件组成：

图片： 好消息――BMP，JPG，PNG，GIF都可以用；坏消息――不支持ALPHA透明和GIF的透明，在程序里是用关键色来透明的。创意公社- ideaero"GZ6K.}$l,f3@

:nIm1P/F1r5Vz0XML文件：定义媒体播放器各个元素的组成，位置，调用JS文件里的操作。创意公社- ideaer
?0HGF.Z"W@+P3\

JS文件：用javascript对媒体播放器各个元素进行操作，定义它们的属性，生成一些动态效果，要注意：这个JS里包含一些微软媒体播放器专用的JS。创意公社- ideaern\:xL0G.d

8[U&whu?iP0重要的参考文档：微软媒体播放器开发包（http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe），虽然是E文的，涉及SKIN的部分内容还是非常的简单，目前还没看到中文的……创意公社- ideaerL,`!k-O JC3XpeQ

微软媒体播放器SKIN制作教程之（二）――XML热身

w+Mh2J)J7s&?xo(d,XAq"w0这节主要简单谈一谈什么是XML，与媒体播放器本身的XML制作方法关系不大，熟悉XML的朋友可以略过不看。

t6A6?R&i7} e0什么是XML（Extensible Markup Language）？创意公社- ideaer1i p
lZw

)~*cm@C4l8w zB0就象HTML是定义格式的一样，XML是用来定义数据的，微软媒体播放器用到的XML非常简单，我们了解一小部分就可以了。官方的文档如果你有兴趣看，可以到http://www.w3.org/XML/看，不过官方的文档总是比较乏味，做SKIN并不需要那么多乏味的细节，我们还是先秀一个最简单的XML文件（demo.xml），打开记事本，输入以下的文本：创意公社- ideaer%]A-Mc `&z

2t+tzCD/zw0

<甜品>

;};F!b.pVD2a&H]0<冰淇淋>创意公社- ideaer+_r#X.d&w4zp
F?c

e@X ?W0<颜色>柠檬黄创意公社- ideaer k HSj;uspG

XX S1u?B0<口味>微酸

(|pPckp\"Vl0创意公社- ideaer{8j*]?\#G(h

用IE浏览器打开这个XML文件（后缀一定要是XML），你会看到如下的效果：

创意公社- ideaer&xY(]N(e

如果点击那个减号，还可以折叠这个树状结构的东东――呵呵，把XML文件暂时理解为一棵树就对了。另外，实际的应用中XML标记绝大多数都是使用英文的，我这里用中文是为大家看起来比较方便。创意公社- ideaerR8g%W'H _p

gPFJ0i}0首先解释这句：

它表明这是一个XML文件（废话？），如果你的文件中有中文，encoding=GB2312是必不可少的，当然，可加的东东还很多，不过我们现在就先说这些（秘密：媒体播放器的XML根本不用这一句，这句是方便你在IE中看文件用的）。创意公社- ideaerk-_8s'sQ d;{

其它的标记都是成对出现的，是不是和HTML很象？不过XML更严格，必须要成对出现，否则就会出错。其中“<甜品>”是这个文件的根元素，只能有一个哦！象“<冰淇淋>”和“<颜色>”这样的叶子则可以有好多个，还可以嵌套，它的目的只有一个：用来描述你所有的甜品。我们再加一个冰淇淋和一个水果拼盘：

d:k9zE#I1Om+}'Z0

N%PK
@sUfYa0<甜品>创意公社- ideaer%g0{U$O Wa({

.wNN{)~2I G!U0<冰淇淋>创意公社- ideaer\0cqs*N9?

1Q4i,DO9K]0<颜色>柠檬黄创意公社- ideaer.ELV[
Eu

(P.vDb%s{ dpGW0<口味>微酸

~@\g0r*BL%~e0<冰淇淋>

<颜色>草莓红创意公社- ideaerJ.I C*Z}#@'pve

,b!P W I~&k\(k.G0<口味>甜创意公社- ideaerZlj$|+_XF)_\h

<装饰>一把小伞创意公社- ideaer]^%O8}|

yO_ ~m~0

<水果拼盘>创意公社- ideaer|BH-bY.? zO

<水果>创意公社- ideaer,X^Fp"UV L

_sD|e0<西瓜 价钱=便宜的/西瓜>创意公社- ideaerX6UB2X4q'C8C

5T)Y@Xy-Flr0<西瓜 价钱=便宜的 质量=生的/西瓜>创意公社- ideaer0|$TD[HS#t$a

<蕃茄 质量=洗净的>

<装饰>塑料小勺一把创意公社- ideaer,p,S5i ^j%{

I`-O\8o|{[0创意公社- ideaerS"[;kvI%oaxe r2T

创意公社- ideaerr$Wk|kj|

发现什么变化没有？西瓜和蕃茄有了“价钱”和“质量”的属性了，每片叶子都可以有不止一个属性，其它程序调用它们时会用到这些属性，另外“<西瓜 价钱=便宜的 /西瓜>”和“<西瓜 价钱=便宜的>”是一样的，中间没内容当然就简写啦，这种简写也代表标记是成对的，并不意味着标记可以不成对，切记！创意公社- ideaerV
]KBSSi'o){H

-WEDg'D8L?I8t0关于XML这种标记语言就讲这么多，但愿你没有被我的冰淇淋和西瓜搞晕……创意公社- ideaer%O0p V@\!W`

*R,R n)ln-d/ID0唉，其实只要记住XML是用来表述数据的就可以了……

Q
B[6y&m+Y(m"Zs0微软媒体播放器SKIN制作教程之（三）――准备图片创意公社- ideaer5A:t4x}6T*N*_E

要做一个最简的SKIN，我们只需要准备三张图片：创意公社- ideaerD*KFH@"uH{

图片一：SKIN的初始状态（background.gif）

创意公社- ideaer5\9ky:rr'[jA

9ALm2i_9~d?0图片二：SKIN的mouseover状态（hover.gif）创意公社- ideaerX8e&xb#GJ

Te?"~LY5a)@;z0图片三：蒙板图（map.gif）

%hS7P$jy J C0创意公社- ideaeru.I0d
HHiX6l4f7n

F7j2IRi0微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML

微软媒体播放器SKIN所用的XML有特定的标记，我们先搞个最简的说明一下，用记事本建立如下的文本文件：

} Ct(eo?#f}{0

创意公社- ideaer5M%uGgO!H

clippingColor = #FF0000创意公社- ideaer]M2v \:H!q7x

L fpBv0backgroundImage = background.gif

(tm#~$[`,Q'@T0titleBar = false创意公社- ideaerk]i'\KS;O~EnM7p[

scriptFile = demo.js>

创意公社- ideaerK5x v@u"Li

mappingImage = map.gif创意公社- ideaerD[/O&zI|#D

6yt zYF0hoverImage = hover.gif>

5Y H ^"uP+uv0创意公社- ideaerx,Y1@H0d_tm/DJ%G%Px

mappingColor = #FF00FF />

创意公社- ideaerB1geD2Fttv

`3K:xe8J%k`0mappingColor = #00FFFF />创意公社- ideaer3v2ZAso1V nF

0Yl9Ea0e&|0B[g8o&H0创意公社- ideaer#u6hg5P'Qzf%{ Z

mappingColor=#00FF00创意公社- ideaer
x{ET]]:s%]~

XA]AFH1I*e0upToolTip=打开文件创意公社- ideaer,^
H.B/N&D-p1]E

onClick=openFile()创意公社- ideaernX w g'|}V|-]`|siT

S5[ d:~*scB0enabled=true/>

c;Bjb Ac.M)o0

0d/pl c2SO0

创意公社- ideaer/W;Y_N vx

pc3V\ K5O8h5}%jz0“THEME”就是这个XML文件的根元素，“VIEW”是在这个根元素下的一个视觉元素，这个视觉元素包含一个按钮组“BUTTONGROUP”，而这个按钮组又包含三个按钮：一个是用来播放音乐的“PLAYELEMENT”；一个是用来停止播放的“STOPELEMENT”；还有一个“BUTTONELEMENT”是用来打开音乐文件的。

详解一下上面这些元素的部分属性：创意公社- ideaer;~~qH-l1^B P
e7e

%}*CrzQ[~HZd0clippingColor = #FF0000：这是让SKIN的圆角透明，关键色#FF0000；创意公社- ideaer.OP3f&i!M

backgroundImage = background.gif：这是SKIN的背景图像；创意公社- ideaer/Y|LR(zsm
Lg,X

v#nZ+{HTnk0titleBar = false：不显示媒体播放器自带的菜单；创意公社- ideaerq@S7g m;Q+j(\A

?7dc
?&q:H0scriptFile = demo.js：指定SKIN所用的JS文件；

mappingImage = map.gif：SKIN所用的蒙板图片，可以设定按钮的形状；创意公社- ideaer}!R4R+cg4k$W:\W

*D?p*~*\csoS0hoverImage = hover.gif：鼠标移到按钮上时显现的图片；创意公社- ideaer5cBG
FG)y!s

n7Qk+g]s!v M0mappingColor = #FF00FF：蒙板上关键色为#FF00FF的区域显示为播放按钮；创意公社- ideaer"N.fA;Uh1kx

Qp%C)I4XMyAp9K0upToolTip=打开文件：鼠标移上去时出现的提示文本；

)bhy3k5C&u,c0onClick=openFile()：点击时调用demo.js里的openFile()函数；

*F4]E;m#vOz5w.x0OK，是不是很EASY呢？现在我们把这个文本文件的后缀改为wms，呵呵，这个SKIN就差一个JS文件了，我们的下一步教程就是来写这个JS文件。

微软媒体播放器SKIN制作教程之（五）――媒体播放器用到的JS创意公社- ideaer4~S"`;~9KCJ

用记事本建立如下的文本文件：

function openFile(){

media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');创意公社- ideaer Bp-d"KJ&_DY![

if (media) {

player.URL = media;

}创意公社- ideaer!I"F-V4\)y

}创意公社- ideaer$?-S$m5Wk'J%\

)o$gS6h9kt"}0学过javascript的朋友看懂这段绝对是没有问题的，这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。

^3@!UTC Dd0现在，把这一小段脚本存为demo.js，这样，我们的SKIN就基本制作完毕了。

最后，我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件，再将zip后缀改为wmz，一个最简单的媒体播放器SKIN就搞定了！创意公社- ideaer
`H6V*~$l7r@5n

双击它看看效果吧，不过因为这个SKIN太简单了，我们没做关闭按钮和其它的东东，大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerN&B?"P#Nn}

微软媒体播放器SKIN制作教程之（六）――常用参数

……这个，有空再慢慢加！创意公社- ideaer%g;o4m/pd9ffH

有作品了别忘记放上来大家看看哦！