webplayer9

WebPlayer9皮肤的制作一般要经过以下几步：

• 制作播放器的整体效果图。
• 切图，把需要的各个部分保存为.BMP格式(必须是.BMP格式)，并尽可能的优化。
• 在skin.ini中，设置每个图片在将来播放器皮肤中的坐标。(配合photoshop等工具测量出精确的坐标)
• 用我们提供的小工具把所有的皮肤文件以及配置文件压缩成.skin文件。
• 把播放器页面中"SkinURL"的值改为自己皮肤文件(.skin文件)的URL。播放，测试。

这一步，很简单。由于我们每个人看电影都要长时间的盯着屏幕，如果皮肤做的太艳，眼睛会受不了的。这一点稍注意一下就可以。 就以WebPlayer9的默认皮肤为标准，假设效果图我们已经制作完成。如图：

怎样切图呢？为了更好的理解，我们把WebPlayer9皮肤分为以下几个部分，如图：

第一部分，背景区。图中背景区又由红色虚线分成左、中、右三个部分。所以切图时也要分成三部分，左边和右边宽度固定，中间部分只需要切 1px宽就可以。(注：1px宽有时会有一些问题，建议切成2px宽)再把切好的图像保存成.BMP格式，三部分分别对应如下三个名字(注：名字必须一一对应)：

• OperationAreaBak_left.bmp(对应左边部分)
• OperationAreaBak_center.bmp(对应中间部分)
• OperationAreaBak_right.bmp(对应右边部分)

---

进度条区域，如上图。进度条有两种状态，"普通状态"和"已经播放过的状态"。每种状态又分别由左、中、右三部分构成。所以，这部分我们需要切 (3*2)+1个拖动滑块 共7个图。对应的名字如下：

• ProgressBar_left.bmp(对应普通状态_左边部分)
• ProgressBar_center.bmp(对应普通状态_中间部分)
• ProgressBar_right.bmp(对应普通状态_右边部分)
• ProgressBarPlayed_left.bmp(对应已播放状态_左边部分)
• ProgressBarPlayed_center.bmp(对应已播放状态_中间部分)
• ProgressBarPlayed_right.bmp(对应已播放状态_右边部分)
• drag.bmp(对应拖动滑块)

---

操作区按钮。每个按钮分别对应普通、鼠标移上去、鼠标点击后、点击后又移上去、不可用5种状态。所以这部分需要切5*4=20个图。对应的名字如下：

• play_normal.bmp(播放_对应普通状态)
• play_hover.bmp(播放_对应鼠标移上去状态)
• play_visited.bmp(播放_对应鼠标点击后状态)
• play_hover2.bmp(播放_对应点击后又移上去状态)
• play_NoUse.bmp(播放_对应不可用状态)
• pause_normal.bmp(暂停_对应普通状态)
• pause_hover.bmp(暂停_对应鼠标移上去状态)
• pause_visited.bmp(暂停_对应鼠标点击后状态)
• pause_hover2.bmp(暂停_对应点击后又移上去状态)
• pause_NoUse.bmp(暂停_对应不可用状态)
• stop_normal.bmp(停止_对应普通状态)
• stop_hover.bmp(停止_对应鼠标移上去状态)
• stop_visited.bmp(停止_对应鼠标点击后状态)
• stop_hover2.bmp(停止_对应点击后又移上去状态)
• stop_NoUse.bmp(停止_对应不可用状态)
• fs_normal.bmp(全屏_对应普通状态)
• fs_hover.bmp(全屏_对应鼠标移上去状态)
• fs_visited.bmp(全屏_对应鼠标点击后状态)
• fs_hover2.bmp(全屏_对应不可用状态)
• fs_NoUse.bmp(全屏_对应不可用状态)

---

声音区域。这部分由一个按钮(同上，也包括5种状态)，一个进度条(注：这个进度条宽度是固定的，所以切一个图即可)，还有一个声音滑块， 共7个图。对应的名字如下：

• volume_normal.bmp(声音按钮_对应普通状态)
• volume_hover.bmp(声音按钮_对应鼠标移上去状态)
• volume_visited.bmp(声音按钮_对应鼠标按下时状态)
• volumeNoUse_normal.bmp(声音按钮_对应静音时状态)
• volumeNoUse_hover.bmp(声音按钮_对应静音时鼠标移上去的状态)
• volume_process.bmp(音量进度条)
• volume_drag.bmp(音量滑块)

---

这一步，将配置每个图片在将来播放器皮肤中的坐标。复制WebPlayer9安装目录中skins\default\下的skin.ini文件到自己的皮肤目录中， 配置各个图片的坐标。下面将对每一个配置选项做详细说明：

• 播放进度条的x坐标,相对于整个控制栏的左边坐标而言，图1_0中绿色线：
• 播放进度条的y坐标,相对于整个控制栏的左边坐标而言，图1_0中黄色线：
• 播放进度条的长度(相对于控制栏宽度的百分比)，这个好理解
• 信息栏的左边的X坐标, 相对于整个控制栏的左边坐标而言，设置成"背景区左边部分"(OperationAreaBak_left.bmp)的宽度。
• 信息栏的右边的X坐标, 相对于整个控制栏的右边坐标而言(负值)，设置成"背景区右边部分"(OperationAreaBak_right.bmp)的宽度。注意，这是个负值。




• 信息栏的左边的Y坐标, 相对于整个控制栏的左边坐标而言，这个指信息栏的Y坐标，图1_1中绿色线。
• 信息栏的高度，图1_1中黄色线。




• 第一个控制按钮的X坐标, 相对于整个控制栏的左边坐标而言，图1_2中，第一个控制按钮是”播放“，所以其X坐标是图中黄色线。
• 第一个控制按钮的Y坐标, 相对于整个控制栏的左边坐标而言，图1_2中的绿色线。
• 每个控制按钮的间距，图1_2中的粉色线。




• 声音按钮的的X坐标, 相对于整个控制栏的右边坐标而言(负值)，图1_3中的黄色线。
• 声音按钮的的Y坐标, 相对于整个控制栏的坐标坐标而言，图1_3中的绿色线。
• 声音进度的进度的X坐标, 相对于整个控制栏的右边坐标而言(负值)，图1_3中的粉色线。
• 声音按钮的进度的Y坐标, 相对于整个控制栏的坐标坐标而言，图1_3中的蓝色线。

其余的一些配置选项都很简单，一看就能明白，故省略。

非常简单，把所有的图片文件连同Skin.ini配置文件都放到一个文件夹下，通过我们提供的小工具，生成.skin 文件。(注：这个文件越小，WebPlayer9加载皮肤时越快，WebPlayer9默认皮肤生成的.skin文件为51kb)

把生成的.skin文件放到服务器上，修改播放页面中的"SkinURL"值为新皮肤文件的URL。播放，测试。