千千靜聽皮膚制作詳細(xì)說明

源創(chuàng)］千千靜聽皮膚制作詳細(xì)說明這幾天寫了一個皮膚制作的說明，希望能給想自己制作千千靜聽皮膚的各位朋友一些幫助，也希望大家能夠做出更漂亮的皮膚出來，更好地支持千千靜聽！概述千千靜聽的皮膚是以.skn為擴(kuò)展名的文件，這些文件存放于安裝日錄下的skin文件夾下。實(shí)際上這些文件都是ZIP格式的壓縮文件，把他們的擴(kuò)展名改為.zip后可以用WinZip或WinRAR等軟件解壓，解壓后所得到的就是皮膚的真實(shí)內(nèi)容。4.0版以后直接用.zip的后綴名就可以了，不必再改成.skn了。每個皮膚都是很多.bmp格式的圖片和一個名為Skin.xml的文件組成，運(yùn)行千千靜聽時(shí)我們所能看到的皮膚都是由這些圖片拼成的，而Skin.xml定義了不同的圖片的位置，比如說播放按鈕在哪里，暫停按鈕在哪里等等。皮膚中的圖片可以通過Photoshop等圖像處理軟件制作，就這一部分這里不想過多介紹，這里主要介紹的是Skin.xml的寫法。Skin.xml是一個XML格式的文件，可以用Windows自帶的記事本打開。打開后可以看到每一行的格式都差不多，實(shí)際上這些行一共有三種類型：1、 <XXXAAA="aaa"BBB="bbb">2、 </XXX>3、<YYYCCC="ccc"DDD="ddd"/>在本文中，XXX、YYY這樣的項(xiàng)稱作元素，AAA、BBB、CCC、DDD這樣的項(xiàng)稱作屬性。每一行都由“<”開頭，之后是元素名，之后跟著若干個屬性，最后以“>”結(jié)尾。上面的AAA，BBB都是XXX的屬性，是用于修飾XXX的。比如說，播放按鈕有一個屬性叫position，用于說明播放按鈕在窗口上的位置。屬性的順序是不分先后的，屬性的值都用雙引號引上。上面所列的第一種和第二種寫法是在一起使用的，一般中間都隔了若干行，這樣寫的意思是這些行都從屬于XXX，比如播放按鈕從屬于主窗口，環(huán)繞按鈕從屬于均衡器等等，而Skin.xml第一行和最后一行分別為<skin…〉和<僦詛>，就是說所有skin元素的所有部分都屬于千千靜聽的Skin。第三種實(shí)際上是一種縮寫形式，即<XXXAAA="aaa"BBB="bbb"></XXX>的縮寫。含義是說明XXX里不包含任何內(nèi)容。比如各個按鈕，拖動條等，它們已經(jīng)是最基本的單位，不能再細(xì)分了。（關(guān)于XML文件的格式，可以參照相關(guān)的文檔）千千靜聽的四個子窗口仔細(xì)分析Skin.xml可以發(fā)現(xiàn)其結(jié)構(gòu)如下：<skinversion="2"name="…"author="…"url="…"email="…"transparent_color="…"><player_windowimage="…"></player_window><lyric_windowposition="…"resize_rect="???"image="…">…</lyric_window><equalizer_windowposition="…"image="…"eq_interval="…">…</equalizer_window><playlist_windowposition="???"resize_rect="???"image="???">…</playlist_window></skin>現(xiàn)在一行一行分析：<skinversion="2"name="…"author="…"url="…"email="…"transparent_color="…">這一行說明了“skin"是最外層的元素，version,name等屬性說明了整個皮膚的一些特征。其中version指明了皮膚版本號，現(xiàn)在的版本號為2,等以后千千靜聽擴(kuò)充功能后其界面可能會有所改變（比如增加某個按鈕等），到那時(shí)皮膚的版本號也會一起增加；后面的name、author、utl>email屬性說明了皮膚的名稱、本皮膚作者的名字、作者的主頁、作者的電子信箱，在切換皮膚時(shí)可以看到這些信息；transparent_color是一個很重要的屬性，即透明色。定義了透明色之后，皮膚上的這個顏色的部分都會被顯示為透明。BMP格式的圖片都是矩形的，但有些皮膚上的按鈕可以設(shè)計(jì)成圓形的，就是利用了透明色。把圓形之外的部分的顏色都設(shè)成透明色，這樣顯示出的按鈕就是圓型了，同樣窗口的圖片也可以設(shè)計(jì)成各種不規(guī)則的圖案。背景色用顏色的RGB編碼表示，比如純紫色的RGB碼為#ff00f，fRGB編碼可以在Photoshop里查看。再向下說明了千千靜聽的四個子窗口：主窗口（即player_window元素）、均衡器窗口（即equalizer_windo元素）、歌詞列表窗口（即playlist_windo元素）、歌詞秀窗口（即lyric_window元素）。其image屬性是各個窗口所用的背景圖片；positio屬性是各個子窗口相對于主窗口的位置，positio屬性的格式是“x1,y1,x2,y2其中（x1,y1）為各個子窗口左上角相對于主窗口左上角的坐標(biāo)，x2-x1,y2-y1為各個子窗口的長度和高度（參見注意3）。當(dāng)切換到本皮膚時(shí)各個窗口就會按照這個位置重新排列窗口，當(dāng)右擊托盤圖標(biāo)詹看窗口-重新排列時(shí)各個窗口也會按照這位置排列。playlist_windo元素和lyric_window元素都有一個resize_red性，屬性的格式為“x1,x2,y1,y2它們所代表的播放列表窗口和歌詞秀窗口均可以改變窗口大小，當(dāng)改變窗口大小時(shí)，在水平方向僅僅x1到x2的部分被拉長，垂直方向僅僅y1到y(tǒng)2的部分被拉長，在這些區(qū)域以外的部分保持不變（參見注意4）。eq_intervai性定義了均衡器10個分段滑塊之間的間隔。playlist_window元素和lyric_window元素還有一個屬性是resize_t，這個屬性是4.1版新增加的屬性，這個屬性可以取值為0或1，如果取值為0，就表示在改變窗口大小時(shí)采用拉伸的方式，如果為1表示在改

變窗口大小時(shí)采用平鋪的方式，這個屬性也可以不寫，如果不寫，在拉伸窗口時(shí)就用拉伸（即這個屬性的默認(rèn)值為0），這樣做是為了更好地兼容4.0以前版的皮膚。（拉伸與平鋪的概念可以參考一下windows的桌面墻紙）窗口內(nèi)容上面例子中的省略號里略去的是各個窗口的內(nèi)容，限于篇幅在這里不一一列出，大家可以解壓一個皮膚后自己看一看。各個窗口里的每一個元素的格式都是類似T"<playposition="57,91,79,105"image="play.bmp"/>”這樣的寫法，每個元素所對應(yīng)的窗口內(nèi)容見下面幾張圖片。這里介紹一下各個元素的屬性。旦|玨偵宙.匚WIiitlt旦|玨偵宙.匚WIiitltposition存在于播放列表窗口的scrollba外的所有元素內(nèi)（播放列表窗口的scrollba的位置是固定的，位于playli的最右邊，所以不必使用口ositio屬性），說明了本元素的位置，與子窗口的position類似。唯一的區(qū)別就是子窗口的坐標(biāo)是相對于主窗口左上角的，而這里的坐標(biāo)是相對于各個子窗口左上角的。個別元素的positio屬性需要特別說明：1、主窗口的progressvolume元素和均衡器窗口的balancesurroundpreamp元素的positio屬性表示的是滑塊能夠移動的范圍的坐標(biāo)；2、均衡器的eqfacto元素的positio屬性表示的是10個滑塊中第一個滑塊的位置，而其它屬性對于所有10個滑塊都有效；3、播放列表的playli元素、歌詞秀的lyri元素的positio屬性表示顯示播放列表和歌詞的范圍（當(dāng)播放列表窗口和歌詞秀窗口改變大小時(shí)，這兩個元素會自動跟著改變大小，但它們的四個邊和窗口的四個邊的距離就是通過這個position來體現(xiàn)的）。image:指明了本元素所使用的圖片。如果元素是一個按鈕，那么元素所對應(yīng)的圖片應(yīng)該是四張同樣大小的圖片排在一起的，這四張小圖片分別代表：鼠標(biāo)不在按鈕上時(shí)的圖片；鼠標(biāo)在按鈕上時(shí)的圖片；鼠標(biāo)按下時(shí)的圖片；當(dāng)按鈕無效時(shí)（比如如果沒有選擇播放的文件時(shí)，播放按鈕就是無效的）的圖片（對于圓型等非矩形的按鈕，也可以使用皮膚指定的透明色，效果和主窗口一樣，把不要顯示的部分用透明色填空就可以了）。主窗口內(nèi)led元素使用的圖片必須是12張同樣大小的圖片排在一起，分別代表0-9十個數(shù)字、冒號和減號（同樣可以使用透明色）。color，bkgnd，font，font_size:存在于主窗口的info、stereo、status元素內(nèi)，用于設(shè)定文字的顏色、背景色、字體和字號。（如果想顯示透明的文字，就不需要指定背景色（bkgnd）了）align：align的含義有兩種，一種是在主窗口的led、info、stereo、status元素內(nèi)，此時(shí)可以取值為left、center、right，代表這些文字的縮進(jìn)方式；另一種是在歌詞秀窗口title、close、ontop元素，播放列表的title、close>toolbar元素內(nèi)，此時(shí)可以取值為left、center、right、top、bottom這些自窗口均可以調(diào)整大小，align屬性的含義是當(dāng)調(diào)整大小時(shí)元素位置相對于那個邊框移動，比如如果設(shè)置為“bottom+center”，那么當(dāng)窗口改變大小時(shí)該元素始終與下邊框保持同樣的距離移動并且在水平方向始終在中間。thumb_image屬性：存在于主窗口的progress>volume元素和均衡器窗口的balance>surround、preamp、eqfactor元素內(nèi)，定義各自的滑塊的圖片。（這種圖片和按鈕的一樣，可以用使用透明色）fill_image屬性：存在于主窗口的progress>volume元素和均衡器窗口的preamp、eqfactor元素內(nèi)，定義了移動滑塊時(shí)填充的圖片。bar_image屬性：存在于主窗口的progress>volume元素、均衡器窗口的balance>surround、preamp、eqfactor元素和播放列表窗口的scrollbar元素內(nèi)，代表這些部分的背景圖片。當(dāng)然，這些背景也可以直接畫在窗口里，但是使用bar_image的好處是當(dāng)改動這些元素的位置時(shí)背景可以自動改變位置，而不用在窗口里重畫背景。另外，由于播放列表的滾動條在歌曲較少時(shí)會自動隱藏，而且該窗口可以改變大小，所以對于播放列表的scrollbar元素，最好不要把背景直接畫在窗口里。vertical屬性：存在于主窗口的progress>volume元素內(nèi)，可以取值為true或false，當(dāng)取值為true時(shí)，滑塊按水平方向移動，當(dāng)取值為false時(shí)，滑塊按垂直方向移動。scrollbar的buttons_image、thumb_image和bar_image：當(dāng)播放歹U表的歌曲超過窗口高度時(shí)，列表右邊會出現(xiàn)滾動條，buttons_image、thumb_image和bar_image元素分別定義了滾動條的上下滾動按鈕、滑塊、滾動條背景的圖片。需要注意的是:buttons_image是由6個相同大小的圖片組成的，其中3個圖片表示向上滾動的按鈕，另三個表示向下滾動的按鈕。素內(nèi)，是指scrollbar的thumb滑塊中可以進(jìn)行縮入的中間那個部分的大小，而且縮放是采用平鋪的方式，也就是把中間這么大的圖片平鋪成比原始圖片更長的滾動條的滑塊。thumb_resize_tile屬性：這兩個屬性是4.1版新增加的屬性，存在于播放列表窗口里的scrollbar元素內(nèi)，作用與播放列表窗口和歌詞秀窗口的resize_tile相同。迷你模式迷你模式的窗口實(shí)際上就是主窗口的另外一個皮膚，只不過一般情況下需要把這個皮膚做得小一些。迷你窗口的所有參數(shù)都和主窗口的一樣，主窗口里有的所有內(nèi)容（比如說播放按鈕，暫停按鈕等）均可以加入到迷你窗口里。但既然這個窗口叫做“迷你窗口”，那么各個內(nèi)容的圖片就應(yīng)該盡量做得小一些，而且這個窗口也要做得小一些，以免占用過多的屏幕空間。迷你窗口的窗口元素是：<player_windowimage="player_skin.bmp">…</player_window>把這個元素加入到上面列出的Skin.xml后就可以顯示迷你模式了。中間省略的部分為迷你窗口里的內(nèi)容。具有迷你窗口的皮膚在主窗口上最好另加一個按鈕，用于切換到迷你模式。這個按鈕元素的格式為:<minimodeposition="250,4,259,11"image="minimode.bmp"/>其各個屬性與其它按鈕都一樣。另外，在迷你窗口也可以加上這個按鈕元素，在迷你模式按下這個按鈕時(shí)會切換到普通模式。（但可以指定一個與主窗口上的不一樣的圖片，以區(qū)分是從普通轉(zhuǎn)到迷你模式還是從迷你轉(zhuǎn)到普通模式）壓縮文件建立好Skin.xml和各個圖片后，把所有的文件壓縮成一個ZIP文件，然后拷貝到千千靜聽的Skin目錄內(nèi)，并把擴(kuò)展名改為skn（不改擴(kuò)展名也可以），就可以轉(zhuǎn)換到新皮膚了。注意：1、BMP圖片可以保存為8位位圖或24位位圖，8位位圖做成的皮膚雖然所能表示的顏色較少，但是調(diào)用這樣的位圖時(shí)程序所占的內(nèi)存也較少，所以當(dāng)皮膚的顏色比較簡單時(shí)，應(yīng)盡量把圖片保存為8位的位圖。（可以使用PhotoShop的模式轉(zhuǎn)換功能，先在RGB模式下準(zhǔn)備好圖片，再由RGB轉(zhuǎn)成索引模式。如果有透明色時(shí)要注意兩點(diǎn):1.在填充透明色時(shí)，一定不要選“容差”2.轉(zhuǎn)換時(shí)一定要選中“保留原始顏色”，以防止填充的透明色被改掉。）2、 一個皮膚只能定義一個透明色，并且定