[07-08] QQ皮肤修改教程-b菜鸟XP(Aqing) 加精！
写在前面的话
很少有人写关于修改QQ皮肤的教程，专门针对菜鸟而写的教程就更少了。这个教程是专门写给像我一样的菜鸟们。而且这是QQ皮肤修改教程，不是制作教程，绝大部分资源都取自原版皮肤，因此几乎没有涉及到PhotoShop等工具，唯一的编写工具就是记事本。这对于菜鸟而言又少了一道门槛。
这个教程不适合以下几类人：
高手。对于高手而言，教程里面都是一些很浅显的东西，不屑于写出来，也不值得写出来。所以高手们看到这里就可以打住了。
不喜欢原版皮肤的人。这个教程是以QQ原版皮肤为蓝本进行修改，因此不喜欢原版皮肤的人也可以打住了。
把别人发布的皮肤拿过来稍加修改就当作自己的版本发布出去的人。BS盗取他人劳动成果的行为！！！
简单地来说，QQ皮肤分三大块：在QQ皮肤目录下存放一些相关的图片（ICO格式）、图标（BMP格式）等资源；在config.xml文件中定义这些资源的属性；在VBScript文件调用这些资源并定义相关功能。可以看出，config.xml文件和VBScript文件是整个皮肤文件的核心。下面我们来认识一下这两个文件：
一、认识config.xml文件
1.面板的最小宽度、最小高度、最大宽度、最大高度
<Window minWidth="120" minHeight="240" maxWidth="1280" maxHeight="1024" clippingColor="#FF00FF" backgroundColor="#FF00FF">
其中 minWidth="120" 中的数值120就代表面板的最小宽度；
minHeight="240" 中的数值240就代表面板的最小高度；
maxWidth="1280" 中的数值1280就代表面板的最大宽度；
maxHeight="1024" 中的数值1024就代表面板的最大高度.
要调整面板的最小宽度、最小高度、最大宽度、最大高度，只需调整相应的数值即可。
网上所说的可随意调整面板大小其实就是将minWidth和minHeight的值调到最小，将maxWidth和maxHeight的值调到屏幕的最大分辨率。对一般人来说，上面的数值基本上可以做到随意调整面板大小了。
clippingColor和backgroundColor在修改皮肤时用不着，不用管它，下同。
2.按钮的属性
（这一部分主要了解按钮各个属性的含义，对按钮定义的格式先不管，后面会提到）
（1）先以“关闭”按钮为例：
<Button id="CloseButton" left="149" top="5" width="16" height="16" zIndex="6" toolTip="关闭" cursor="Hand.cur" visible="true" image="CloseButton_Normal.bmp" hoverImage="CloseButton_Hover.bmp" downImage="CloseButton_Down.bmp" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
其中
Button 是关键字；
id 指按钮的名称。每个Button id对应皮肤面板上的某一个按钮（就好比每个身份证号对应世界上的某一个人一样）。注意每个按钮的Button id是唯一的（就好比每个人的身份证号是唯一的）。
Left、top 分别指按钮到皮肤最左边和最上边的距离。这两个值具体是多少根据具体皮肤而定。如果实在不知道自己的皮肤应该取多大的值，那就先不管。
width、height 分别指按钮的宽度和高度。一般情况下，这两个值的大小与按钮对应的图标大小一致即可（例如关闭按钮所对应三个图标CloseButton_Normal.bmp、CloseButton_Hover.bmp、CloseButton_Down.bmp，这三个图标大小为16*16，故width、height的值分别为16、16））。注意，同一个按钮所对应的图标的大小要一致（例如关闭按钮所对应三个图标CloseButton_Normal.bmp、CloseButton_Hover.bmp、CloseButton_Down.bmp大小均为16*16）。
zIndex 指图层的上下顺序。zIndex的值越大，图标越靠上，靠上的会挡住靠下的（例如如果若干个不同的按钮定义在皮肤面板上的同一个位置，则zIndex值最大的按钮会显示出来，其他按钮将会被覆盖。这就叫做“狭路相逢勇者胜”，呵呵）。
toolTip 指鼠标放在按钮上时出现的提示信息。这个可以随便改（你可以把toolTip改成一些搞怪的话语，以后有人做出QQ皮肤搞怪版也说不定）。
cursor 指鼠标放在按钮上时鼠标的样式（例如当鼠标放到关闭按钮上时，就会由箭头变成一只小手），引号中是一个扩展名为.cur的鼠标样式文件。
visible 指按钮的可见性，true 表示可见，false表示不可见。
Image 、hoverImage 、downImage 、disabledImage 指按钮在不同状态下（如鼠标放在按钮上、鼠标按下按钮等等）显示的图标。
有些按钮中还有transparencyColor属性，这是透明色的定义，如果图标上有这种颜色，则处理为透明色。
horizontalAlignment和verticalAlignment在修改皮肤时用不着，不用管它，下同。
（2）再以“QQ小秘书”按钮为例：
<Button id="HostingButton" left="82" top="48" width="40" height="16" zIndex="27" toolTip="QQ小秘书" cursor="Hand.cur" visible="true">
<Icon ico="HostingButton.ico" cx="16" cy="16" horizontalAlignment="Left" verticalAlignment="Center" leftPadding="0" topPadding="0"/>
<Label labelValue="(0)" color="#071E81" hoverColor="#FFFFFF" fontFamily="MS Sans Serif" fontSize="8" fontStyle="" fontWeight="400" horizontalAlignment="Left" verticalAlignment="Center" leftPadding="18" topPadding="0"/>
</Button>
上面提到的属性这里就不再罗嗦了。
ico 指按钮所对应的图标，引号中是一个扩展名为.ico的图标文件；
cx 、cy 分别指按钮到皮肤面板最左边和最上边的距离。这两个值具体是多少根据具体皮肤而定。如果实在不知道自己的皮肤应该取多大的值，那就先不管。
leftPadding 指图标或者Label相对于按钮定义位置的水平偏移量。水平偏移量为正整数，则向右边偏移；水平偏移量为负整数，则向左边偏移；
不知道什么是“Label”？不知道什么是“按钮定义位置”？不知道什么是“水平偏移量”？不好意思，偶语文没学好，表达能力太差。下面听偶慢慢道来。
Label是指图标旁边的数字或者文字。在这里Label是指QQ小秘书图标右边的“（0）“字样。
举个例子来解释“按钮定义位置”和“水平偏移量”吧。
代码<Button id="HostingButton" left="82" top="48"……>中的（82，48）就是按钮HostingButton的按钮定义位置，其实就是就是按钮HostingButton在面板上的坐标。“按钮定义位置”是偶自己起的名字（“难怪看不懂，兄弟们，贬他！！！”“求求你们，不要打偶的脸好吗？……”）。
代码<Icon ico=…… leftPadding="0" ……/>中leftPadding="0"的含义是：按钮HostingButton的图标HostingButton.ico在按钮定义位置的基础上水平向左偏移0，偏移以后的位置就是图标HostingButton.ico在皮肤面板中的实际位置；
代码<Label labelValue…… leftPadding="18" ……/>中leftPadding="18"的含义是：按钮HostingButton的Label “（0）”在按钮定义位置的基础上水平向左偏移18，偏移以后的位置就是图标Label “（0）”在皮肤面板中的实际位置；
这里的0、18就是“水平偏移量”。
这里要把按钮HostingButton的按钮定义位置、按钮HostingButton的图标HostingButton.ico的位置、按钮HostingButton的Label “（0）”的位置区分开来。
这一段写得比较晦涩，实在看不懂就算了，不影响皮肤的修改。
topPadding 指图标或者Label相对于按钮定义位置的垂直偏移量。垂直偏移量为正整数，则向下边偏移；垂直偏移量为负整数，则向上边偏移；
labelValue 指Label的内容；
color 指Label的颜色；
hoverColor 指鼠标放在Label上时Label的颜色；
fontFamily 指Label的字体；
fontSize 指Label的字体大小；
fontStyle 指Label的字体风格；
fontWeight 指Label的字体高度。
3.按钮的定义
由2中举的两个例子可以总结出按钮的定义有以下几种形式。
（1）若按钮所对应的图标文件为bmp格式，则该按钮对应的代码形式如下：
<Button …… image="*.bmp" hoverImage="*.bmp" downImage="*.bmp" ……/>
（2）若按钮所对应的图标文件为Ico格式，并且该按钮有Label，则该按钮对应的代码形式如下：
<Button ……>
<Icon ……/>
<Label ……>
</Button>
（3）若按钮所对应的图标文件为Ico格式，并且该按钮没有Label，则该按钮对应的代码形式如下：
<Button……>
<Icon ……/>
</Button>
说明：省略号（……）中可以补充上2中提到的各种属性。
文本、图片等与按钮类似，这里不再赘述。
其实我们只要掌握到以下程度即可：
（1）给出一个按钮，能在config.xml文件中找到相应的代码；
（2）稍微了解一点按钮各个属性的含义。
出个题目考考你：如何在QQ2005正式版原版皮肤中的config.xml文件中找到TT浏览器对应的代码。
答案：
首先将鼠标放到皮肤面板中的TT浏览器的图标上，会看到TT浏览器的toolTip为“腾讯TT浏览器”；
然后用记事本打开config.xml文件，利用记事本的 “编辑”-》“查找”菜单找到“腾讯TT浏览器”所在的位置；
“腾讯TT浏览器”前后有那么多代码，到底TT浏览器对应的代码从哪里开始，又到哪里结束呢？这就要用到“按钮的定义”那一节中的内容了。将“腾讯TT浏览器”前后的代码和“按钮的定义”那一节中的三种形式一一对照，发现和形式（3）相对应。下面再确定TT浏览器对应代码段的起始点就很容易了。
TT浏览器在config.xml文件中对应的代码为
<Button id="TTButton" left="60" top="448" height = "16" width = "16" zIndex="20" visible="true" cursor="TTButton.cur" toolTip = "腾讯TT浏览器">
<Icon ico="TTButton.ico" horizontalAlignment="Left" />
</Button>
其实对config.xml文件比较了解以后你可以直接找出这段代码。
如果这道题难不住你，那么恭喜你！请继续往下看；
如果这道题做不出来，建议还是再把前面的内容看一下吧。
四、添加组件
如果你在修改皮肤时不小心误删了有用组件，或者你下载的别人修改的皮肤中缺少你需要的组件，那么你就要“自己动手，丰衣足食“了。
如果你要添加的组件是原版皮肤中有的，那就好办多了。图标等资源、代码都可以直接从原版皮肤中COPY，然后复制到你的皮肤中相应位置就可以了。
如果你要添加的组件原版皮肤中没有，那就按照以下步骤来做：
第一步，将组件所需要的图标（ICO格式）、图片（BMP格式）等资源放入到QQ皮肤所在目录（如果手头没有相关的图标、图片，自己也不会用PhotoShop等工具制作，这一步就先跳过，在后面我会提到补救的方法）；
第二步，在config.xml文件中定义这些资源的属性。
定义组件属性的格式可以参考第一部分第3点（即“3按钮的定义”），然后在这个格式的基础上添加相关属性，相关属性可以参考第一部分第2点（即“2按钮的属性”）。如果在第一步中没有图标、图片等资源，在这里可以将组件定义为文本，文本的代码模板为：
<Text id=\"…\" left=\"…\" top=\"…\" width=\"…\" height=\"…\" zIndex=\"…\" value=\"…\" color=\"…\" hoverColor=\"…\" fontFamily=\"…\" fontSize=\"…\" fontWeight=\"…\" toolTip=\"…\" cursor=\"*.cur\" active=\"true\" visible=\"true\" link=\"false\"/>
（注：各属性的取值可以参考其他组件）
还有一个更简单的方法：把别的按钮或文本的代码COPY过来，然后将相关属性的值改成自己的。
也许有人会问，添加的代码要放到config.xml文件中具体什么位置呢？只要遵守以下两条规则，代码存放的位置是任意的。
规则一：在config.xml文件的开头有这样一段代码：
<?xml version=\"1.0\" encoding=\"gb2312\"?><theme version=\"1.0\">
在config.xml文件的结尾有这样一段代码：
</Window>
</theme>
添加的代码要位于上述两段代码之间。
规则二：添加的代码不能“拆散”已有组件的代码。例如有如下代码：
<Button ……>
<Icon ……/>
<Label ……>
</Button>
我们添加的代码可以位于这段代码之前，也可以位于这段代码之后，但千万不要加在这段代码的中间。
第三步，在VBScript文件调用这些资源并定义相关功能。
如果组件是靠右下角对齐的（跳过第二部分的现在返回去看一下第二部分的第2点：2.定义按钮在面板中的位置。很容易看懂的），还要在VBScript文件中定义组件的位置。定义组件位置的代码添加到什么位置呢？在VBScript文件中找到以下代码：
SearchButton.top = cy - 25
MsgManagerButton.top = cy – 25
将定义组件位置的代码添加到上面这段代码的下一行。
下面来定义组件的功能函数。
功能函数的代码模板是：
sub IPButton_onClick()
tmp=\"showip.exe\"
Set fso = CreateObject(\"Scripting.FileSystemObject\")
If (fso.FileExists(tmp)) Then
Set objShell = CreateObject(\"Wscript.Shell\")
objShell.Run tmp
else
msgbox \"发现错误啦！\" & chr(10) & \"找不到QQ安装目录下的showip.exe文件\",,\"错误提示\"
end if
End Sub
这其实是IP升级器的代码，我们只需要修改其中几处，就可以变成自己的代码：将第一行的IPButton改为所添加组件的 id ；将第二行和第八行中的showip改成外部程序的可执行主程序的名字。
一般皮肤（包括原版皮肤）的VBScript文件中都有下面这句注释：
\'处理QQ程序发来的事件
将我们修改好的功能函数代码放到这段注释的上面即可。
第四步，修改VBScript.dll文件。
QQ自带的vbscript.dll文件并不支持调用了外部程序，所以要对vbscript.dll文件进行修改。这也是为什么用我修改的QQ皮肤还要覆盖原版QQ中的vbscript.dll文件的原因。
如果不会修改VBScript.dll文件，我的Blog有修改好的VBScript.dll文件可以下载。
如果想调用外部程序，自己又不想编写代码，怎么办呢？有一个更简单的方法（外部程序必须是绿色软件）： 我修改的皮肤里面一般都有IP升级器（ShowIP.exe）这个组件，如果你不使用这个组件的话，可以把外部程序的可执行主程序的名字改为ShowIP，扩展名仍然为.exe，然后将整个程序覆盖到QQ目录下（覆盖ShowIP.exe）即可，这样在QQ皮肤中点击IP升级器按钮，调用的是你自己定义的外部程序。按照上面的方法把自己喜欢的小游戏集成到QQ皮肤中，这样聊天累了可以打打游戏放松放松……是不是有种心动的感觉？那就赶紧动手DIY吧！！！注意：如果除了ShowIP以外，外部程序中还有其他文件与QQ安装目录下的文件同名，这中方法会导致QQ异常。所以这种方法要慎用
Powered by Discuz! 6.1.0 © 2001-2007 Comsenz Inc.
