P(lX:U:i0因为不太知道怎样的教程比较合用，所以我想把这个教程做成互动式的，一部分一部分地放上来，大家可以对这篇文档提出自己的建议和要求，我根据大家的需求来改，目前拟定的目录如下：创意公社- ideaerme"iM_ w&@-V

}h.|8lvV^"Z&T0微软媒体播放器SKIN制作教程目录

微软媒体播放器SKIN制作教程之（一）――简介创意公社- ideaerkl:l4S:S_:y

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

'_V&{"VM0微软媒体播放器SKIN制作教程之（三）――准备图片创意公社- ideaer'rM5S%E(\q.V,|3p

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

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

%A*XX9o!Xd3Q0微软媒体播放器SKIN制作教程之（六）――常用参数创意公社- ideaerln|1lV~9{y*Omq*f];l

如果大家有进一步的要求，还可以搞一些进阶教程。

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

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

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

XML文件：定义媒体播放器各个元素的组成，位置，调用JS文件里的操作。

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

8}K9R*[$^+M'f&iiz0重要的参考文档：微软媒体播放器开发包（http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe），虽然是E文的，涉及SKIN的部分内容还是非常的简单，目前还没看到中文的……

微软媒体播放器SKIN制作教程之（二）――XML热身创意公社- ideaer0lr*k/Dm |

&xk
X-K.WRm0这节主要简单谈一谈什么是XML，与媒体播放器本身的XML制作方法关系不大，熟悉XML的朋友可以略过不看。创意公社- ideaer/Y.d'p.eM1W1j

什么是XML（Extensible Markup Language）？

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

m)S B%p0EI0

J'V _$k
|I ~0<甜品>创意公社- ideaerlU!g9~eB

<冰淇淋>创意公社- ideaer#J!w Q&PS/vc,i

<颜色>柠檬黄

<口味>微酸

t6c`4rM s0

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

6y,N'Z0sO0创意公社- ideaerrM9q)YF5I$|w6Q

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

首先解释这句：创意公社- ideaer\&VO#z'IR;t'MG _

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

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

#LF
J0pM'E0

<甜品>创意公社- ideaernD"{aq kfBu1O

9Kt:V~AE0<冰淇淋>创意公社- ideaer2jF/w)Z#w1iA L

$r:@(~)xd3\ix,t0<颜色>柠檬黄

7t}7b"y9["T:q8C0<口味>微酸创意公社- ideaer2F;Nc$\$S7p)}g

创意公社- ideaer$?@ ~(LF!]

<冰淇淋>

3Kg:Ens5R0<颜色>草莓红

'^5J(yu0u'}:R3i m`!g/{0<口味>甜

*B Iu0^5Y0<装饰>一把小伞创意公社- ideaer,jW&W!F p6]~(Y

g.FbyQL}!H0

<水果拼盘>创意公社- ideaerh_1GlB8u

_epf-k)S)B0<水果>创意公社- ideaer*B7P5| E8x-e8a

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

*Ks!xPiy:t4M@1k'o0<西瓜 价钱=便宜的 质量=生的/西瓜>

<蕃茄 质量=洗净的>创意公社- ideaer;_0LMDIz(\:}

$|6W4UWHw!t0<装饰>塑料小勺一把创意公社- ideaer.W1CT_"\&{

5_9Cp.RC0k0

-D%`pEi.j+qI1F0

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

kOE&M%YfE1R vB y0关于XML这种标记语言就讲这么多，但愿你没有被我的冰淇淋和西瓜搞晕……创意公社- ideaer%o$R/S9[d1b7_ o

唉，其实只要记住XML是用来表述数据的就可以了……

o-ex;Q'}U0微软媒体播放器SKIN制作教程之（三）――准备图片

9c~[6JG |j0要做一个最简的SKIN，我们只需要准备三张图片：创意公社- ideaerS\P&QfMF`

图片一：SKIN的初始状态（background.gif）创意公社- ideaerfU%Svd%~"E!H

d1fD"D6o/YRu]0创意公社- ideaere-S U0qnNG

图片二：SKIN的mouseover状态（hover.gif）

创意公社- ideaerV w][y

1I3mt&uD f9m0图片三：蒙板图（map.gif）

&XT8te*X:?4iVX0创意公社- ideaer zx4Ja*r2TPy3}r)A

微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML创意公社- ideaers)Z)\3a w_g$qnJ i

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

0V%P|'M$H$oS+Z0创意公社- ideaer,i:i D.~h7[+z4B5e}E

lN,xH1P9](t0创意公社- ideaer/mn.\A H

clippingColor = #FF0000创意公社- ideaeribDD4h#MaLAg;q

t;Qz,|9s4d(C{y0backgroundImage = background.gif

lm fmcH7{0titleBar = false

{Q9D x pu0scriptFile = demo.js>创意公社- ideaer$l%{"}u'M;WH$Z

%U'bBx Lh[M^{0

}|AkF D1iWv0mappingImage = map.gif创意公社- ideaerD!Q$W-Q(v7Rm"M4N3S

hoverImage = hover.gif>创意公社- ideaerq5oV4|%}1pb

创意公社- ideaer%}h['|s'b'e

mappingColor = #FF00FF />创意公社- ideaer*k3R;v(CP;ECiKj&sT,B

0j taeP%r&k~o0 创意公社- ideaer;]5f2Gs1d}

mappingColor = #00FFFF />

创意公社- ideaer#FE(W#T~M9A

~0B0i-e+E)^])k'B&^f0mappingColor=#00FF00创意公社- ideaer.tE.`&w3H[4`

0c9@dY9{)n0upToolTip=打开文件

onClick=openFile()

enabled=true/>

创意公社- ideaerNM9x&C5] U a-CH

FX;j\Z-L0N\0

c8jT|\-e[0

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

详解一下上面这些元素的部分属性：

w/\K,M G%r6F0clippingColor = #FF0000：这是让SKIN的圆角透明，关键色#FF0000；

backgroundImage = background.gif：这是SKIN的背景图像；

titleBar = false：不显示媒体播放器自带的菜单；

r.~3]+i7d0scriptFile = demo.js：指定SKIN所用的JS文件；创意公社- ideaer w#p kCK jZ}

A_(h9Wu1Q-au0mappingImage = map.gif：SKIN所用的蒙板图片，可以设定按钮的形状；

M+Xhdr1e3db%H0hoverImage = hover.gif：鼠标移到按钮上时显现的图片；

mappingColor = #FF00FF：蒙板上关键色为#FF00FF的区域显示为播放按钮；创意公社- ideaerl,mWQH

]l'l0f|ia0upToolTip=打开文件：鼠标移上去时出现的提示文本；创意公社- ideaer2avl [,Fi%`q&f

G+Yo~ tz4\0onClick=openFile()：点击时调用demo.js里的openFile()函数；

l$m*`+E
_ fv0OK，是不是很EASY呢？现在我们把这个文本文件的后缀改为wms，呵呵，这个SKIN就差一个JS文件了，我们的下一步教程就是来写这个JS文件。

微软媒体播放器SKIN制作教程之（五）――媒体播放器用到的JS创意公社- ideaer Y P,\KJ

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

3{%ZH!U"O7sAquw0function openFile(){

media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');

X1u|)uC{1?0if (media) {创意公社- ideaer4K5?FH|{

i#d7l@)_h \]0player.URL = media;

}

}创意公社- ideaer0D d*}LrK.c

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

mp,w(xB6w]3f
G0现在，把这一小段脚本存为demo.js，这样，我们的SKIN就基本制作完毕了。创意公社- ideaer%J4_Wtrs4[q9\)A |

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

双击它看看效果吧，不过因为这个SKIN太简单了，我们没做关闭按钮和其它的东东，大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaer/H,DbFZN/tqr`0Y

1FBet4qGb.[0微软媒体播放器SKIN制作教程之（六）――常用参数创意公社- ideaer/Xj5{/I`X {m[?V$a

……这个，有空再慢慢加！创意公社- ideaer0d-Dl0k!Y HP:h"y6D
[7v

?IP;Q
wr$Vf0有作品了别忘记放上来大家看看哦！