o,zK4B!t3~M1因为不太知道怎样的教程比较合用，所以我想把这个教程做成互动式的，一部分一部分地放上来，大家可以对这篇文档提出自己的建议和要求，我根据大家的需求来改，目前拟定的目录如下：创意公社- ideaer M/J a6M(x

~l.kg nf
S1k1微软媒体播放器SKIN制作教程目录

5q ~jfP ])[1微软媒体播放器SKIN制作教程之（一）――简介创意公社- ideaers+ZsXd.n

9Z4|~
F!pNp5E1微软媒体播放器SKIN制作教程之（二）――XML热身

微软媒体播放器SKIN制作教程之（三）――准备图片创意公社- ideaerga9U+{a`]3Xu%z m

微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML创意公社- ideaer0A$vD b+ma

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

微软媒体播放器SKIN制作教程之（六）――常用参数创意公社- ideaer
}Jv.]3|$oV

如果大家有进一步的要求，还可以搞一些进阶教程。创意公社- ideaerv7Ni2X5s b[

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

OyYb?S1一个微软媒体播放器SKIN其实是非常简单的，它主要由三部分文件组成：创意公社- ideaerE!u0~)hJKk#u-g/X*\

图片： 好消息――BMP，JPG，PNG，GIF都可以用；坏消息――不支持ALPHA透明和GIF的透明，在程序里是用关键色来透明的。

XML文件：定义媒体播放器各个元素的组成，位置，调用JS文件里的操作。创意公社- ideaer%}0V[iC7qB,S

4v9kw'HFYs6P1JS文件：用javascript对媒体播放器各个元素进行操作，定义它们的属性，生成一些动态效果，要注意：这个JS里包含一些微软媒体播放器专用的JS。

TW}Z4b4W1重要的参考文档：微软媒体播放器开发包（http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe），虽然是E文的，涉及SKIN的部分内容还是非常的简单，目前还没看到中文的……创意公社- ideaer*xrT(?^)u

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

6?Hp+@s"o1这节主要简单谈一谈什么是XML，与媒体播放器本身的XML制作方法关系不大，熟悉XML的朋友可以略过不看。

什么是XML（Extensible Markup Language）？创意公社- ideaerOy~E/O{/RL

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

创意公社- ideaerm-bpMKCA3}l

)GV@WZ
MP6m1<甜品>

<冰淇淋>创意公社- ideaerFOCH*p5D^\6v

<颜色>柠檬黄创意公社- ideaerP7B!L;tT l\
|[{

<口味>微酸创意公社- ideaer5qfMHH6]

U7e5b'A7s$iDD1

-eCH,T(G;R)cX1创意公社- ideaer,K-j+Ec{)za.lu(X"e0}*N

|RGgO Sb1用IE浏览器打开这个XML文件（后缀一定要是XML），你会看到如下的效果：创意公社- ideaer8Bw2r7xj:amH]

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

首先解释这句：

-F |7OYpR+LW)Av1它表明这是一个XML文件（废话？），如果你的文件中有中文，encoding=GB2312是必不可少的，当然，可加的东东还很多，不过我们现在就先说这些（秘密：媒体播放器的XML根本不用这一句，这句是方便你在IE中看文件用的）。

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

^.w"Y:x4Z@ Cx7AI1

<甜品>创意公社- ideaer%Q(GJov _2S?]5w

<冰淇淋>创意公社- ideaerqHZ[Ks1n8?

8m ?fI%i d1<颜色>柠檬黄

4cX/\7K
PM |1<口味>微酸创意公社- ideaer8\4u2^$u!M)I_5`

:CM#{9r2z$T1创意公社- ideaerho\3`U`1_k

WK7_V}1<冰淇淋>

<颜色>草莓红创意公社- ideaerc:^G!^3z(b

I9_oAQt@:h1<口味>甜创意公社- ideaer D/Tg0Oc(z8L

<装饰>一把小伞创意公社- ideaer \Tcy*d)^d B

+f6o~hF9[1

6CUC%Z%@}1<水果拼盘>创意公社- ideaer_,S7}6} ql RL;Kj^K

r;w-a:J!AGgT[M
y-]e1<水果>

<西瓜 价钱=便宜的/西瓜>

t"Xi7Z CC0O:|1<西瓜 价钱=便宜的 质量=生的/西瓜>创意公社- ideaerk2d#|"pU7J3C

}bD1M$Q t1<蕃茄 质量=洗净的>

P TD-?M"[&Mj\4f1创意公社- ideaer}1obYOK5omq
[

~V1n*O$U-?&_Cm"c1<装饰>塑料小勺一把创意公社- ideaer&Cjdaav8N&h

1_q)Tct3dm1创意公社- ideaer']Gz9wP0j K/zi V+p

创意公社- ideaer(Y4PW
qD4c/g

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

关于XML这种标记语言就讲这么多，但愿你没有被我的冰淇淋和西瓜搞晕……

#j!rOR*Ve1唉，其实只要记住XML是用来表述数据的就可以了……创意公社- ideaer }
c0dK p#j

微软媒体播放器SKIN制作教程之（三）――准备图片

要做一个最简的SKIN，我们只需要准备三张图片：

图片一：SKIN的初始状态（background.gif）创意公社- ideaer4N'}*Hu:s

图片二：SKIN的mouseover状态（hover.gif）创意公社- ideaer(O9@E+?%O,J

$?]m
G5~kv.~]1创意公社- ideaeri
r5eLN w
bq%g3a

图片三：蒙板图（map.gif）创意公社- ideaer3z v5dGC

创意公社- ideaerotAPv'a8I Z}n2p

微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML创意公社- ideaerF5G"LV!sH$E!B"z

N~eV,N#[3\.h6RG`0Ni1微软媒体播放器SKIN所用的XML有特定的标记，我们先搞个最简的说明一下，用记事本建立如下的文本文件：创意公社- ideaerC1wR8|5~LED

GV?+be6Fs:}1

创意公社- ideaer7raS"K-RXj_q

*\*wL;~(mR+E/j1clippingColor = #FF0000创意公社- ideaer
cG}^+wDF

0XV}` \3OC1backgroundImage = background.gif创意公社- ideaer1XV7|;oHjj`

titleBar = false

scriptFile = demo.js>

1aa!}.p xQI-R"o1创意公社- ideaerH/^`*q%PS

mappingImage = map.gif创意公社- ideaerc(B:cA)^u'kq1Ri]

I1~P4yH8`)Q1hoverImage = hover.gif>创意公社- ideaer6L(FE1UTq

0t#SEO~TE&Ih1创意公社- ideaer8uy)REt?v

q |0eF3XLx1mappingColor = #FF00FF />创意公社- ideaer]|2Jq k3LNc.e

W }?V3B.Q?;cM1

5@6p8CX;h6i1l2F d1mappingColor = #00FFFF />创意公社- ideaer\/\[q)E+G(G{3s

i4r ^K/^sQ1 创意公社- ideaer*Z7k*[$iC!]Sv:cKhh

mappingColor=#00FF00创意公社- ideaer8Rq.o5C4v8Y-j-S6S

a-]v S Vw&cyTc1N4X1upToolTip=打开文件

onClick=openFile()创意公社- ideaerR-o/clwB

,_e)U7p]1enabled=true/>

创意公社- ideaerwd2o"h$`)[@

/U*ri$`x[ if1

“THEME”就是这个XML文件的根元素，“VIEW”是在这个根元素下的一个视觉元素，这个视觉元素包含一个按钮组“BUTTONGROUP”，而这个按钮组又包含三个按钮：一个是用来播放音乐的“PLAYELEMENT”；一个是用来停止播放的“STOPELEMENT”；还有一个“BUTTONELEMENT”是用来打开音乐文件的。创意公社- ideaer&_&~ rb T

-O]O/K3^9Ns9Q)`1详解一下上面这些元素的部分属性：

0Yn0{v#Gwo1clippingColor = #FF0000：这是让SKIN的圆角透明，关键色#FF0000；

backgroundImage = background.gif：这是SKIN的背景图像；创意公社- ideaer8e ML5A4D

Zn oqJ$R"v^1titleBar = false：不显示媒体播放器自带的菜单；创意公社- ideaerT"SB5as;Q Md~

U\Q
[/h1scriptFile = demo.js：指定SKIN所用的JS文件；创意公社- ideaeri:vtx^-L
o3ZXu

mappingImage = map.gif：SKIN所用的蒙板图片，可以设定按钮的形状；

8Wi"i;D`1hoverImage = hover.gif：鼠标移到按钮上时显现的图片；创意公社- ideaer&f0C^S+a

cmQ5xG n1mappingColor = #FF00FF：蒙板上关键色为#FF00FF的区域显示为播放按钮；

upToolTip=打开文件：鼠标移上去时出现的提示文本；

onClick=openFile()：点击时调用demo.js里的openFile()函数；创意公社- ideaer-Ktn:B9F.j,K+y

OK，是不是很EASY呢？现在我们把这个文本文件的后缀改为wms，呵呵，这个SKIN就差一个JS文件了，我们的下一步教程就是来写这个JS文件。

kx$pq4\F5q1微软媒体播放器SKIN制作教程之（五）――媒体播放器用到的JS创意公社- ideaer0z M Bv+uii

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

function openFile(){

i8DcI-eBM1media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');创意公社- ideaery*t N$^ HA0x'Z

](Hp,o&|m&J&?v1if (media) {

player.URL = media;创意公社- ideaerX\ g8Q1T!f4i%\n

}

}创意公社- ideaer7V.C#T"r\c:?

.dtxx.S8gGS p1学过javascript的朋友看懂这段绝对是没有问题的，这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。

[/Nh#u`9E1现在，把这一小段脚本存为demo.js，这样，我们的SKIN就基本制作完毕了。创意公社- ideaer)ktT!Fu$Tj*b.K|-J

最后，我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件，再将zip后缀改为wmz，一个最简单的媒体播放器SKIN就搞定了！

双击它看看效果吧，不过因为这个SKIN太简单了，我们没做关闭按钮和其它的东东，大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerL'f,Y2j;E5ty+?

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

dIB Z-sa7}\ek^1……这个，有空再慢慢加！创意公社- ideaer;J5v6~f\&A(]lx)f.|

z;n:mUD1有作品了别忘记放上来大家看看哦！创意公社- ideaer vJhA:ApK