欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

程序员文章站 2022-07-04 08:55:50
射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程...

  射手影音是一款国产的播放器,旨在为国内用户提供一个开源的视频播放器。那么射手影音播放器怎么制作皮肤呢?感兴趣的童鞋来看看射手影音播放器皮肤制作教程吧!

  射手影音播放器怎么制作皮肤?

  一、了解影音皮肤设计框架

  同学们,现在开始给影音进行解剖,看看它的构造和我们人类有什么不同,解剖到任何区域我都由左往右一个个器官进行介绍,同学们要坚持住哦!

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

  区域1:

  影音的顶部,由顶部背景图片、logo文字图片、缩进系统按钮、缩小按钮、延展按钮(原始大小)、关闭按钮组成。

  区域2:

  影音的tips,先由tips背景图片,左边由放大1倍、放大2倍、标准画面(去上下黑边、去左右黑边)、音轨选择、画质增益,右边由正常播放(单曲循环、列表循环)、亮度对比度、截图、全屏切换(原始缩进)、窗口置前(窗口正常)、关闭按钮(全屏时才出现)组成。

  区域3:

  影音的控制栏,先是控制栏背景图片,剩下的先分为左、中、右三个部分来观察它吧

  左边由logo、分享按钮、字幕左箭头、字幕按钮、字幕右箭头

  中边由上一段、快退、停止、播放(暂停)、步进、快进、下一段

  右边由打开文件、播放列表、设置面板、声音开启(静音)、声音大小调节按钮、声音调整背景图组成

  区域4:

  影音的边框由影音边框组成组成

  区域5:

  影音的打开文件部分,由影音打开文件按钮组成

  这个打开文件与区域3右边的打开文件功能一样但视觉大小有区别

  二、影音皮肤设计制作要点

  上一节我们对影音进行了全面解剖,额~大家小心点不要踩到,不然影响后期拼装,配合一下,谢谢 ……

  ok,知道了影音的组成元素,要记住他们哦,麻雀虽小,五脏还是要全的!

  背景图片制作方法:

  (在skins文件甲下创建一个framecfg.dat)

  区域1:

  顶部背景图片

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

  分为abc三个部分组成一张图,a与c同等宽度与高度,b则横向无限延展

  编辑framecfg.dat

  //标题栏

  captionheight:31; //标题栏框横向延展图高度b区域

  lcaptionthickwidth:3;//标题栏框左边图宽度a区域

  rcaptionthickwidth:3;//标题栏框右边图宽度c区域

  区域2:

  tips背景图片,为一个颜色块来做横向无限延展背景图

  区域3:

  控制栏背景图片

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

  切掉两边取中间a部分1px图横向无限延展

  声音调整背景图

  作为贴图背景

  区域4:

  影音边框

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

  取4个角,4个1px边做为无限延展

  编辑framecfg.dat

  //框架

  framecornerwidth:3;//圆角的宽度

  framecornerheight:3;//圆角的高度

  lframethickheight:1;//左边框纵向延展高度

  tframethickwidth:1;//顶部框横向延展宽度

  rframethickheight:1;//左边框纵向延展高度

  bframethickwidth:1;//底部框横向延展宽度

  按钮图片制作方法:

射手影音播放器怎么制作皮肤 射手影音播放器皮肤制作教程

  所有的可操作按钮只需要做一张显示图即可,操作的状态效果系统会自动实现,减轻了很大的工作量,还不错吧

  制作规范:

  图片格式:bmp

  图片尺寸:无

  图片命名:需与原始文件名对应上,见影音元素命名表

  图片元素命名表:

  区域1:

  顶部背景图片 caption

  logo文字图片 captiontext

  缩进系统按钮 btn_mintotray_single

  缩小按钮 minimize_single

  延展按钮 maximize_single 原始大小 restore_single

  关闭按钮 close_single

  区域2:

  tips背景图片 topbackground

  放大1倍 top_1x_single

  放大2倍 top_2x_single

  标准画面 top_normal_wider_single

  (去上下黑边top_normal_single 、 去左右黑边top_letterbox_wider_single)

  音轨选择 top_audio_single

  画质增益 top_video_single

  正常播放 top_nocycle_single

  (单曲循环top_singlecycle_single 、 列表循环top_allcycle_single)

  亮度对比度 top_gamma_single

  截图 top_capture_single

  全屏切换 top_fullscreen_single (原始缩进top_restore_single)

  窗口置前 pinail2_single (窗口正常pinail_single)

  关闭按钮 top_close_single

  区域3:

  控制栏背景图片 bottombackground

  左边由

  logo splayer

  分享按钮 btn_share_single

  字幕左箭头 btn_sub_delay_reduce_single

  字幕按钮 btn_sub_single

  字幕右箭头 btn_sub_delay_increase_single

  中边由

  上一段 btn_prev_single

  快退 fast_backword_single

  停止 btn_stop_single

  播放 btn_play_single (暂停 btn_pause_single)

  步进 btn_step_single

  快进 fast_forword_single

  下一段 btn_next_single

  右边由

  打开文件 btn_openfile_small_single

  播放列表 btn_playlist_single

  设置面板 btn_setting_single

  声音开启 volume_single (静音 muted_single)

  声音大小调节按钮 volume_tm_single

  声音调整背景图 volume_bg

  区域4:

  影音的边框由影音边框组成 framecorner

  区域5:

  影音打开文件按钮 btn_bigopen_single

  其他元素:

  预览图 皮肤名称 single

  影音标示 watermark2

  三、上传

  步骤:

  1:整理好图片元素,对应好图片名

  2:在splayer\skins下自建文件夹命名为xxxx

  3:再将整理好的图片元素放入xxxx中

  4:打开射手影音播放器右键 界面==》选择xxxx皮肤

  5:恭喜您已经成功的做了一套符合自己的皮肤了