當前位置:編程學習大全網 - 腳本源碼 - 怎樣自己制作千千靜聽皮膚?

怎樣自己制作千千靜聽皮膚?

千千靜聽皮膚制作全教程

千千靜聽(以下簡稱"千千")從2.0版開始就支持換膚功能,現在已經有不少皮膚可以和Winamp相媲美了,不過由於千千暫時不支持png圖片格式及腳本,因而效果是無法和Winamp的現代皮膚或Windows Media Player的皮膚相比的。但千千的皮膚制作起來卻要簡單許多,不需要任何編程知識和復雜的技術,只要掌握基本的圖像編輯操作(Photoshop)和有足夠的耐心(Patient)就可以做出漂亮的皮膚出來,看完下面這個教程相信妳也可以為千千設計壹款個性十足的精美皮膚!

壹.皮膚構造

千千的皮膚位於安裝目錄下的Skin文件夾內,擴展名可以為.skn或.zip,實際上二者是壹樣的,都是zip格式的壓縮文件。對於前者,可以先將.skn的擴展名改為.zip(要在系統中顯示文件的擴展名,依次點擊"工具"-"文件夾選項"-"查看",再把"隱藏已知文件類型的擴展名"前的小勾去除即可),然後將其解壓到單獨的文件夾,進入該文件夾,可以發現裏面包含了許多bmp格式的圖片和若幹個xml文件,其中最重要的是Skin.xml這個xml文件,其它幾個xml文件的作用在後面會提到。

bmp圖片是各個窗口的背景及按鈕圖片,Skin.xml則是配置文件,定義了皮膚的基本信息、窗口及按鈕的位置、大小等,它是基於XML格式的文件,可直接用系統自帶的記事本或者其它文本編輯工具打開,打開後我們可以看到其基本構造:

<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">

<player_window image="...">

...

</player_window>

<mini_window image="...">

...

</mini_window>

<lyric_window position="..." resize_rect="..." image="...">

...

</lyric_window>

<equalizer_window position="..." image="…" eq_interval="...">

...

</equalizer_window>

<playlist_window position="..." resize_rect="..." image="...">

...

</playlist_window>

</skin>

仔細分析可發現每壹行都是以"<"開頭,最後以">"結尾,中間有若幹項和參數,可以將它們分為兩種類型,第壹種結構形如:<XXX AAA="aaa" BBB="bbb"></XXX>

像XXX這樣的項稱作元素,AAA、BBB這樣的項稱作屬性,aaa、bbb則是屬性的參數值。在這裏AAA、BBB都是XXX的屬性,是用於修飾XXX的,比如position屬性用於定義元素的位置,image屬性用於定義元素的位圖等。

在這種類型中,<XXX>和</XXX>必須同時使用,形成壹個閉合回路,就是說前面使用了<XXX>開頭,後面就壹定要用</XXX>來閉合,包含這中間的各項則都屬於該元素。使用該類型的主要有主窗口(即player_window元素)、均衡器窗口(即equalizer_window元素)、歌詞秀窗口(即lyric_window元素)、播放列表窗口(即playlist_window元素)以及迷妳模式窗口(即mini_window元素)這5個基本的窗口,這5個窗口又全部包含在<skin>和</skin>之間。

第二種結構形如:<YYY CCC="ccc" DDD="ddd"/>

實際上這是壹種縮寫形式,即<YYY CCC="ccc" DDD="ddd"><YYY>的縮寫,它們是最基本的單位元素,分別被包含於各個基本窗口中,用於比如各個按鈕,拖動條等。

關於XML文件的格式,可以參照相關的文檔,在這裏要提壹下的是,各元素及屬性的順序是不分先後的,空格的多少也沒有關系,只要包含和被包含的位置及基本的格式別弄錯了就可以(比如屬性的參數值必須用英文雙引號引上等),但是為了便於閱讀和編輯修改,最好嚴格按照標準格式來書寫。下面我們來詳細分析壹下Skin.xml,第壹行:

<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">

這壹行用於定義皮膚的基本屬性和信息,其中version="2"指的是皮膚的版本號,不必更改,後面的name、author、url和email屬性分別指的是該皮膚的名稱、作者的名字、作者主頁地址和作者電子郵件地址,這些信息會顯示在千千選項的應用皮膚的窗口中;再後面的transparent_color是壹個非常重要的屬性,即"透明色",定義了透明色之後,皮膚上有這個顏色的部分都會被顯示為透明。因為bmp格式圖片是不支持透明的,所以要做出不規則的背景窗口和按鈕,就要通過透明色來實現,方法是把要顯示為透明的部分用定義好的透明色填充即可。壹個皮膚只能定義壹個固定的透明色,並用顏色的RGB編碼表示,比如純紫色的RGB碼為#FF00FF,RGB編碼可以在Photoshop等工具中查看。(透明色應盡量選擇皮膚色調相差較大的顏色,否則很容易與皮膚上的顏色重復,導致把必要的部分透明了,壹般情況下用純紫色即可)

接下來就是5個基本窗口的配置,其中迷妳模式窗口在後面會單獨詳細講解。在Skin.xml中,首先要配置好的就是主窗口,歌詞秀窗口,均衡器窗口,播放列表窗口這4個子窗口的相關設置,然後再分別配置各窗口上的按鈕等。

二.屬性參數介紹

下面是各窗口上元素的對應圖及屬性說明:

position:這是眾元素中最基本的屬性之壹,用於定義窗口背景及按鈕的位置及大小,參數值格式為 "a, b ,c ,d",這4個數值既固定了元素的位置也確定了其大小,其中(a, b)為左上角的坐標,(c, d)為右下角的坐標,c-a 就是長度,d-b 就是高度,坐標原點要分兩種情況:如果是歌詞秀、均衡器、播放列表這3個子窗口的position,則是把主窗口的左上角作為它們的坐標原點;如果是各窗口內部按鈕的position,則是把對應的各窗口的左上角作為坐標原點,比如歌詞秀窗口中的"關閉"按鈕就是以歌詞秀背景圖片的左上角為原點,其它依此類推!

特別地:①播放列表中的scrollbar元素不需要定義position屬性,它的位置會自動固定在playlist的最右邊;②主窗口中的progress、volume元素及均衡器窗口中的balance、surround、preamp元素的position屬性表示的是滑塊能夠移動的範圍的坐標;③播放列表衡器窗口中的playlist元素、歌詞秀衡器窗口中的lyric元素的position屬性表示的是播放列表和歌詞的顯示範圍,當播放列表窗口和歌詞秀窗口改變大小時,這兩個元素會自動跟著改變大小,但它們的四個邊和窗口的四個邊的距離就是通過這個position來體現的;

resize_rect:歌詞秀和播放列表窗口特有的屬性,用於定義這兩個窗口可被拉伸的部分,其參數格式同position,代表的是當改變窗口大小時只有這個矩形框內的部分才會被拉長,在這個範圍外的部分則不會變化,另外還有壹個屬性resize_tile是對應使用的,其參數值可以為0或1,其中0表示在改變窗口大小時采用拉伸的方式,1表示采用平鋪的方式,該屬性可省略不寫,即使用默認值0;

此外,歌詞秀和播放列表窗口還有壹個可選擇的元素:title,可在有特定需要時(比如在改變窗口大小時標題保持居中等)使用,格式如下:

<title position="..." image="..." align="..." />

前面3者的示意圖如下:

image:用於定義該元素所使用的圖片。壹般地,按鈕圖片大部分都是由4個大小相同的圖片並排組合在壹起的,分別代表按鈕的4種不同狀態:按鈕正常、鼠標經過按鈕、鼠標按下按鈕、按鈕無效,下圖就是播放按鈕的圖片:

註:①如果按鈕在這4種狀態下都是壹樣的,同樣需要將4張圖片並排在壹起才能正常顯示;②存在於播放列表中的scroll元素內的scrollbar_button和scrollbar_button屬性所對應的圖片只有3種狀態:按鈕正常、鼠標經過按鈕和鼠標按下按鈕;

align:用於定義元素的對齊方式,參數值分兩種情況:壹種是存在於主窗口中的led、info、stereo、status元素內,此時可以取值為left、center、right,代表這些文字的縮進方式;第二種是存在於歌詞秀窗口中的title、close、ontop元素內,播放列表窗口的title、close、toolbar元素內,此時可以取值為left、center、right、top、bottom等,代表當調整窗口大小時元素位置相對於邊框移動,如果要同時設置垂直對齊和水平對齊方式,可以用英文加號將二者連在壹起,比如"top+left"表示在垂直方向上頂部對齊、在水平方向上左對齊;

thumb_image、fill_image、bar_image:存在於主窗口中的progress、volume元素和均衡器窗口的balance、surround、preamp、eqfactor元素內,分別用於定義滑塊的圖片、移動滑塊時填充的圖片和移動範圍內的背景圖片;

vertical:存在於主窗口中的progress、volume元素,參數值可以為true或false,其中取true時指滑塊按垂直方向移動,取false時滑塊按水平方向移動;

color、bkgnd、font、font_size:存在於主窗口中的info、stereo、status元素內,用於定義文字的顏色、背景色、字體和字體大小,如要顯示透明文字則不需要指定背景色(bkgnd);

thumb_resize_center:存在於播放列表窗口中的scrollbar元素內,用於定義scrollbar的thumb滑塊中間可以進行平鋪縮放的部分的大小,如果取值為0,則代表在改變播放列表窗口高度大小時滑塊進行不縮放;

thumb_resize_tile:存在於播放列表窗口中的scrollbar元素內,作用與播放列表窗口和歌詞秀窗口的resize_tile相同;

hot_image:存在於播放列表窗口中的toolbar元素內,用於定義播放列表工具欄中當鼠標經過時的圖片形態。此屬性可選擇,如省略不寫的話程序會自動生成鼠標經過時的按鈕狀態;

eq_interval:存在於均衡器窗口中的equalizer_window元素內,指eqfactor元素中10個波段的間隔大小(另:eqfactor元素的position屬性表示的是10個滑塊中第壹個滑塊的位置,而其它屬性對於所有10個滑塊都有效);

icon:存在於主窗口中的icon元素內,用於自定義皮膚圖標,必須將圖標文件(*.ico,16*16)放於皮膚文件夾中並壹起打包壓縮。此屬性可選擇,如省略不寫的話則使用默認的程序圖標;

left_top_color、right_bottom_color:存在於歌詞秀窗口中的mini_border元素內,用於定義在迷妳模式下歌詞秀窗口的左上邊框和右下邊框的顏色;

在這裏重點介紹壹下迷妳模式窗口:

如上圖,迷妳模式其實是獨立於主窗口外的另外壹個皮膚,不過在迷妳模式下省略了播放列表和均衡器窗口、簡化了歌詞秀窗口和主窗口。迷妳窗口裏的所有元素、屬性及參數都是和主窗口壹樣的,它們都被包含於<mini_window>和</mini_window>中,相當於主窗口中的<player_window> </player_window>;

迷妳模式就是為了減小屏幕大小占用及簡化按鈕,故迷妳窗口各按鈕也要相應調整縮小,並省略部分不常用的按鈕,比如音量調節等,壹般只保留下"播放/暫停"、"停止"、"後退"、"前進"、"靜音"、"圖標"、"視覺效果"等即可。另外,迷妳模式下的歌詞秀窗口的位置和長度是固定的,高度則是和迷妳模式的背景圖片高度相同。

三.打包壓縮

當把所有圖片都制作完成並配置好Skin.xml後還需做壹件事情,那就是添加 Lyric.xml、Playlist.xml、Visual.xml 等3個xml文件,它們分別是作為歌詞秀、播放列表、視覺效果的配色方案及相關的設置,如果不加上這3個文件皮膚就按默認的配色來顯示,所以建議給每個皮膚都加上合適的配色便於與整體配套,從而使得皮膚更為美觀漂亮,另外,如果皮膚沒有自帶配色文件的話,從其它有配色的皮膚切換到該皮膚時,會把原先皮膚的配色也壹起帶過來,效果非常難看。

它們的參數和Skin.xml類似的,可以用記事本打開後進行配置,不過還有另外壹種更為簡潔高效的方法,那就是在 "千千選項" 裏配置好,然後分別在每個選項卡中點擊"配置文件"-"保存到文件",並分別保存為"Playlist.xml"、"Lyric.xml"、"Visual.xml",再將它們復制到相同目錄下的皮膚文件夾即可,如圖:

最後就是將這些文件壹起打包壓縮制作成皮膚了,可以用WinRAR或WinZIP等壓縮工具,以WinRAR為例,先按鍵盤上的Ctrl+A全選所有文件,然後將全部文件添加到壓縮文件夾,壓縮文件格式選擇"zip",壓縮方式可選擇"最好",再點擊"確定"就行了!

到這裏皮膚就已經全部制作完成了,將這個壓縮文件復制到千千安裝目錄下的Skin文件夾,然後在"千千選項..."-"皮膚"中就可以選擇應用皮膚了,或直接在主面板上點擊右鍵-"選擇皮膚"即可!

裏面壹些圖片沒貼上來,如果有什麽不明白的具體問我,本人自己做過幾個。

  • 上一篇:綠光森林中扮演蘇菲小時候的人是誰
  • 下一篇:拳師犬是什麽樣的?
  • copyright 2024編程學習大全網