文档库 最新最全的文档下载
当前位置:文档库 › qq2003_skin_diy

qq2003_skin_diy

QQ2003皮肤制作帮助手册

目录

一、制作皮肤相关文件概述 (2)

1.1 皮肤制作简易几步曲 (2)

二、各相关文件详解 (5)

2.1 config.xml文件 (5)

2.2 VBScript.vbs文件 (12)

2.3 skin.ine文件 (22)

三、相关文件使用函数解析 (23)

四、对应的皮肤中的具体图片 (30)

4.1 config.xml和VBScript.vbs用到的图片 (30)

4.2 Skin.ini用到的图片 (32)

五、不规则皮肤制作 (33)

5.1 config.xml文件 (33)

5.2 VBScript.vbs文件 (36)

六、皮肤制作总结篇 (43)

一、制作皮肤相关文件概述

朋友,你是否惊喜于QQ2003皮肤漂亮了许多,是否在心底已经开始对QQ皮肤的制作情有独钟、跃跃欲试了,呵呵,现在就让我们一起开始QQ2003皮肤制作的探索之旅吧。

首先让我们找到QQ安装路径下的一个名为“skins”的文件夹,打开后可以看到3个名称分别为“QQ2003”、“工业时代”、“花语”的文件夹。对了,你可能已经猜到了,这3个文件夹就分别对应目前我们的QQ2003自带的3种皮肤!

在整个QQ皮肤的制作过程中,会涉及到3个文件,下面我们将以“QQ2003”这个皮肤为例,为大家介绍。找到QQ安装路,打开\ qq \ skins \ QQ2003 \,可以看到这3个在制作皮肤过程中息息相关的文件:

1、config.xml:面板上除skin.ini文件定义之外的按钮、边框、背景等配置信息都

在此实现,各部分ID(名称标识)在此定义好后,在VBScript.vbs中会具体用到。

2、VBScript.vbs:QQ面板上各部分按钮的功能实现,在此实现与QQ之间的交互,同

时还负责确定各部分图片在面板中的定位(如新皮肤中涉及到的调整按钮位置、皮

肤提供的拉伸功能等需在此完成)。

3、Skin.ini:登陆QQ2003后,根据此文件加载面板上的分组folder(如“我的好友”、

“陌生人”“黑名单”等)和为QQ菜单(也叫系统菜单,包括“个人设定”、“系统

参数”等)等设定颜色。

1.1皮肤制作简易几步曲

制作皮肤过程中,需要从效果出发,为皮肤各个的部分搭配设计好的对应颜色,具体实现方法是将整个皮肤按照功能和效果的不同,分成很多部分,然后为每部分对应图片(在config.xml文件中为皮肤的各部分定义ID名称并且匹配使用过程中对应的各种图片)、重新按照自己的设计定位该部分在整个面板中的具体位置以及实现相应的功能(在VBScript.vbs文件中,为config.xml定义好ID的各部分和按钮定位在面板中的具体相对位置,并与QQ进行交互,实现各部分按钮的功能)。

总的来说,在创作新皮肤的过程中,只要在保证QQ2003面板上每个按钮、菜单和功能存在的前提下,面板中各按钮的相对位置(VBScript.vbs文件决定)以及对应的颜色及图片等(config.xml文件决定)可以依据个人风格尽情发挥。

为了保证QQ全部功能的实现,config.xml、VBScript.vbs和Skin.ini文件中一些代码是必须保留的,所以比较便捷的皮肤制作过程是在原有的文件基础上进行修改:

1、在\ qq \ skins \下创建文件夹,以自己欲制作的皮肤命名,如“似水流年”

2、挑选一种现有皮肤,如QQ2003,拷贝\ qq \ skins \QQ2003下的所有文件,保存到

\ qq \ skins \似水年华中

3、根据自己的皮肤设计需要,对应修改\ qq \ skins \似水年华中的相关部分,如:

A、改变面板某部分对应的图片:在config.xml文件中寻找该部分对应的ID和图

片(该图片和config.xml文件保存在相同路径下),然后用新的同名图片进行

替换。

B、改变面板中某部分或者按钮的相对位置:在config.xml文件中寻找该部分对

应的ID,然后在 VBScript.vbs文件中的sub Window_OnSize(cx,cy)函数中修

改对应该部分的位置定义代码。

所以可见,在config.xml文件中为皮肤的各部分定义的ID是连接config.xml

文件与VBScript.vbs文件的关键

C、改变面板上的分组folder(如“我的好友”、“陌生人”“黑名单”等)对应的

图片和folder上字体颜色等,改变QQ菜单、状态菜单、左右键菜单的颜色:

在skin.ini文件中依照注释找到相关部分,进行修改即可

4、当以上3个文件已经按照皮肤的设计需要修改完成,并且皮肤所需的图片也全部保存到相同路径到\ qq \ skins \似水年华下后,打开QQ系统菜单——更改皮肤,就可以看到自己刚刚保存的皮肤,如图1.1所示,进一步选择就可以看到自己制作好的新皮肤了!

图1.1 添加皮肤“似水年华”

在皮肤制作中,c onfig.xml文件为面板各部分定义了ID并对应了图片,这个ID是连接config.xml文件与VBScript.vbs文件的关键,因为在VBScript.vbs文件中将使用ID 确定各部分在面板中的具体位置及实现相关功能。

为了大家在皮肤制作中更加随心所欲、应用自如,我们还提供了QQ2003皮肤制作帮助手册供大家下载阅读。由于功能需要,将QQ面板中划分了很多部分,在config.xml文件中为众多部分定义了ID并对应相关图片,为便于大家阅读代码熟悉各ID对应面板中的具体位置,在第四章中,我们以QQ2003为例显示了各ID在面板中对应的具体图片;同时在第二章,我们对config.xml、VBScript.vbs和Skin.ini等文件分别加以介绍,对各部分代码进行了注释,在阅读代码过程中,大家选择其中的ID可以链接到第四章的相关地方查看对应的图片以确定在面板中的具体位置,选择各函数,也可以链接到第三章函数解析中,熟悉各函数的具体参数,此外一些不规则皮肤备受用户喜爱,我们将在第五章为大家进行揭密!

二、各相关文件详解

制作皮肤过程中,需要从效果出发,为皮肤各个的位置搭配设计好的对应颜色,具体实现方法是将整个皮肤按照功能和效果的不同,分成很多部分,然后为每部分对应颜色图片和实现相应的功能,具体说来:

1、config.xml:面板上除skin.ini文件定义之外的按钮、边框、背景等配置信息都

在此实现,各部分ID(名称标识)在此定义好后,在VBScript.vbs中会具体用到。

2、VBScript.vbs:QQ面板上各部分按钮的功能实现,在此实现与QQ之间的交互,同

时还负责确定各部分图片在面板中的定位(如新皮肤中涉及到的调整按钮位置等需

在此完成)。

3、Skin.ini:登陆QQ2003后,根据此文件加载面板上的分组folder(如“我的好友”、

“陌生人”“黑名单”等)和为QQ菜单(也叫系统菜单,包括“个人设定”、“系统

参数”等)等设定颜色。

为了便于大家更好的理解config.xml、VBScript.vbs和Skin.ini在皮肤制作过程的具体作用和使用方法,下面我们以“QQ2003”这个皮肤为例分别加以介绍。

2.1 config.xml文件

找到QQ安装路,以记事本的形式打开\ qq \ skin \ QQ2003 \ config.xml,具体程序如下:注意:

1、粉色部分为用到的一些函数及需要对应的格式,双击粉色的函数将链接到第三

章使用函数解析中与该函数对应的介绍部分,方便查看函数具体用法。

2、为方面大家熟悉程序,采用两种形式对代码进行

注释

3、淡蓝色部分为皮肤中各部分的名称标识,在其后有对应的bmp等格式的图片(和

config.xml存放在同一路径下),双击淡蓝色的名称将链接到第四章中,以

QQ2003为例显示对应的部分在皮肤中的具体图片,方便大家查看各ID在皮肤

中对应的的具体位置

< Picture id="BGline" zIndex="0" left="0" image="sysleftline.bmp" />

< Picture id="BG" zIndex="0" left="1" image="back.bmp" />

< Picture id="QQBG" zIndex="0" image="qq2003_back.bmp" />

< Picture id="QQ1" zIndex="0" width="18" image="2003.bmp" />

色区域实现关闭功能-->

zIndex="2" cursor="hand.cur" image="buttonA1.bmp" hoverImage="buttonA2.bmp" disabledImage="buttonA3.bmp" mappingImage="buttonA4.bmp" >

2.2 VBScript.vbs文件

VBScript.vbs主负责QQ面板上各部分按钮的功能实现,在此实现与QQ之间的交互,同时还负责确定各部分图片在面板中的定位(如新皮肤中涉及到的调整按钮位置、皮肤提供的拉伸功能等需在此完成)。

找到QQ安装路径,以记事本的形式打开\ qq \ skin \ QQ2003 \ VBScript.vbs,具体程序如下:

注意:

1、黑色粗体显示的Window.LockPaint()和Window.UnLockPaint()函数在程序的相应

位置必须调用,不可省略

2、为方面大家熟悉程序,采用'注释对代码进行注释

'注释

'定义全局变量

Dim BottomHeight

Dim CornerHeight

Dim UseNum

Dim UseStatus

Dim StatusIcon

Dim showbar

Dim Path

Dim strQQMailTip

BottomHeight = 61

'加载皮肤事件,包括:“QQ好友面板”、离线状态、QQ2003皮肤、显示侧边框,QQ号码和邮件数目

sub Window_OnInit()

FriendBar.disabled = True

TencentServerBar.disabled = False

MobileBar.disabled = False

BQQBar.disabled = False

Celltopcorner1.visible = False

StatusIcon = "Offline.ico"

UseStatus = "离线"

Path = "skins\\QQ2003\\"

UseNum = "0"

strQQMailTip = "0封未收"

showbar = true

end sub

'改变窗体大小事件,当QQ面板被上下左右拉缩、长短宽窄发生变化后,各部分的相对位置及皮肤制作过程中要改变的各部分和按钮的位置,需在此进行修改

sub Window_OnSize(cx,cy)

'在此处必须调用,不可省略

Window.LockPaint()

BG.width = cx -2

BG.Height = cy

title.width = cx

BGline.height = cy - 5

'是否显示侧边框

if showbar = True then

BarBtns.visible = True

Tencent.visible = True

BarFrame.left = BarBtns.left + BarBtns.width - 1

QQMain.left =44

else

BarBtns.visible = False

Tencent.visible = False

BarFrame.left = 4

QQMain.left = 30

end if

QQBG.left = QQ.width

QQBG.width = cx - QQ.width - TitleBtns1.width - QQ1.width

TitleR1.left = cx - TitleR1.width

TitleBtns1.left = TitleR1.left

QQ1.left = cx - TitleBtns1.width - QQ1.width

sysbottom.top = cy - 5

sysbottom1.top = sysbottom.top

sysbottom1.left = cx - 6

sysbottom2.top = cy - 1

sysbottom2.width = cx - 10

DisableBarBtn1.left = BarBtns.left - 1 DisableBarBtn1.top = cy - 23

DisableBarBtn2.left = BarBtns.left +2 DisableBarBtn2.top = cy - 21

Tencent.top = cy - 193

'边框

BarFrame.top = title.height + 3

BarFrame.width = cx - 3 - BarFrame.left BarFrame.height = cy - bottomheight - BarFrame.top - 3

CellBG.width = BarFrame.width - 4

CellBG.height = BarFrame.height - 2

CellRight.left = BarFrame.width - 2

CellRight.height = CellBG.height

Cellleft.height = CellBG.height

Celltopcorner.left = BarFrame.width - 5 CellRightcorner.left = Celltopcorner.left CellRightcorner.top = BarFrame.height - 7 Cellleftcorner.top = BarFrame.height - 7

'QQ号码

MyQQNum.value = UseNum

'QQ邮件数目

https://www.wendangku.net/doc/7f5449805.html,bel = strQQMailTip

'MaxWidth = BarFrame.width - 9

'offset = MyQQNum.width - MaxWidth

'if offset>0 then

'MyQQNum.width = MyQQNum.width - offset

'end if

Bar1.width = BarFrame.width - 6

Bar1.height = BarFrame.height - 37

Bar2.width = Bar1.width

Bar2.height = Bar1.height

Bar3.width = Bar1.width

Bar3.height = Bar1.height

Bar4.width = Bar1.width

Bar4.height = Bar1.height

'第一排按钮

BtnBG1_Left.top = BarFrame.top + BarFrame.height

BtnBG1_Left.left = BarFrame.left

BtnBG1_Middle.top = BtnBG1_Left.top

BtnBG1_Middle.width = BarFrame.width - 6

BtnBG1_Middle.left = BtnBG1_Left.left + 3

BtnBG1_Right.top = BtnBG1_Left.top

BtnBG1_Right.left = cx - 6

ChatBtn.top = BtnBG1_Middle.top +1

ChatBtn.Left = BtnBG1_Middle.Left

PhoneBtn.top = ChatBtn.top

PhoneBtn.Left = ChatBtn.Left + ChatBtn.width + 1

searchBtn.Top = ChatBtn.top

searchBtn.Left = PhoneBtn.Left + PhoneBtn.width + 1

searchBtn.width = BtnBG1_Middle.width - (searchBtn.Left - BtnBG1_Middle.Left) + 18

'第二排按钮

BtnBG2_Left.top = BtnBG1_Left.top + 21

BtnBG2_Left.left = BarFrame.left

BtnBG2_Middle.top = BtnBG2_Left.top

BtnBG2_Middle.width = BtnBG1_Middle.width

BtnBG2_Middle.left = BtnBG2_Left.left + 3

BtnBG2_Right.top = BtnBG2_Left.top

BtnBG2_Right.left = cx - 6

TeBtn.top = BtnBG2_Middle.top +1

TeBtn.Left = BtnBG2_Middle.Left

GameBtn.top = TeBtn.top

GameBtn.left = TeBtn.Left + TeBtn.width + 1

SysMsgBtn.top = TeBtn.top

SysMsgBtn.Left = GameBtn.Left + GameBtn.width + 2

SysMsgBtn.width = BtnBG2_Middle.width - (SysMsgBtn.Left - BtnBG2_Middle.Left) +

18

'第三排按钮

QQMain.top = BtnBG2_Left.top + 20

BtnBG3_Left.Left = QQMain.left + QQMain.Width + 1

BtnBG3_Left.top = BtnBG2_Left.top + 21

BtnBG3_Right.top = BtnBG3_Left.top

BtnBG3_Right.left = cx - 6

BtnBG3_Middle.top = BtnBG3_Left.top

BtnBG3_Middle.Left = BtnBG3_Left.Left + 3

BtnBG3_Middle.width = BtnBG3_Right.left - BtnBG3_Left.Left - BtnBG3_Left.width StatusBtn.top = BtnBG3_Right.top + 1

StatusBtn.left = BtnBG3_Left.Left + 2

StatusBtn.width = BtnBG3_Middle.width +12

'当QQ面板宽度较小时,不附加在线状态的汉字显示

If 60 > StatusBtn.width Then

https://www.wendangku.net/doc/7f5449805.html,bel = ""

Else

'当QQ面板宽度较大时,附加在线状态的汉字显示

https://www.wendangku.net/doc/7f5449805.html,bel = UseStatus

End If

'在此处必须调用,不可省略

Window.UnLockPaint()

end sub

'最小化和关闭按钮对应的事件

sub min1_onClick()

Window.ExeCommand 1,2

end sub

sub close1_onClick()

Window.ExeCommand 1,3

end sub

sub min2_onClick()

Window.ExeCommand 1,2

end sub

sub close2_onClick()

Window.ExeCommand 1,3

end sub

'侧边四个按钮对应的事件

'QQ好友板

sub FriendBar_onClick()

Window.LockPaint

'CornerHeight = 43

'corner.top = BarBtns.Top + CornerHeight FriendBar.disabled = True

TencentServerBar.disabled = False

MobileBar.disabled = False

BQQBar.disabled = False

Window.ExeCommand 2,0

Window.UnLockPaint()

end sub

'腾讯服务面板

sub TencentServerBar_onClick() Window.LockPaint

'CornerHeight = 43*2

'corner.top = BarBtns.Top + CornerHeight FriendBar.disabled = False

TencentServerBar.disabled = True

MobileBar.disabled = False

BQQBar.disabled = False

Window.ExeCommand 2,1

Window.UnLockPaint()

end sub

'手机好友面板

sub MobileBar_onClick()

Window.LockPaint

'CornerHeight = 43*3

'corner.top = BarBtns.Top + CornerHeight FriendBar.disabled = False

TencentServerBar.disabled = False

MobileBar.disabled = True

BQQBar.disabled = False

Window.ExeCommand 2,2

Window.UnLockPaint()

end sub

'企业QQ好友面板

sub BQQBar_onClick()

Window.LockPaint

'CornerHeight = 43*4

'corner.top = BarBtns.Top + CornerHeight FriendBar.disabled = False

TencentServerBar.disabled = False

MobileBar.disabled = False

BQQBar.disabled = True

Window.ExeCommand 2,3

Window.UnLockPaint()

end sub

sub QQBall_onClick()

Window.ExeCommand 3,1

end sub

'按钮组'和

sub ChatBtn_onClick()

Window.ExeCommand 4,1

end sub

sub PhoneBtn_onClick()

Window.ExeCommand 4,2

end sub

sub searchBtn_onClick()

Window.ExeCommand 4,3

end sub

sub TeBtn_onClick()

Window.ExeCommand 4,4

end sub

sub GameBtn_onClick()

Window.ExeCommand 4,5

end sub

sub SysMsgBtn_onClick()

Window.ExeCommand 4,6

end sub

'QQ系统菜单的相应事件

sub QQMain_onClick()

'获取“QQ采单”按钮左上角的坐标,从而确定弹出系统菜单的具体位置s = CStr(QQMain.Left)&"."&CStr(QQMain.Top)

Window.ExeCommand 5,s

end sub

'选择QQ状态的相应事件

sub StatusBtn_onClick()

'获取“QQ状态”按钮左上角的坐标,从而确定弹出状态菜单的具体位置s = CStr(StatusBtn.Left)&"."&CStr(StatusBtn.Top)

Window.ExeCommand 6,s

end Sub

'收发QQ邮件的相应事件

Sub QQMailTip_onClick() Window.ExeCommand 7,1

End Sub

'隐藏侧边框

sub DisableBarBtn1_onClick()

Window.LockPaint()

showbar = False

QQ.image = Path&"qq2003_1.bmp" QQ.width = 45

DisableBarBtn1.visible = False DisableBarBtn2.visible = True TitleR1.visible = true

TitleBtns1.visible = true

Celltopcorner1.visible = true

Window.minWidth = 104 Window.width = Window.width - 10 Window.UnLockPaint()

end sub

'展开侧边框

sub DisableBarBtn2_onClick() Window.LockPaint()

showbar = True

QQ.image = Path&"qq2003.bmp" QQ.width = 54

QQ1.image = Path&"2003.bmp"

QQ1.width = 18

DisableBarBtn1.visible = True DisableBarBtn2.visible = False TitleR1.visible = True

TitleBtns1.visible = True

cx = Window.width

Celltopcorner1.visible = False Window.minWidth = 114 Window.width = cx + 10 Window.UnLockPaint()

end Sub

'处理QQ程序发来的事件

相关文档