
ttplayerskinhelp.docx
22页2008年12月25日更新:增加歌曲的缓冲进度条皮肤元素命名:progress_fill2.bmp一、了解千千静听皮肤制作是怎么一回事?1、如果您是位从未接触过皮肤制作的人,那么请先仔细看下面的这段话:如何把设计好的皮肤效果图应用到千千静听软件上去,有两个主导思想您应该了解:一个是需要把效果图上面的控件(或称按钮)单独切出来,另一个是需要把上一点说的控件(或称按钮)的坐标找到,为它精准定位,是不是听的有点眉目了,那么我们接着往下讲2、千千的皮肤位于安装目录下的Skin文件夹内,扩展名可以为.skn或.zip,实际上二者是一样的对于前者,可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名,依次点击"工具"-"文件夹选项"-"查看",再把"隐藏已知文件类型的扩展名"前的小勾去除即可),然后将其解压到单独的文件夹,进入该文件夹,可以发现里面包含了许多bmp格式的图片和若干个xml文件,他这些文件便是皮肤的组成部分了,bmp图片是各个窗口的背景及按钮图片,Skin.xml则是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开的。
好,了解以上的基础知识后,我们就开始学习实际的制作过程 二、开始制作啦! 按照四个步骤进行:(A)切图(B)修改配置文件(C)打包成皮肤文件(D)应用皮肤(A)切图:用PS或FW打开设计效果图,整体观察一下,下面讲一下哪些图片是要单独切出来的以及图片的命名 一、主窗口的控件(1)主窗口背景 命名:player_skin.bmp重点:边缘小圆角的镂空处理,把镂空填充成(#ff00ff)这个颜色,要细心处理这部分哦,边缘要1像素1像素的填充(如上图,镂空部分的颜色处理)(2)最小化按钮(4个状态)命名:minimize.bmp重点:凡是功能按钮都要做4种状态,并把这四种状态做在一张图里,存储成.BMP格式,注意每种状态按钮他的宽度和高度要一致,说一下每种状态代表的含义第一个状态:自然状态第二个状态:鼠标划过时的状态第三个状态:鼠标按下去时的状态第四个状态:按钮失效时的状态(举个例子,比如播放列表只有一首歌曲,那么“下一首”按钮就是无法点击的,那么此时这个按钮状态就是失效时的状态)3)迷你模式按钮命名:minimode.bmp 同上,这里不再赘述了4)关闭按钮命名:close.bmp (5)播放进度滑块(本例中播放进度条上的小圆按钮)命名:progress_thumb.bmp 重点:这个小按钮是需要脱离背景部分单独扣出来的,那么镂空部分需要如何处理才能最终在界面上显示出透明的效果呢,解决的办法和上面的大背景镂空处理一样就是把镂空填充成(#ff00ff)这个颜色,如上图。
6)播放进度填充背景图命名:progress_fill.bmp缓冲进度条填充背景图该进度条在听歌曲发生缓冲时出现,如果没有该元素,默认方式是会将进度条的颜色加深,作为缓冲条颜色显示命名:progress_fill2.bmp (7)播放列表窗口打开关闭按钮命名:playlist.bmp (8)均衡器窗口打开关闭按钮命名:equalizer.bmp(9)歌词窗口打开关闭按钮命名:lyric.bmp (10)“上一首”按钮命名:prev.bmp (11)“播放”按钮命名:play.bmp (12)“暂停”按钮命名:pause.bmp (13)“下一首”按钮命名:next.bmp (14)“打开播放文件”按钮命名:open.bmp(15)音量小喇叭按钮命名:mute.bmp (16)音量进度背景填充图命名:progress2.bmp (17)音量滑块同(5) 二、均衡器窗口的控件(18)开启按钮命名:eq_enabled.bmp (19)重设按钮命名:reset.bmp (20)配置按钮命名:eq_profile.bmp (21)关闭按钮,切图同主窗口上的关闭按钮(22)平衡器环绕声所有滑动的小按钮 同(5)(23)平衡,环绕填充背景命名:eqfactor_full2.bmp (24)均衡填充背景命名:eqfactor_full.bmp 三、播放列表窗口的控件(25)关闭按钮,同主窗口关闭按钮(26)工具条按钮,命名:playlist_toolbar.bmp 热点状态命名:playlist_toolbar_hot.bmp (27)滚动条上下按钮命名:scrollbar_button.bmp 重点:将上下按钮拼在一张图上制作(28)滚动条滑动按钮命名:scrollbar_thumb.bmp (29)滚动条背景命名:scrollbar_bar.bmp 四、歌词秀窗口的控件(30)关闭按钮,同主窗口(31)总在最前按钮命名:ontop.bmp 五、音乐窗窗口的控件 上图为千千音乐窗界面,其中用绿色边框套住的部分为显示部分,和皮肤设计无关,就是说我们要做的是绿色边框外的内容。
好,明确了制作部分,开始讲制作过程,首先,要制作一个窗口背景,就是图中显示的最外面的蓝色风格的窗口,像主窗口一样,不难理解,格式同样为.bmp,需要设置透明色背景(#FF00ff),注意圆角像素的处理然后制作窗口里的控件,上图中用红色框标出了所有控件,包括后退、前进、刷新、关闭、多选框、连接文字区其中后退、前进的功能是像网页一样的控制当前页面,并不是歌曲的后退、前进,不过也没影响,不多说了最后,还要制作一个按钮,用来打开音乐窗,按钮要做在主窗口上,做主窗口时别忘了留出地方哦...具体切图示例如下,大家一看就会明白啦:增加新的音乐窗和下载管理标签按钮很简单,只需在音乐窗代码块中加入如下2行代码:
可以参考下图来理解代码
Stereo 是立体声的字体设置Status是状态的字体设置Visual是视觉效果的设置,这里面只是简单定义了位置,更详细的设置请看Visual.xml文件
