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

微软媒体播放器SKIN制作教程目录

!e9tT3L)b(A0微软媒体播放器SKIN制作教程之（一）――简介

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

微软媒体播放器SKIN制作教程之（三）――准备图片创意公社- ideaer7X}*G&G4]

VZ8O's7eTM
]:e0微软媒体播放器SKIN制作教程之（四）――媒体播放器用到的XML创意公社- ideaer
\3[ iw?Ws9a`q

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

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

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

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

b @)J0FG0一个微软媒体播放器SKIN其实是非常简单的，它主要由三部分文件组成：创意公社- ideaeroy-rP r Dr$_MM'C

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

XML文件：定义媒体播放器各个元素的组成，位置，调用JS文件里的操作。创意公社- ideaeru0YUE&rn%b;XK_*I

#Z xU!\k;Fn0JS文件：用javascript对媒体播放器各个元素进行操作，定义它们的属性，生成一些动态效果，要注意：这个JS里包含一些微软媒体播放器专用的JS。创意公社- ideaer!Ce8os| _

fa`x(ryI~0重要的参考文档：微软媒体播放器开发包（http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe），虽然是E文的，涉及SKIN的部分内容还是非常的简单，目前还没看到中文的……创意公社- ideaern4ze,a:^BI6it#B9L

.o8eA6Z&[C@0微软媒体播放器SKIN制作教程之（二）――XML热身

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

什么是XML（Extensible Markup Language）？创意公社- ideaerq0~7L&L.Zm

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

6a4p3`1rF
C,`$I0创意公社- ideaerr/o*AmE%i,}

{5n,bw:xSU5R*Q0<甜品>

? RK]rSOWY0<冰淇淋>创意公社- ideaer.H0Awwn k
zl|+m.X
M

4b?)]"[Og3IMx1m0<颜色>柠檬黄创意公社- ideaerf7Q5@0n1M)F%l

Y"L['l b"p:zu0<口味>微酸

创意公社- ideaer#m7PS;}(L1?!M4K7F

创意公社- ideaerW4LcG(?*vRB&?$p

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

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

首先解释这句：创意公社- ideaer}dF h{$F'V]oA5f

9ASy z@lX3}0它表明这是一个XML文件（废话？），如果你的文件中有中文，encoding=GB2312是必不可少的，当然，可加的东东还很多，不过我们现在就先说这些（秘密：媒体播放器的XML根本不用这一句，这句是方便你在IE中看文件用的）。

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

8z3BE`]O0<甜品>创意公社- ideaerQ1ZlS?2H(`b

ez[C'r.k0<冰淇淋>

<颜色>柠檬黄创意公社- ideaer4|5F'z2{&s)b

7@:jd7AQ#~ZO#zh0<口味>微酸创意公社- ideaer\#m[A!vW$dN

c4o D5aO!`0

)m[U gG9_/Bn0<冰淇淋>创意公社- ideaer1gzPHg"|1_#T4c

-u}E _ bq0<颜色>草莓红创意公社- ideaer,k:c9v `dPCO5}

zS,z]A;f0<口味>甜

<装饰>一把小伞

,YosZume+v3`0

<水果拼盘>创意公社- ideaer%A$tZhE2I8BsPF aK$y#v

0V*A^#N%d\LF0<水果>创意公社- ideaerl{K5B%ykv1Z

<西瓜 价钱=便宜的/西瓜>创意公社- ideaertP A(hY@S$c

D:g?"figeWn0<西瓜 价钱=便宜的 质量=生的/西瓜>

2`z PM;N(L'z)Wa0<蕃茄 质量=洗净的>创意公社- ideaer cb]@
`d

/Oofa@n*G}0创意公社- ideaer`}%CEG[1R

I
K b c `!g%\0<装饰>塑料小勺一把创意公社- ideaerbm!N!s*U'N n _)~

?i,Yn#D0创意公社- ideaer!X}8d"VI

(P"TM7LV#Hhw0

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

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

6K5A-c~ M@C0[5W0唉，其实只要记住XML是用来表述数据的就可以了……

@qWO"hJ0微软媒体播放器SKIN制作教程之（三）――准备图片创意公社- ideaer;W8B.U8ef_

要做一个最简的SKIN，我们只需要准备三张图片：创意公社- ideaer^)jirJ(Z4t7KjS

K rR}aY
c0图片一：SKIN的初始状态（background.gif）创意公社- ideaerA6ko)mj1z;i

x;\I#u_0图片二：SKIN的mouseover状态（hover.gif）

图片三：蒙板图（map.gif）

?;pbxZ)B d{0创意公社- ideaer$n)Yss1gSv u+a

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

qLuyd6A0JW.`,O0微软媒体播放器SKIN所用的XML有特定的标记，我们先搞个最简的说明一下，用记事本建立如下的文本文件：创意公社- ideaerR;l$\@GM

;M)V0d]8c+c0 创意公社- ideaerI[@V ^

clippingColor = #FF0000

:Q-di?g7_V0backgroundImage = background.gif

titleBar = false创意公社- ideaer t+l8^7a+T`x[

scriptFile = demo.js>

创意公社- ideaer,? \N0LT

mappingImage = map.gif创意公社- ideaerpB0\2cWm

_p6Z*H,\0@~[ QjeUa0hoverImage = hover.gif>

t?Db7Y0创意公社- ideaer\
R/F{:r xd0C9hG

mappingColor = #FF00FF />创意公社- ideaerK%QRiD#PP,L+n

创意公社- ideaer`)Sj%w4C]Jg

mappingColor = #00FFFF />创意公社- ideaerv[T7zw V

)yc%OJ2v0创意公社- ideaer7sWms1kPr

+q hn g1u}*N8}Xy8Z0mappingColor=#00FF00

upToolTip=打开文件创意公社- ideaer(lL1T1C
l J(dC [

onClick=openFile()

enabled=true/>

\6b"Ox:J-@ |g0创意公社- ideaerGNcY @/Iw+T

bmU6XW8xm \0

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

,?'Z@aR7k2cH0详解一下上面这些元素的部分属性：

clippingColor = #FF0000：这是让SKIN的圆角透明，关键色#FF0000；创意公社- ideaer3\S8X&r aAE[

)H!n.NO v y(_M0backgroundImage = background.gif：这是SKIN的背景图像；

titleBar = false：不显示媒体播放器自带的菜单；创意公社- ideaer5G7Q Z0Bj:g

scriptFile = demo.js：指定SKIN所用的JS文件；

mappingImage = map.gif：SKIN所用的蒙板图片，可以设定按钮的形状；创意公社- ideaerw3Q#b2B
ts'R~

hoverImage = hover.gif：鼠标移到按钮上时显现的图片；

}3F:n1kft)]/P0mappingColor = #FF00FF：蒙板上关键色为#FF00FF的区域显示为播放按钮；创意公社- ideaer] R1i3OL L/R[1o T;Vh

upToolTip=打开文件：鼠标移上去时出现的提示文本；创意公社- ideaerv-Kn yq D'|

{H]$Y
B%F l.AUG0onClick=openFile()：点击时调用demo.js里的openFile()函数；创意公社- ideaer!|l:F*A;vd

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

-KA9t \/Bh6rtj0微软媒体播放器SKIN制作教程之（五）――媒体播放器用到的JS创意公社- ideaerR
[Qr[M"g;zM

.n4HXGO8S#\0用记事本建立如下的文本文件：创意公社- ideaer+B0F4jq(kF;{[l

function openFile(){

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

FpzBx-vK$N0if (media) {创意公社- ideaer-UfM-X4ve:v]4d

player.URL = media;

w.B^tHj1M-U0}创意公社- ideaerC#c!vMt%V{x

}

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

tA-rK]5Ru,}0现在，把这一小段脚本存为demo.js，这样，我们的SKIN就基本制作完毕了。创意公社- ideaerw-]3D#V4\/m$Q^D?

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

-`7z"_h3f0双击它看看效果吧，不过因为这个SKIN太简单了，我们没做关闭按钮和其它的东东，大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerv
? u o7X bA/EL

,~Mg ]BUr0微软媒体播放器SKIN制作教程之（六）――常用参数创意公社- ideaer?.Q&Mk \%s!F

……这个，有空再慢慢加！

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