Foobar2000音乐播放器教程(三)—— 皮肤修改
foobar2000吧
全部回复
仅看楼主
level 8
wosgar 楼主
写在前面:
1) 若你是新手,在阅读此篇之前请先阅读本教程第一篇中涉及到皮肤的内容;
2) 本篇内容并不直接告诉你怎么修改皮肤,而是通过一系列练习让你自己知道如何修改皮肤;
练习中可能用到的插件:foo_ui_columns.dll、foo_uie_panel_splitter.dll、foo_uie_elplaylist.dll、foo_uie_wsh_panel_mod.dll
1 皮肤元素——面板
FB的皮肤是由面板构成的。为了便于理解,我们可以将面板分为两大类:纯面板和容器类面板。两者最大的区别在于容器类面板的内部还可以插入其它面板,而纯面板不能。下面将用到的面板栈分离器是容器类面板,而ELPlaylist是纯面板。因为你可以在面板栈分离器内插入ELPlaylist,但你不能在ELPlaylist里面插入面板栈分离器。
通常我们会在容器类面板中插入若干个纯面板,然后通过脚本代码来控制纯面板何时显示,以及显示的位置,也就是说容器类面板通常充当布局的角色。而纯面板用于实现某一具体的功能,如可将WSH面板设计成播放列表切换器,使用ELPlaylist面板实现播放列表的功能。
2 面板布局
请先将你当前的皮肤配置信息导出,以免进行下列操作时把现有的皮肤给搞丢了。同时确保你现在的FB中至少有一张播放列表里面是有歌曲的。
接着请打开参数选项窗口,左侧点击“显示-分栏用户界面”,右侧激活“布局”选项卡,再点击“重置”按钮,确认后应该会变成下图的样子,将面板列表(就是下图框框内的东东)中除第一块面板(水平分离器)外的其它面板统统用右键将其删除。
然后在第一块面板上右击选择“更改基本属性-分离器-面板栈分离器”,接着在第一块面板上右击选择“插入面板-分离器-面板栈分离器”, 然后在第二块面板上右击选择“插入面板-面板-播放列表切换器”,再在第二块面板上右击选择“插入面板-播放列表视图-ELPlaylist”。
两次插入之后的截图:
接下来,选中第二块面板,点击“配置”按钮,激活“面板列表”选项卡,将下面列表中的第一块列表的标题改为“playlist_switcher”, 并选中“强制布局”;第二块列表的标题改为“playlist”,同样选中“强制布局”。
然后激活“脚本-每音轨更新”选项卡,在里面输入下面两行语句:
$movepanel_c(playlist_switcher,0,70,100,$sub(%ps_height%,70))
$movepanel_c(playlist,100,70,$sub(%ps_width%,100),$sub(%ps_height%,70))
确定之后回到主界面,你将看到类似下图的效果:
语句解释:
%ps_height%变量
%ps_height%是全局变量,表示母面板的高度。因为你现在打开的是第二块面板的配置窗口,所以这里的母面板指的是第二块面板的高度。如果没有指定这块面板的位置和尺寸,它就会默认地占据整个播放器界面。
$sub函数
sub是英文“相减”的缩写,$sub(80,30)就是80-30,返回值是50。$sub(%ps_height%,70)意思是将母面板的高度减去70。
$movepanel_c函数
movepanel英文“移动面板”的意思,该函数用于将某一块面板移动到母面板的指定位置上,同时还指定了该面板的宽与高。语法:
$movepanel_c(面板标题,x坐标,y坐标,面板宽度,面板高度)
理解了这些,你应该就能看懂下面这条语句了吧:
$movepanel_c(playlist_switcher,0,70,100,$sub(%ps_height%,70))
它的意思是将playlist_switcher(也就是播放列表切换器)这块面板放置在与x轴距离为0,与y轴距离为70的位置上,且将该切换器的宽度设置为100,高度设置为:母面板的高度减去70。最终的效果是该切换器显示在FB界面的左侧,且宽度为100。
2013年11月17日 16点11分 1
level 8
wosgar 楼主
本楼稍后将给出教程其它部分及皮肤下载链接。
2013年11月17日 16点11分 2
Zetro_Wosgar皮肤:https://tieba.baidu.com/p/2711106215,在此可找到我的百度云地址,里面有PDF档的FB完整教程
2013年11月20日 12点11分
回复 wosgar :入门问答 https://tieba.baidu.com/p/2711029181
2013年11月17日 16点11分
2013年11月17日 16点11分
2013年12月11日 13点12分
level 8
wosgar 楼主
此楼自用,勿在此回复。
2013年11月17日 16点11分 3
注意:楼主在将代码粘贴到网页上时可能丢失了部分空格或者出现了其它字符问题,若你把网页上的代码粘贴到FB上可能就会出错。因此建议到上面的百度云中下载此系列教程的PDF版文件,将PDF中的代码粘贴到FB上应该就不会出现字符问题了。
2013年12月11日 13点12分
level 8
wosgar 楼主
此楼自用,勿在此回复。
2013年11月17日 16点11分 4
level 8
wosgar 楼主
---------------------------------------
2013年11月17日 16点11分 5
level 8
wosgar 楼主
3 绘制矩形
打开第二块面板的配置窗口,激活“脚本-每音轨更新”选项卡,继续输入下面语句:
$drawrect(10,15,200,130,100-50-170,255-0-255,)
确定后回到主界面你就能在界面上方看到一个矩形了。
语句解释:
$drawrect函数
drawrect英文意思是绘制矩形,语法:
drawrect(x坐标,y坐标,矩形的宽度,矩形的高度,矩形的填充颜色,矩形的边框颜色,)
注意:回括号前还有一个逗号哟。本节开头的那条语句的意思是在与x轴距离为10,与y轴距离为15的位置上绘制一个宽度为200,高度为130的矩形,该矩形的填充颜色为紫色,边框颜色为粉红色。
填充颜色和边框颜色中的一种颜色可以空在那里不填。如下面的语句将绘制一个空心矩形。
$drawrect(10,15,200,130,,255-0-255,)
也许你会问:“我怎么知道255-0-255表示粉红色呢?”。教你个方法:打开EXCEL软件(别告诉我你不晓得什么是EXCEL哈~~),按照下面两张图的方式在相应框中分别输入255、0、255,你就会看到粉红色啦。
有时你会看到颜色代码含有4个数字,如:100-50-170-80,最后多出来的一个数字用于表示不透明度,值越大,越不透明。值为0表示完全透明,值为255表示完全不透明。
4 添加按钮
打开第二块面板的配置窗口,然后激活“脚本-每音轨更新”选项卡,继续输入下面语句:
$puts(skin_path,%ps_foobar2000_path%\skins\Zetro_Wosgar\)
$imagebutton(20,30,,,$get(skin_path)buttons\bt_prev.png,$get(skin_path)buttons\bt_prev_h.png,COMMAND:播放/上一首)
效果:
点击这个按钮就能切换到上一首歌了。
语句解释:
$puts与$get函数
$puts函数用于把值存储在临时变量里, $get函数则从临时变量里取出值。如:
$puts(a,50)
$sub($get(a),20)
上面第一条语句的意思是把50存储在a里面,第二句意思是把a里面的值取取来,然后减去20,即:50-20。
%ps_foobar2000_path%
这是全局变量,用来表示FB的FB根目录。
$puts(skin_path,%ps_foobar2000_path%\skins\Zetro_Wosgar\)
$get(skin_path)buttons\bt_prev.png
上面的第二条语句等同于:
%ps_foobar2000_path%\skins\Zetro_Wosgar\buttons\bt_prev.png
如果你的FB放置在D:\program files (x86)\Foobar2000_Wosgar中,那么上面这条语句就等同于:
D:\program files(x86)\FB_Wosgar\skins\Zetro_Wosgar\ buttons\bt_prev.png
按照这个路径你就能找到一张名为bt_prev的图片。(前提是你要有Zetro_Wosgar这个皮肤文件包)
$imagebutton函数
该函数用于绘制一个图片按钮,语法:
$imagebutton(x坐标,y坐标,按钮宽度, 按钮高度,鼠标不在按钮上时显示的图片, 鼠标在按钮上时显示的图片,点击按钮时执行的命令)
对照该语法请自行理解本节开头的那条语句。
5 局部变量与全局变量
1) 使用$puts定义的是局部变量,如$puts(a,50);使用init_ps_global初始化的是全局变量如:$init_ps_global(mode,1)。注意:若在面板栈分离器设置窗口的“全局变量”选项卡中已存在全局变量mode,则FB不会再执行语句:$init_ps_global(mode,1),若想将mode的初始化改为2,需先将“全局变量”选项卡中已存在的mode删除,再使用语句: $init_ps_global(mode,2)。
2) 要引用局部变量需使用$get函数,如$get(a);而使用两个%号就能使用全局变量了,如$sub(7,%mode%)。
3) 修改局部变量还是要使用$puts函数,如将a改为100:$puts(a,100);修改全局变量则要用SETGLOBAL关键词,如将mode改为33:SETGLOBAL:mode:33。
FB执行完一块面板内的代码后就会该代码内使用到的局部变量销毁掉,但是会把其中的全局变量保存起来,这样其它面板也可以使用该面板的全局变量,此外,在关闭FB时它会先将全局变量保存起来,这样下次再打开FB时还能继续使用上一次关闭FB时保存的全局变量的值。
2013年11月17日 16点11分 6
垂直分离器为什么删不了
2015年09月29日 03点09分
用$imagebutton显示图片时怎样加文字提示?就是当鼠标移到图片时会显示“下一首”等文字提示
2016年12月06日 07点12分
@somi 我忘了用这个命令能否实现文字提示功能,但WSH一定可以。若你有兴趣,可以在第2楼下载Zetro_Wosgar皮肤,在播放顺序按钮中右击,选择“Configue”,找到相关代码研究一下。
2017年04月04日 08点04分
level 8
wosgar 楼主
本篇发布完毕!
若遇到问题,请先将本贴认真读一遍,若问题未解决,请阅读我写的FB教程的其它部分或者到本吧精品区中找答案,仍未解决的,请试着问度娘。实在解决不了的,可以把你的问题贴到此贴中,注意:为了有助于别人理解你的问题,在能截图的情况下一定要截图说明啊!!
楼主QQ:418437958,楼主未主动邀你加Q时请勿加Q,邀你加Q时在验证信息中请注明你在本吧的昵称及你把问题贴在哪一楼。
2013年11月17日 16点11分 8
level 5
这个地方颜色怎么不统一了?旧版是和背景色一样的
2013年11月18日 01点11分 9
晕~你好好看一下外观设置面板中各按钮的作用。
2013年11月18日 09点11分
0.0古风迷同好冒个泡
2014年12月29日 06点12分
level 1
分离器里没有面盏分离器怎么办?谢谢
2013年11月20日 14点11分 10
你这问题针对教程中的哪个小标题?还有可否截图说明你想表达的意思?
2013年11月20日 14点11分
level 1
就这个 没面板栈分离器
2013年11月20日 15点11分 12
呵呵,不是这个么
2013年11月20日 15点11分
第一、检查你下的是不是foo_uie_panel_splitter.dll;第二、检查你是不是把插件放置在components文件夹中;第三、你有没有重启FB?第四、你会不会下载的是英文版插件?第五、你直接下载我二楼中的皮肤包,保证有此分离器。
2013年11月20日 16点11分
回复 wosgar :嗯谢谢
2013年11月21日 01点11分
level 1
要的插件都下好了
2013年11月20日 15点11分 13
level 5
添加按钮那一步 因为没有下那个皮肤 就在foobar2000根目录下自己创建了文件夹skins\Zetro_Wosgar\buttons\bt_prev.png和bt_prev_h.png 不过似乎不行的样子[狂汗]
2013年11月22日 14点11分 14
这个问题我忘了回复??请先确认buttons文件夹内是否有名为bt_prev和bt_prev_h的png格式的图片,另外,把你的代码截图给我看。
2013年12月16日 12点12分
level 8
顶一下,先下载,再慢慢学习。谢谢楼主。
2013年12月20日 07点12分 15
level 1
LZ在用的求打包 小白看不懂怎么改[email protected]
2014年02月08日 17点02分 17
见二楼链接
2014年02月12日 14点02分
level 11
[真棒]
2014年02月08日 22点02分 18
level 3
怎么回事?
2014年02月25日 06点02分 19
缺少三个插件呗。另一个贴子《Foobar2000教程(一)——入门问答》有介绍如何正确地导入皮肤布局
2014年02月25日 12点02分
@wosgar [乖]能不能给个好点的声道频谱面板
2015年09月11日 06点09分
level 1
请问这个能实现这个功能么
在歌名和艺术家中间加上专辑。
2014年02月28日 06点02分 20
可以,但得改一下代码,而且加上去之后文字太多,会显得很拥挤。
2014年03月01日 03点03分
你敦
2014年05月03日 14点05分
level 1
弄来弄去,半透明效果没了,怎么设回来?
2014年03月01日 08点03分 21
我没弄过半透明效果,不懂。
2014年03月02日 13点03分
level 9
请教楼主:怎么加入媒体库?
2014年03月25日 06点03分 22
1 2 3 尾页