教程:媒体播放器SKIN制作全攻略[原创]

因为不太知道怎样的教程比较合用，所以我想把这个教程做成互动式的，一部分一部分地放上来，大家可以对这篇文档提出自己的建议和要求，我根据大家的需求来改，目前拟定的目录如下：
微软媒体播放器SKIN制作教程目录
微软媒体播放器SKIN制作教程之（一）——简介
微软媒体播放器SKIN制作教程之（二）——XML热身
微软媒体播放器SKIN制作教程之（三）——准备图片
微软媒体播放器SKIN制作教程之（四）——媒体播放器用到的XML
微软媒体播放器SKIN制作教程之（五）——媒体播放器用到的JS
微软媒体播放器SKIN制作教程之（六）——常用参数
如果大家有进一步的要求，还可以搞一些进阶教程。

微软媒体播放器SKIN制作教程之（一）——简介
一个微软媒体播放器SKIN其实是非常简单的，它主要由三部分文件组成：
图片： 好消息——BMP，JPG，PNG，GIF都可以用；坏消息——不支持ALPHA透明和GIF的透明，在程序里是用关键色来透明的。
XML文件：定义媒体播放器各个元素的组成，位置，调用JS文件里的操作。
JS文件：用javascript对媒体播放器各个元素进行操作，定义它们的属性，生成一些动态效果，要注意：这个JS里包含一些微软媒体播放器专用的JS。
重要的参考文档：微软媒体播放器开发包（ http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe），虽然是E文的，涉及SKIN的部分内容还是非常的简单，目前还没看到中文的……
另有一篇中文的可以看看： http://www.microsoft.com/china/msdn/library/dnwmt/html/WMPlayer_9_SDK_Intro.asp#wmplayer_9_sdk_intro_topic3

微软媒体播放器SKIN制作教程之（二）——XML热身
这节主要简单谈一谈什么是XML，与媒体播放器本身的XML制作方法关系不大，熟悉XML的朋友可以略过不看。
什么是XML（Extensible Markup Language）？
就象HTML是定义格式的一样，XML是用来定义数据的，微软媒体播放器用到的XML非常简单，我们了解一小部分就可以了。官方的文档如果你有兴趣看，可以到 http://www.w3.org/XML/看，不过官方的文档总是比较乏味，做SKIN并不需要那么多乏味的细节，我们还是先秀一个最简单的XML文件（demo.xml），打开记事本，输入以下的文本：
<?xml version="1.0" encoding="GB2312" ?>
<甜品>
<冰淇淋>
<颜色>柠檬黄</颜色>
<口味>微酸</口味>
</冰淇淋>
</甜品>
用IE浏览器打开这个XML文件（后缀一定要是XML），你会看到如下的效果：

点击浏览该文件

如果点击那个减号，还可以折叠这个树状结构的东东——呵呵，把XML文件暂时理解为一棵树就对了。另外，实际的应用中XML标记绝大多数都是使用英文的，我这里用中文是为大家看起来比较方便。
首先解释这句：<?xml version="1.0" encoding="GB2312" ?>
它表明这是一个XML文件（废话？），如果你的文件中有中文，encoding="GB2312"是必不可少的，当然，可加的东东还很多，不过我们现在就先说这些（秘密：媒体播放器的XML根本不用这一句，这句是方便你在IE中看文件用的）。
其它的标记都是成对出现的，是不是和HTML很象？不过XML更严格，必须要成对出现，否则就会出错。其中“<甜品></甜品>”是这个文件的根元素，只能有一个哦！象“<冰淇淋></冰淇淋>”和“<颜色></颜色>”这样的叶子则可以有好多个，还可以嵌套，它的目的只有一个：用来描述你所有的甜品。我们再加一个冰淇淋和一个水果拼盘：
<?xml version="1.0" encoding="GB2312" ?>
<甜品>
<冰淇淋>
<颜色>柠檬黄</颜色>
<口味>微酸</口味>
</冰淇淋>
<冰淇淋>
<颜色>草莓红</颜色>
<口味>甜</口味>
<装饰>一把小伞</装饰>
</冰淇淋>
<水果拼盘>
<水果>
<西瓜 价钱="便宜的"/>
<西瓜 价钱="便宜的" 质量="生的"/>
<蕃茄 质量="洗净的"></蕃茄>
</水果>
<装饰>塑料小勺一把</装饰>
</水果拼盘>
</甜品>
发现什么变化没有？西瓜和蕃茄有了“价钱”和“质量”的属性了，每片叶子都可以有不止一个属性，其它程序调用它们时会用到这些属性，另外“<西瓜 价钱="便宜的" />”和“<西瓜 价钱="便宜的"></西瓜>”是一样的，中间没内容当然就简写啦，这种简写也代表标记是成对的，并不意味着标记可以不成对，切记！
关于XML这种标记语言就讲这么多，但愿你没有被我的冰淇淋和西瓜搞晕……
唉，其实只要记住XML是用来表述数据的就可以了……

微软媒体播放器SKIN制作教程之（三）——准备图片
要做一个最简的SKIN，我们只需要准备三张图片：

点击浏览该文件

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

点击浏览该文件

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

点击浏览该文件

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

微软媒体播放器SKIN制作教程之（四）——媒体播放器用到的XML
微软媒体播放器SKIN所用的XML有特定的标记，我们先搞个最简的说明一下，用记事本建立如下的文本文件：
<THEME>
    <VIEW
        clippingColor = "#FF0000"
        backgroundImage = "background.gif"
        titleBar = "false"
        scriptFile = "demo.js">
  
        <BUTTONGROUP
            mappingImage = "map.gif"
            hoverImage = "hover.gif">
                
        <PLAYELEMENT
            mappingColor = "#FF00FF" />
                          
        <STOPELEMENT
            mappingColor = "#00FFFF" />

        <BUTTONELEMENT
            mappingColor="#00FF00"
            upToolTip="打开文件"
            onClick="openFile()"
            enabled="true"/>
                
        </BUTTONGROUP>
  
    </VIEW>
</THEME>
“THEME”就是这个XML文件的根元素，“VIEW”是在这个根元素下的一个视觉元素，这个视觉元素包含一个按钮组“BUTTONGROUP”，而这个按钮组又包含三个按钮：一个是用来播放音乐的“PLAYELEMENT”；一个是用来停止播放的“STOPELEMENT”；还有一个“BUTTONELEMENT”是用来打开音乐文件的。
详解一下上面这些元素的部分属性：
clippingColor = "#FF0000"：这是让SKIN的圆角透明，关键色#FF0000；
backgroundImage = "background.gif"：这是SKIN的背景图像；
titleBar = "false"：不显示媒体播放器自带的菜单；
scriptFile = "demo.js"：指定SKIN所用的JS文件；
mappingImage = "map.gif"：SKIN所用的蒙板图片，可以设定按钮的形状；
hoverImage = "hover.gif"：鼠标移到按钮上时显现的图片；
mappingColor = "#FF00FF"：蒙板上关键色为#FF00FF的区域显示为播放按钮；
upToolTip="打开文件"：鼠标移上去时出现的提示文本；
onClick="openFile()"：点击时调用demo.js里的openFile()函数；
OK，是不是很EASY呢？现在我们把这个文本文件的后缀改为wms，呵呵，这个SKIN就差一个JS文件了，我们的下一步教程就是来写这个JS文件。

微软媒体播放器SKIN制作教程之（五）——媒体播放器用到的JS
用记事本建立如下的文本文件：
function openFile(){
media = theme.openDialog("FILE_OPEN","FILES_ALLMEDIA");
 if (media) {
  player.URL = media;
 }
}
学过javascript的朋友看懂这段绝对是没有问题的，这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。
现在，把这一小段脚本存为demo.js，这样，我们的SKIN就基本制作完毕了。
最后，我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件，再将zip后缀改为wmz，一个最简单的媒体播放器SKIN就搞定了！
双击它看看效果吧，不过因为这个SKIN太简单了，我们没做关闭按钮和其它的东东，大家可以在界面上点右键看微软的默认菜单来操作。

微软媒体播放器SKIN制作教程之（六）——常用参数
注：所有的说明均基于 Windows Media Player 7.0以上的媒体播放器
列一些对象元素先：
Ambient Attributes（环境属性）：除非有特殊注解，否则用于所有SKIN元素。
Ambient Event Handlers（环境事件句柄）：可以被大多数SKIN元素执行的事件句柄。
Ambient Event Attributes（环境事件属性）：当一个事件被激活时，详述播放器状态的属性。
AUTOMENU（自动菜单）：在SKIN中提供一种显示快速访问面板的途径。
BUTTON（按钮）：一个标准按钮
BUTTONELEMENT（按钮元素）：按钮组（BUTTONGROUP）中的一个按钮
BUTTONGROUP（按钮组/容器元素）：一组按钮元素
COLUMN（列）：在播放列表控件里描绘一列
CONTROLS（控制）：从SKIN中访问控制对象（Controls object）
CUSTOMSLIDER（自定义滑动条）：一个自定义的滑动条控件
EDITBOX（编辑框）：SKIN中用户可以进行输入的文本框
EFFECTS（可视化效果）：控制可视化效果集的元素
EQUALIZERSETTINGS（均衡器）：可操纵图形化均衡器的元素
ITEM（项）：列表框（LISTBOX）或弹出列表中的一项
LISTBOX（列表框）：可让用户从列表中任选一项
PLAYER（播放器）：在SKIN中访问播放对象（Player object）
PLAYLIST（播放列表）：在SKIN中显示播放列表
POPUP（弹出列表）：可让用户从列表中任选一项
PROGRESSBAR（进度条）：提供用水平或垂直的控件显示进度信息的方法
SETTINGS（设置）：在SKIN中访问设置对象（ Settings object ）
SLIDER（滑动条）：滑动条控件
SUBVIEW（子视图/容器元素）：在一个视图（view）中可以被移动或隐藏的小单位。
TEXT（文本）：包含文本的控件
THEME（主题/容器元素）：唯一识别一个SKIN的主元素（也就是XML文件的根）
VIDEO（视频）：显示视频窗口的元素
VIDEOSETTINGS：允许进行不同视频设置的元素。
VIEW（视图/容器元素）：包含SKIN的UI细节，可以THEME中定义多个VIEW
自已从视觉效果的考虑瞎定义的容器元素是指在经常含有子元素的元素，呵呵，所以虽然LISTBOX等也有子元素，但并未列为容器元素。

光有对象是肯定不行的，诸如滑动面板之类的特效可不是把对象摆上来就能完成的，我们需要写一些Jscript来处理事件，微软媒体播放器包含三类事件：

外部事件（External Events ）：可以用来响应用户动作的事件。
外部事件列表：
load  dblclick  mouseover
close  error  mouseout
resize  mousedown  keypress
timer  mouseup  keydown
click  mousemove  keyup
外部事件在使用时前面一定要加上“on”，给个例子就很明白啦：
onclick = "JScript: player.URL = '' http://www.chinaui.com/lalala.wma'' ; "
这句是在用户点击某一元素时让媒体播放器播放 http://www.chinaui.com/lalala.wma这个文件。呵呵，这些事件大家都不陌生吧。

内部事件（Internal Events ）：改变播放器内部属性或事件的事件。
内部事件列表：
事件类别 举例说明
播放器属性变化（Player Property Changes） <SLIDER id="mySlider" value="wmpprop:player.Controls.currentPosition" />
这句让滑动条的值与currentPosition的属性值关联起来了。
Wmpprop就象一个监听器，你可以通过它监听到播放器许多属性的变化，只要在冒号后面写上想监听的播放器属性值就可以了。
播放器方法变化（Windows Media Player Method Changes） <BUTTON  enabled="wmpenabled:player.Controls.Play();" />
这句的意思很简单：只有当音乐正在播放时才让这个按钮处于可用状态。
wmpenabled和wmpdisabled非常象wmpprop，可是它只能用于支持isAvailable方法的控制对象（Controls Object）
SKIN属性变化（Skin Attribute Changes） <TEXT value_onchange = "JScript: player.Settings.Volume = myText.value">
这句：文本框值变化时根据变化来变更播放器的音量。
其实这类功能两种事件都可以实现： wmpprop或 _onchange。
如果是wmpprop就这么写 ： <TEXT ... value="wmpprop:mySlider.value">。
注意：不要用在播放器方法中应用wmpprop ，  也不要在播放器属性中应用wmpenabled 或wmpdisabled，以免出现不可预期的后果。

二级事件（Secondary Events）
二级事件列表：
altKey  fromElement  shiftKey
button  offsetX  srcElement
clientX  offsetY  toElement
clientY  screenX  x
ctrlKey  screenY  y
keyCode  
呵呵，这些事件大家应该也不陌生，具体的用法举个例子就明白了：
wasAlt = event.altKey ;
if (wasAlt = true)
{
player.URL = '' http://www.chinaui.com/lalala.wma''
}
这个监测用户是否按下了alt键，如果按下，就让媒体播放器播放 http://www.chinaui.com/lalala.wma这个文件。


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