數理化 > qq皮膚
目錄
No. 1
  qq皮膚,又稱“qq肌膚”,是qq外形登錄模式的一種“qq美容”虛擬表達軟件手段。
  怎樣在qq皮膚編輯器裏增加項目:
  簡單地來說,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文件比較瞭解以後你可以直接找出這段代碼。
  如果這道題難不住你,那麽恭喜你!請繼續往下看;
  如果這道題做不出來,建議還是再把前面的內容看一下。
  二、認識vbscript文件
  相信大部分菜鳥沒有vbscrip基礎,因此這一部分完全可以跳過。在修改皮膚時我會盡量避開vbscript的知識,如果實在避不開,必要時會把代碼的模板給出來,大傢衹需要修改其中的一兩處就可以了。
  不過還是建議大傢學一點vbscrip的基礎知識。畢竟,我們不僅要知其然,更要知其所以然。
  關於vbscript文件,這裏我衹說三點:
  1. 定義變量
  在vbscript文件的最前面,有下面一段代碼:
  dim usernum
  dim userstatus
  dim path
  dim strqqmailtip
  dim showstatus
  dim foldbottom
  dim bmsginside
  dim currentwidth
  dim currentheight
  dim plugmngheight
  dim plugclosestate
  dim petstate
  這就是定義變量的代碼。
  如果需要定義自己的變量名的話,按以下格式定義就可以了:
  dim 變量名
  很簡單吧?
  其實vbscript衹有一種數據類型(比c語言簡單多了),而且我們衹用隱式定義變量的數據類型(就是上面這種形式)。
  2.定義按鈕在面板中的位置
  按鈕大致可以分為兩大類:
  一類按鈕是靠左上角對齊的(即不論皮膚怎麽拉伸,該按鈕到皮膚面板最左邊或最上邊的距離始終保持不變);
  一類按鈕是靠右下角對齊的(即不論皮膚怎麽拉伸,該按鈕到皮膚面板最右邊或最下邊的距離始終保持不變)。
  這兩類按鈕的位置都需要在config.xml文件中定義,但是第二類按鈕還需要在vbscript文件中定義。定義格式如下:
  按鈕名稱.left =cx - 按鈕到皮膚面板最右邊的距離
  或
  按鈕名稱.top =cy - 按鈕到皮膚面板最下邊的距離
  在config.xml和vbscript定義了按鈕的位置以後,按鈕就可以在面板中顯示出來,但是此時點擊按鈕並沒有反映,因為此時按鈕的功能還沒有定義。
  3. 定義按鈕的功能函數
  定義按鈕的功能函數的格式如下:
  sub 函數名()
  end sub
  以聊天室為例:
  sub chatroombutton_onclick()
  window.execommand 4,1
  end sub
  onclick 的意思就是當鼠標點擊的時候所做的動作, 這裏執行的是 window.execommand 動作。你也可以定義其他動作。
  window.execommand具體含義如下:
  window.execommand 1,1 老式皮膚選擇菜單(無顔色及透明度選項)
  window.execommand 1,2 最小化
  window.execommand 1,3 關閉
  window.execommand 2,0 好友面板
  window.execommand 2,1 騰訊服務面板
  window.execommand 2,2 手機好友面板
  window.execommand 2,3 企業qq好友 面板
  window.execommand 3,1
  window.execommand 4,1 聊天室
  window.execommand 4,2 短信
  window.execommand 4,3 添加聯繫人
  window.execommand 4,4 tt
  window.execommand 4,5 遊戲
  window.execommand 4,6 信息管理器
  window.execommand 4,7 顔色變換
  window.execommand 4,8 我的錢包界面
  window.execommand 4,9 所有面板選擇菜單
  window.execommand 5,菜單按鈕x.菜單按鈕y 主菜單
  window.execommand 6,菜單按鈕x.菜單按鈕y 更改狀態菜單
  window.execommand 7,1 qq郵件
  window.execommand 15,0 小秘書
  window.execommand 19,0 面板管理界面
  window.execommand 23,0 老式面板選擇菜單
  window.execommand 24,0 qq音樂、qq搜索菜單
  window.execommand 25,0 qq音樂
  window.execommand 26,0 qq直播程序
  再以ip升級器為例:
  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升級器即使定義了功能按鈕,點擊的時候仍然沒有反映。這是因為ip升級器調用了外部程序(showip.exe),而qq自帶的vbscript.dll文件並不支持這一點,所以要對vbscript.dll文件進行修改。這也是為什麽用我修改的qq皮膚還要覆蓋原版qq中的vbscript.dll文件的原因。
  三、刪除組件
  對於原版皮膚或別人發佈的皮膚,皮膚中的每一個組件我們不可能都使用,我們完全可以刪除自己不需要的組件,diy出完全屬於自己的個性皮膚。
  刪除多餘組件的步驟是:
  第一步,用記事本打開config.xml文件,找到多餘組件所對應的代碼(具體怎麽找,在第一部分末尾講得很清楚,不再羅嗦),並記下該組件所對應的id;
  第二步,將config.xml文件中該組件對應的代碼刪除,保存修改;
  第三步,用記事本打開vbscript文件,以該組件的id去掉後面的button等字樣(若有的話)為關鍵字進行搜索,就會在vbscript文件中查找到與該組件相關的代碼,將其刪除,保存修改;
  第四步,將qq皮膚目錄下與該組件有關的圖標刪除(如果不知道刪除哪個圖標,這一步完全可以省去,不影響修改效果);
  第五步,重新加載皮膚,效果就會生效。
  說明:(1)在刪除組件後,組件間的間隔可能會不一致,影響整個面板的美觀。這時可以在config.xml文件中修改相鄰組件的left屬性,直到自己滿意為止。
  (2)在上面幾步全部做完以後再加載皮膚,不然你會被彈出來的錯誤消息嚇一跳的。
  (3)每次修改保存以後,要重新加載皮膚才能使修改效果生效。
  (4)萬一你重新加載皮膚的時候彈出vbscript文件錯誤,千萬不要慌,這個錯誤提示中提示具體哪一行出了錯,你再到那一行或者那一行的鄰行去查找原因(空行也算是一行)。
  下面以刪除原版皮膚中“qq郵箱”為例:
  第一步,用記事本打開config.xml文件,找到“qq郵箱”所對應的代碼為:
  <button id="mailbutton" left="54" top="48" width="40" height="16" zindex="28" tooltip="收發郵件" cursor="mailbutton.cur" visible="true">
  <icon ico="mailbutton.ico" cx="16" cy="16" horizontalalignment="left" verticalalignment="center" leftpadding="0" toppadding="1"/>
  <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>
  並記下“qq郵箱”所對應的id :mailbutton;
  第二步,將config.xml文件中“qq郵箱”所對應的代碼(即上面這段代碼)刪除,保存修改;
  第三步,用記事本打開vbscript文件,以mail(即“qq郵箱”的id去掉後面的button)為關鍵字進行搜索,就會在vbscript文件中查找到與“qq郵箱”相關的代碼,有以下5處:
  代碼1:dim strqqmailtip
  代碼2:strqqmailtip = ""
  代碼3:mailbutton.label = strqqmailtip
  代碼4:sub mailbutton_onclick()
  window.execommand 7,1
  end sub
  代碼5:
  elseif code = 100 then
  '改變qqmail的提示
  if( var = 0 ) then
  strqqmailtip = "(" + "0" + ")"
  else
  strqqmailtip = "(" + cstr(var) + ")"
  end if
  mailbutton.label = strqqmailtip
  將這五處代碼刪除,保存修改。
  第四步,將qq皮膚目錄下與“qq郵箱”有關的圖標mailbutton.cur和mailbutton.ico刪除(如果不確定,這一步完全可以省去,不影響修改效果);
  第五步,重新加載皮膚,qq郵箱就消失了。這時候皮膚面板上面部分圖標間隔不一,很不美觀,這時候你可以在config.xml文件中修改相鄰組件“qq小秘書”的left屬性,直到自己滿意為止。
  四、添加組件
  如果你在修改皮膚時不小心誤刪了有用組件,或者你下載的別人修改的皮膚中缺少你需要的組件,那麽你就要“自己動手,豐衣足食“了。
  如果你要添加的組件是原版皮膚中有的,那就好辦多了。圖標等資源、代碼都可以直接從原版皮膚中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文件的原因。
  qq皮膚,修改器、皮膚編輯器,網上下載:
  方法一:下載qq皮膚編輯器:
  qq皮膚編輯器界面親切、友好,擁有所見即所得編輯環境,方便大傢更輕鬆完成qq皮膚的整個製作過程。此外還提供了皮膚預覽,可以更便捷的在qq上隨時查看新皮膚的實際效果。
  包括內容:
  1、皮膚編輯器的各項基本操作方法,如皮膚新建、打開和生成、預覽打包等
  2、製作皮膚全過程中,用到的皮膚編輯器中的屬性設置說明以及部分製作技巧
  3、《中國竜》皮膚製作的整個過程介紹
  方法二:
  做一個完整的qq皮膚需要不少東西,但是最簡單的方法是用現成的。先打開qq文件夾(默認路徑是c:program files encent),再打開skin,新建一個文件夾(名字取好聽一點的,呆會兒是要在你的qq中出現的)。然後再打開“藍色”這個皮膚文件夾,選定名為“skin”的文件,復製,再粘貼到新建的文件夾裏。ok,已經做好一半了。
  下面我們就可以選擇想要的圖像了。用右鍵點擊選好的圖,選擇“目標另存為”,在“保存圖片”窗口中把文件名改為“main”,在保存類型下拉框中選“位圖(*.bmp)”,然後把文件保存在新建的文件夾裏。再點擊qq上的“+”,看看,有一個新東西,那就是做的皮膚!
  有時候這樣做的皮膚會顯得有一點比例失調。衹要打開新建的那個文件夾,再打開skin文件,把裏面的“maxwidth=200”語句改為“maxwidth=400”或者是“maxwidth=500”,然後點qq上的“+”,再點一下新建皮膚,可以把qq拉大到喜歡大小。
  說明:
  1.選擇的圖像一定要是位圖(bmp)格式;
  2.圖像文件的名字一定要是“main”;
  3.這種方法是用qq自帶的“藍色”皮膚文件夾裏的配置設置文件的,由於對於新手,所以在其它方面沒有加更多的東西(比如說按鈕的設置等);
  4.qq的皮膚是沒有數量限製的,可以想做多少就做多少。
QQ皮膚使用方法
  如果是壓縮文件解壓出來像這樣的文件夾:apple,將皮膚文件夾APPLE,復製一下粘貼到你安裝的QQ目錄的NEWSKINS下面如:
  E:Program FilesNewSkins 重新啓動QQ,在QQ菜單中的更換皮膚中選擇apple就可以使用蘋果風格的皮膚了。
  09版以後改版了 皮膚文件為*****.kipx 直接雙擊安裝 自動換好
皮膚編輯器的使用
  方法一:下載qq皮膚編輯器:
  qq皮膚編輯器界面親切、友好,擁有所見即所得編輯環境,方便大傢更輕鬆完成qq皮膚的整個製作過程。此外還提供了皮膚預覽,可以更便捷的在QQ上隨時查看新皮膚的實際效果。
  包括內容:
  1、皮膚編輯器的各項基本操作方法,如皮膚新建、打開和生成、預覽打包等
  2、製作皮膚全過程中,用到的皮膚編輯器中的屬性設置說明以及部分製作技巧
  3、《中國竜》皮膚製作的整個過程介紹
  方法二:
  做一個完整的qq皮膚需要不少東西,但是最簡單的方法是用現成的。先打開QQ文件夾(默認路徑是C:Program FilesTencent),再打開Skin,新建一個文件夾(名字取好聽一點的,呆會兒是要在你的QQ中出現的)。然後再打開“藍色”這個皮膚文件夾,選定名為“skin”的文件,復製,再粘貼到新建的文件夾裏。OK,已經做好一半了。
  下面我們就可以選擇想要的圖像了。用右鍵點擊選好的圖,選擇“目標另存為”,在“保存圖片”窗口中把文件名改為“main”,在保存類型下拉框中選“位圖(*.bmp)”,然後把文件保存在新建的文件夾裏。再點擊QQ上的“+”,看看,有一個新東西,那就是做的皮膚!
  有時候這樣做的皮膚會顯得有一點比例失調。衹要打開新建的那個文件夾,再打開Skin文件,把裏面的“maxwidth=200”語句改為“maxwidth=400”或者是“maxwidth=500”,然後點QQ上的“+”,再點一下新建皮膚,可以把QQ拉大到喜歡大小。
  說明:
  1.選擇的圖像一定要是位圖(bmp)格式;
  2.圖像文件的名字一定要是“main”;
  3.這種方法是用QQ自帶的“藍色”皮膚文件夾裏的配置設置文件的,由於對於新手,所以在其它方面沒有加更多的東西(比如說按鈕的設置等);
  4.QQ的皮膚是沒有數量限製的,可以想做多少就做多少。
怎樣在qq皮膚編輯器裏增加項目
  簡單地來說,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文件比較瞭解以後你可以直接找出這段代碼。
  如果這道題難不住你,那麽恭喜你!請繼續往下看;
  如果這道題做不出來,建議還是再把前面的內容看一下。
  二、認識VBScript文件
  相信大部分菜鳥沒有VBScrip基礎,因此這一部分完全可以跳過。在修改皮膚時我會盡量避開VBScript的知識,如果實在避不開,必要時會把代碼的模板給出來,大傢衹需要修改其中的一兩處就可以了。
  不過還是建議大傢學一點VBScrip的基礎知識。畢竟,我們不僅要知其然,更要知其所以然。
  關於VBScript文件,這裏我衹說三點:
  1. 定義變量
  在VBScript文件的最前面,有下面一段代碼:
  Dim UserNum
  Dim UserStatus
  Dim Path
  Dim strQQMailTip
  Dim ShowStatus
  Dim foldbottom
  Dim bMsgInside
  Dim CurrentWidth
  Dim CurrentHeight
  Dim PlugMngHeight
  Dim PlugCloseState
  Dim PetState
  這就是定義變量的代碼。
  如果需要定義自己的變量名的話,按以下格式定義就可以了:
  Dim 變量名
  其實VBScript衹有一種數據類型(比C語言簡單多了),而且我們衹用隱式定義變量的數據類型(就是上面這種形式)。
  2.定義按鈕在面板中的位置
  按鈕大致可以分為兩大類:
  一類按鈕是靠左上角對齊的(即不論皮膚怎麽拉伸,該按鈕到皮膚面板最左邊或最上邊的距離始終保持不變);
  一類按鈕是靠右下角對齊的(即不論皮膚怎麽拉伸,該按鈕到皮膚面板最右邊或最下邊的距離始終保持不變)。
  這兩類按鈕的位置都需要在config.xml文件中定義,但是第二類按鈕還需要在VBScript文件中定義。定義格式如下:
  按鈕名稱.left =cx - 按鈕到皮膚面板最右邊的距離
  或
  按鈕名稱.top =cy - 按鈕到皮膚面板最下邊的距離
  在config.xml和VBScript定義了按鈕的位置以後,按鈕就可以在面板中顯示出來,但是此時點擊按鈕並沒有反映,因為此時按鈕的功能還沒有定義。
  3. 定義按鈕的功能函數
  定義按鈕的功能函數的格式如下:
  Sub 函數名()
  End Sub
  以聊天室為例:
  Sub ChatRoomButton_onClick()
  Window.ExeCommand 4,1
  End Sub
  onClick 的意思就是當鼠標點擊的時候所做的動作, 這裏執行的是 Window.ExeCommand 動作。你也可以定義其他動作。
  Window.ExeCommand具體含義如下:
  Window.ExeCommand 1,1 老式皮膚選擇菜單(無顔色及透明度選項)
  Window.ExeCommand 1,2 最小化
  Window.ExeCommand 1,3 關閉
  Window.ExeCommand 2,0 好友面板
  Window.ExeCommand 2,1 騰訊服務面板
  Window.ExeCommand 2,2 手機好友面板
  Window.ExeCommand 2,3 企業QQ好友 面板
  Window.ExeCommand 3,1
  Window.ExeCommand 4,1 聊天室
  Window.ExeCommand 4,2 短信
  Window.ExeCommand 4,3 添加聯繫人
  Window.ExeCommand 4,4 TT
  Window.ExeCommand 4,5 遊戲
  Window.ExeCommand 4,6 信息管理器
  Window.ExeCommand 4,7 顔色變換
  Window.ExeCommand 4,8 我的錢包界面
  Window.ExeCommand 4,9 所有面板選擇菜單
  Window.ExeCommand 5,菜單按鈕X.菜單按鈕Y 主菜單
  Window.ExeCommand 6,菜單按鈕X.菜單按鈕Y 更改狀態菜單
  Window.ExeCommand 7,1 QQ郵件
  Window.ExeCommand 15,0 小秘書
  Window.ExeCommand 19,0 面板管理界面
  Window.ExeCommand 23,0 老式面板選擇菜單
  Window.ExeCommand 24,0 QQ音樂、QQ搜索菜單
  Window.ExeCommand 25,0 QQ音樂
  Window.ExeCommand 26,0 QQ直播程序
  再以IP升級器為例:
  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升級器即使定義了功能按鈕,點擊的時候仍然沒有反映。這是因為IP升級器調用了外部程序(showip.exe),而QQ自帶的vbscript.dll文件並不支持這一點,所以要對vbscript.dll文件進行修改。這也是為什麽用我修改的qq皮膚還要覆蓋原版QQ中的vbscript.dll文件的原因。
  三、刪除組件
  對於原版皮膚或別人發佈的皮膚,皮膚中的每一個組件我們不可能都使用,我們完全可以刪除自己不需要的組件,DIY出完全屬於自己的個性皮膚。
  刪除多餘組件的步驟是:
  第一步,用記事本打開config.xml文件,找到多餘組件所對應的代碼(具體怎麽找,在第一部分末尾講得很清楚,不再羅嗦),並記下該組件所對應的id;
  第二步,將config.xml文件中該組件對應的代碼刪除,保存修改;
  第三步,用記事本打開VBScript文件,以該組件的id去掉後面的Button等字樣(若有的話)為關鍵字進行搜索,就會在VBScript文件中查找到與該組件相關的代碼,將其刪除,保存修改;
  第四步,將qq皮膚目錄下與該組件有關的圖標刪除(如果不知道刪除哪個圖標,這一步完全可以省去,不影響修改效果);
  第五步,重新加載皮膚,效果就會生效。
  說明:(1)在刪除組件後,組件間的間隔可能會不一致,影響整個面板的美觀。這時可以在config.xml文件中修改相鄰組件的left屬性,直到自己滿意為止。
  (2)在上面幾步全部做完以後再加載皮膚,不然你會被彈出來的錯誤消息嚇一跳的。
  (3)每次修改保存以後,要重新加載皮膚才能使修改效果生效。
  (4)萬一你重新加載皮膚的時候彈出VBScript文件錯誤,千萬不要慌,這個錯誤提示中提示具體哪一行出了錯,你再到那一行或者那一行的鄰行去查找原因(空行也算是一行)。
  下面以刪除原版皮膚中“QQ郵箱”為例:
  第一步,用記事本打開config.xml文件,找到“QQ郵箱”所對應的代碼為:
  <Button id="MailButton" left="54" top="48" width="40" height="16" zIndex="28" toolTip="收發郵件" cursor="MailButton.cur" visible="true">
  <Icon ico="MailButton.ico" cx="16" cy="16" horizontalAlignment="Left" verticalAlignment="Center" leftPadding="0" topPadding="1"/>
  <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>
  並記下“QQ郵箱”所對應的id :MailButton;
  第二步,將config.xml文件中“QQ郵箱”所對應的代碼(即上面這段代碼)刪除,保存修改;
  第三步,用記事本打開VBScript文件,以Mail(即“QQ郵箱”的id去掉後面的Button)為關鍵字進行搜索,就會在VBScript文件中查找到與“QQ郵箱”相關的代碼,有以下5處:
  代碼1:Dim strQQMailTip
  代碼2:strQQMailTip = ""
  代碼3:MailButton.label = strQQMailTip
  代碼4:Sub MailButton_onClick()
  Window.ExeCommand 7,1
  End Sub
  代碼5:
  ElseIf code = 100 Then
  '改變QQMail的提示
  if( var = 0 ) then
  strQQMailTip = "(" + "0" + ")"
  else
  strQQMailTip = "(" + CStr(var) + ")"
  end if
  MailButton.label = strQQMailTip
  將這五處代碼刪除,保存修改。
  第四步,將qq皮膚目錄下與“QQ郵箱”有關的圖標MailButton.cur和MailButton.ico刪除(如果不確定,這一步完全可以省去,不影響修改效果);
  第五步,重新加載皮膚,QQ郵箱就消失了。這時候皮膚面板上面部分圖標間隔不一,很不美觀,這時候你可以在config.xml文件中修改相鄰組件“QQ小秘書”的left屬性,直到自己滿意為止。
  四、添加組件
  如果你在修改皮膚時不小心誤刪了有用組件,或者你下載的別人修改的皮膚中缺少你需要的組件,那麽你就要“自己動手,豐衣足食“了。
  如果你要添加的組件是原版皮膚中有的,那就好辦多了。圖標等資源、代碼都可以直接從原版皮膚中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文件的原因。