《QQ“授渔”教程之皮肤基础篇》
下面就让我们先看下面这篇吧！
度度提醒：如果图片看不到，请联系本人索取。因本论坛限制传不上去，原图片估计是防盗链的，我没有测试。
1.大体框架的搭建
这就是我们这次要搭建的大体框架。
首先我们用PS做好图片
（边角的处理自己搞定，如果做不出圆角的，就做直角的嘛！）然后我们要做的就是来划分图片了。
还记得上篇教程里谈到的 “过渡界面”的制作吗？就是把图片按是否拉伸来切成9块，
这里有所不同。如果你要做固定大小的皮肤，那么图片不切也行；如果做只能上下拉伸的，那么切3快也行……总之，自己灵活处理吧！
这里我就按正常的，做可以左右上下拉伸的，切9块来处理，分别为：s1、s2、 s3、 z1、 z2、 z3、 x1、 x2、 x3。切成的每块图片的大小我也标在上图了，这是我们要用到的。
下面我们打开皮肤包里的Config.xml文件，
<!--皮肤宽度高度设定-->
<Window minWidth="155" minHeight="260" maxWidth="1024" maxHeight="800" clippingColor="#FF00FF" backgroundColor="#FF00FF">
上面这段意思说明了皮肤的最小宽高和最大宽高，并且定义了镂空部分的颜色和背景色。
<!--皮肤各图片背景位置设定-->
<!--顶部-->
<
icture id="S1" left="0" top="0" width="36" height="71" zIndex="2" image="s1.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<
icture id="S2" left="36" top="0" width="90" height="71" zIndex="2" image="s2.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<
icture id="S3" left="126" top="0" width="34" height="71" zIndex="2" image="s3.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<!--两边及中间-->
<Picture id="Z1" left="0" top="71" width="36" height="320" zIndex="2" image="z1.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<Picture id="Z2" left="36" top="71" width="90" height="320" zIndex="2" image="z2.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<Picture id="Z3" left="126" top="71" width="34" height="320" zIndex="2" image="z3.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<!--底部-->
<Picture id="X1" left="0" top="391" width="36" height="65" zIndex="2" image="x1.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<Picture id="X2" left="36" top="391" width="90" height="65" zIndex="2" image="x2.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
<Picture id="X3" left="126" top="391" width="34" height="65" zIndex="2" image="x3.bmp"
transparencyColor="#FF00FF" visible="true" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
这部分定义了各 图片的位置，在这段中我们只需要修改的的是
Picture id left top width height image zIndex
zIndex 是指图层，数字越大，图片位置越高，由于这部分图片都是低部的图片，所以把zIndex的值取小一点。
Picture id 、 image 这2个随便你的爱好，自己起名字。
width height 是指此图片的大小，这2项对照此图片的大小，直接填写。
left 、 top 是指此图片在X、Y方向的坐标：
s1、s2、s3的Y方向坐标都是“0”，所以它们的top="0"是一样的。
同样s1、z1、x1的X方向的坐标都是“0”，所以它们的left ="0"是一样的。
其它的举个列子来说明，比如 s3 它的top="0" left="126" left的值为 s1的宽 + s2的宽。
再比如x2 它的left="36" top="391" left的值 为 x1的宽，top的值为 s2的高 + z2的高。
……
到此，大体框架搭建好了一半，我们还要做的是是来定义当我们拉伸图片时，8个图片的位置了（因为s1的位置和大小是不变化的）。
打开皮肤包里的VBScript.vbs文件，找到下面的文字，这部分是定义当皮肤拉伸时，皮肤面板的变化的。
Sub Window_OnSize(X,Y)
Window.LockPaint()
CurrentWidth = X
CurrentHeight = Y
……
Window.UnLockPaint()
End Sub
其中X、Y是皮肤的宽和高，当然你可以改成自己的设置，比如 原皮肤就是定义的 cx、cy。
S2所代表的s2.bmp图片是可以左右方向拉伸的，所以S2的宽应该为整个皮肤的宽减去s1和s3的宽（36+34=70），即S2.width = X – 70
由于S2是可以拉伸的，所以S3的位置会在X方向发生变化，下面我们就来定义S3的位置：S3.left = X – 34 说明：34是s3的宽，虽然S3到左边的距离是变化的，但是它到右边的距离却是不变的，永远是s3的宽34。
同法，我们得出：
S2.width = X - 70
S3.left = X - 34
Z1.height = Y - 136
Z2.height = Y - 136
Z3.height = Y - 136
Z2.width = X - 70
Z3.left = X - 34
X1.top = Y - 65
X2.top = Y - 65
X3.top = Y - 65
X2.width = X - 70
X3.left = X – 34
这样，不管我们怎么拉伸皮肤，这9个图片搭建的框架就不会变化了。
2. 好友列表的添加Config.xml文件中在</Window>上面添加
<PanelDescription>
<DlgItem id="Bar1" left="8" top="60" width="144" height="650" itemID="1001"/>
</PanelDescription>
<PanelContainer id="NewPanels" left="8" top="60" width="144" height="650" zIndex="4" align="vertical" PanelDistance="-4"/>
要修改的是"Bar1"后面的left="8" top="60" width="144" height="650"，同样，我们需要在VBScript.vbs里添加
Bar1.width = X - 16
Bar1.height = Y - 90
如果你不准备使用网络硬盘等功能的话<PanelContainer id="NewPanels" left="8" top="60" width="144" height="650" zIndex="4" align="vertical" PanelDistance="-4"/>就不必要添加了。
同时必须在Config.xml文件中添加
<Button id="FriendButton" itemID="1001" height = "37" width = "27" zIndex="1" cursor="" toolTip = "QQ好友面板" transparencyColor="#FF00FF" image="" hoverImage="" disabledImage="">
</Button>
否则会在加载皮肤时弹出错误窗口。
3. 头像和号码的添加在Config.xml文件中添加
<Button id="StatusPic" left="6" top="26" width="38" height="38" zIndex="25" toolTip="个人资料" cursor="/sb/StatusPic.cur" visible="true">
</Button>
<Button id="StatusPic" left="6" top="26" width="38" height="38" zIndex="25" toolTip="个人资料" cursor="/sb/StatusPic.cur" visible="true">
</Button>
<Text id="QQNumber" left="50" top="30" width="109" height="13" zIndex="3" value="999999999999(离线)" color="#A081BB" hoverColor="#000000" fontFamily="MS Sans Serif" fontSize="8" fontWeight="600" active="false" visible="true" link="false"/>
解释一下
toolTip-----------是定义了当鼠标移动到该处，显示出的文字说明
cursor-------------是指当鼠标移动到该处时的鼠标指针
color--------------号码的颜色
hoverColor-------鼠标移至该标签上，对应显示的颜色
fontSize----------字体大小
fontWeight--------字体粗细
由于是简单教程，我们只改left、top、width、height的值来确定我们需要的位置和大小（width、height尽量也不改）。
然后我们打开VBScript.vbs文件，输入
sub StatusPic_
onMouseMove(nX,nY)
s = CStr(StatusPic.Left) & "." & CStr(StatusPic.Top) & "." & CStr(StatusPic.width) & "." & CStr(StatusPic.height)
Window.ExeCommand 20,s
end Sub
sub StatusPic_
onMouseLeave()
s = CStr(StatusPic.Left) & "." & CStr(StatusPic.Top) & "." & CStr(StatusPic.width) & "." & CStr(StatusPic.height)
Window.ExeCommand 21,s
end Sub
这一段的意思是当鼠标移动到头像上时，在旁边显示
当鼠标移走后，显示消失。
Sub StatusPic_
onClick()
Window.ExeCommand 60,2
End Sub
这一段的意思是当鼠标点击头像时，打开
还要输入
'处理QQ程序发来的事件
Sub Window_OnNotify(code ,var)
If code = 1 Then
'设置当前的Uin
UserNum = var
If 0 = ShowStatus Then
QQNumber
.value = UserNum
Else
QQNumber
.value = UserNum + UserStatus
End If
ElseIf code = 3 then
'闪状态按钮 var 为0,1,2,3是对应的ico。为4表示停止
if var = 0 then
StatusPic.ico = "Online.ico"
elseif var = 1 Then
StatusPic.ico = "leave.ico"
elseif var = 2 Then
StatusPic.ico = "invisible.ico"
elseif var = 3 Then
StatusPic.ico = "Offline.ico"
elseif var = 4 then
StatusPic.Ico = "StatusIco"
end if
ElseIf code = 5 Then
'设置当前的状态。
if var = 10 Then
UserStatus = "(在线)"
StatusIco = "StatusPic.ico"
elseif var = 20 Then
UserStatus = "(离线)"
StatusIco = "StatusPic1.ico"
elseif var = 30 Then
UserStatus = "(离开)"
StatusIco = "StatusPic2.ico"
elseif var = 40 Then
UserStatus = "(隐身)"
StatusIco = "StatusPic3.ico"
end If
StatusPic.ico = StatusIco
If 0 = ShowStatus Then
QQNumber
.value = UserNum
Else
QQNumber
.value = UserNum + UserStatus
End If
End If
End Sub
这部分是处理QQ程序发来的事件得，此处用来对应4种状态时，头像上的显示和QQ号码后的状态文字显示
其中VBScript.vbs文件开头的
Dim UserNum
Dim UserStatus
Dim Path
Dim strQQMailTip
Dim ShowStatus
Dim foldbottom
Dim bMsgInside
Dim CurrentWidth
Dim CurrentHeight
Dim PlugMngHeight
Dim PicX
Dim PetState
Dim RecyclerPath()
Dim barflag1
Dim barflag
这部分是定义函数
Sub Window_OnInit()
Window.GetScriptVersion "1.0"
UserStatus = "(离线)"
Path = "NewSkins\\QQ2006\\"
ShowStatus = 1
UserNum = "0"
PicX = 1
If 1 = ShowStatus Then
UserNum = UserNum + UserStatus
End If
strQQMailTip = ""
bMsginside = 0
PetState = 1
End Sub
这部分是加载皮肤事件，我们复制就可以了。
到此为止，我们可以加载皮肤预览一下，如下图
大家可以根据提供的皮肤包，做出1个属于自己的皮肤.
4. 其它部件的添加<Button id="MsgManagerButton" left="72" top="255" width="24" height="24" zIndex="7" toolTip="信息" cursor="/sb/mmButton.cur" visible="true" >
<Icon ico="MsgManagerButton.ico" cx="24" cy="24" horizontalAlignment="Left" />
</Button>
这部分是添加一个图标形式的按钮。
<Button id="MenuButton" left="10" top="255" width="29" height="24" zIndex="6" toolTip="QQ菜单" cursor="/sb/menuButton.cur" visible="true" image="cd1.bmp" hoverImage="cd2.bmp" downImage="cd3.bmp" horizontalAlignment="Stretch" verticalAlignment="Stretch"/>
这部分是添加图片形式的按钮。
image ----- 对应显示的bmp格式的图片
hoverImage ------ 鼠标移至该按钮上，显示的bmp格式的图片downImage ------- 鼠标按下该按钮后，显示的bmp格式的图片
基本原则是：先在Config.xml添加如上叙的内容，然后在VBScript.vbs定义当皮肤拉伸时固定相对位置的语言，接着在定义相应皮肤的语言
比如：
Sub MsgManagerButton_
onClick()
Window.ExeCommand 4,6
End Sub
就定义了当点击消息按钮时，打开消息管理器
当然还要在Sub Window_OnNotify(code ,var)下填加
ElseIf code = 2 Then
'闪系统消息按钮 var 为1是开始闪。为2是停止
If(var = 1) Then
MsgManagerButton.StopFlash
MsgManagerButton.Flash 30
Else
MsgManagerButton.StopFlash
End If
来响应事件。
各个部件语言的添加，可以去已有的皮肤里查找，然后复制到我们的皮肤里，再修改下位置大小，如此，第一个属于我们自己做的皮肤就全出来了。（聊天窗口的修改基本不用语言，只要换换图片就可以了。）
好累`
转帖真麻烦~
来自狂人~
[此贴子已经被作者于2006-8-20 1:31:58编辑过]
