请选择 进入手机版 | 继续访问电脑版

迅雷论坛

迅雷VIP尊享版 今日: 0|主题: 10337|版主: Koolee 小井爱笑 人头马XO

查看: 8279|回复: 5

[产品建议] 教你怎么制作属于自己动态尊享皮肤-让个性炫起来

[复制链接]
发表于 2013-8-25 22:38 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转迅雷论坛

您需要 登录 才可以下载或查看,没有帐号?注册

x
本帖最后由 七龙帅 于 2013-9-8 00:08 编辑

好久没换个皮肤了,更新了新版了之后发现竟是支持动态皮肤。
3.jpg

“解剖”了下看,发现接口是开放的(这点迅雷很给力),自己便尝试做了一套,效果还不错。

不多说, 下面还是让我们说说怎么做好了(也不知官方是否有给出正式的教程。如果有,这里便是重复些心得;如果没有,这里便是抛砖引玉,多多指教)

一、 首先,先说一下文件结构,直接看图

4.jpg
动态的皮肤结构应该至少包含三类文件,背景图、动画文件、以及配置文件(skin.xml)
一般,图片文件都放在于image文件夹,动画文件都放在flash文件夹。配置文件skin.xml则直接存放在根目录。

二、 配置文件的讲解
先来看看我的skin.xml
  1. <thunder_skin >
  2. <skin id='default' name='image' type='bkg' >
  3. <title>
  4. <text>动态-凌波丽·紫</text>
  5. </title>
  6. <bkg>
  7. <image>image\zi.png</image>
  8. </bkg>
  9. <ani>
  10. <flash>
  11. <loop>true</loop>
  12. <left>0</left>
  13. <top>0</top>
  14. <width>1280</width>
  15. <height>140</height>
  16. <src>flash\1.swf</src>
  17. <center>true</center>
  18. <framelimit>24</framelimit>
  19. </flash>
  20. </ani>
  21. <default_color_scheme>violet</default_color_scheme>
  22. <owner_skin >default::default</owner_skin>
  23. </skin>
  24. </thunder_skin>
复制代码
<thunder_skin>这个就不解释了,字面意思
<skin>是一个皮肤的开始
<title>头部,可以包含<text>子节点即皮肤名字,text直接显示在皮肤中心按钮旁边如 5.jpg
<bkg>这里可设置背景图片(包含在image标签内),背景图的分辨率大小官方的建议好像是1280x800
<default_color_scheme>设置主题颜色,有8种取值:blue、cyan、gray、green、pink、red、violet、yellow
<owner_skin >直接default就可以了
以上的这些,如果以前做的迅雷7皮肤的应该都懂了。
下面开始说这次的重点。
如果你对比一下,你就会发现,上面讲解的少了一个标签<ani>。
没错,这就是用来专门设置动态属性的。
<ani>标签可以包含<flash>子标签
如上面贴出的
  1. <flash>
  2.   <loop>true</loop>
  3.   <left>0</left>
  4.   <top>0</top>
  5.   <width>1280</width>
  6.   <height>140</height>
  7.   <src>flash\1.swf</src>
  8.   <center>true</center>
  9.   <framelimit>24</framelimit>
  10.    </flash>
复制代码
这里对这些属性进行详解
<loop>设置动画的播放是否循环。取值true和false。
<width>设置动画文件的宽度
<height>设置动画文件的高度
<left>设置动画左外边距边界与其包含块左边界之间的偏移。
<top>设置上外边距边界与其包含块上边界之间的偏移。
以上两个属性有些抽象么。
我画了个草图,这样你应该能多多少少了解一些

lefttop.jpg

你的显示效果很大一部分取决于上面这四个属性:left、top、width、height,要想显示得好那就要自己慢慢地调了。

<src>指示动画的相对路径(这点同image)
<center>设置是否是局中显示。可缺省(即删掉该行)。
<framelimit>如果你的动画显示过快你可以调整下这个值。

好了,设置完这些你的动态皮肤基本就差不多了
<ani>标签下,貌似可以设置多个<flash>,最多多少这要官方才能回答。
如果多了这会有什么影响,我想首先应该是内存的使用问题,具体这还是要问官方。反正个人觉得这种能少就少,最好就是不超过2。
另外,也不推荐使用太过庞大的flash,不然到时候崩了那就不要推迅雷和楼主了。

三、 打包。直接将上面第一步给出的这两个文件夹和xml文件压缩为zip包,最后,将扩展名改为.thunderskin。打包完成后,双击看看。(动态皮肤在皮肤中心的缩略图那贴个笑脸)

至此,教程结束!
有不足还望大家指出!

四、最后再秀一下楼主自己的完成品:

0.jpg

动态效果,应该是这样:
1.gif
(我承认,这图是截得很渣。。。动态图截取什么的

下载:
http://kuai.xunlei.com/s/8gsb7WyRLScg8NcR9ibbkQ

09-08,
终于升级了然后能附件了,先前由于大小限制上不了。。。
至于快传地址。。。比较懒。。。就让它自然死吧。

动态凌波丽紫.zip

1.22 MB, 下载次数: 125, 下载积分: 手雷 -1 颗

点评

技术贴,赞!奖励迅雷VIP尊享版限量定制马克杯一只,迅雷白金会员季卡实体卡一张,站内信告知我收件信息。  发表于 2013-8-26 10:17
回复

使用道具 举报

发表于 2013-8-25 22:50 | 显示全部楼层
呃。。。楼主我电脑被黑了,重启,好在发出去了~
补充: 代码结构这样看应该好看些,编辑器里的代码粘上去后太乱了,大概是我不会用这个。
6.jpg
回复 支持 反对

使用道具 举报

发表于 2013-8-26 17:26 | 显示全部楼层
不错 收下了 很给力
回复 支持 反对

使用道具 举报

发表于 2013-8-27 16:04 | 显示全部楼层
beiank 发表于 2013-8-26 17:26
不错 收下了 很给力

感谢支持
回复 支持 反对

使用道具 举报

发表于 2013-8-28 16:29 | 显示全部楼层
下载也回个帖
回复 支持 反对

使用道具 举报

发表于 2014-2-28 11:47 | 显示全部楼层
谢谢楼主了,可以做自己喜欢的皮肤了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

客服帮助 版块列表 返回顶部