WMP面版改造教學(2)

Mirage將會在這篇講解WMP面版最主要的部分: wms檔.
一個最主要的WMP面版檔組件最少要有play, pause, stop等控制鍵及歌曲資料顯示,
所以Mirage將會在此親自弄一個簡單的面版,無須加入js檔.
以後陸續加入新機能.

首先是面版的設計, 今次會用以下的圖像素材. (Vocaloid名曲 Saihate的圖)

在開啟Notepad後, 各位可以先寫下以下部分, 並儲存為wms檔, 檔名隨意

基本上程式以theme開始, 之後以view定義面版所用的圖像檔.
由於今次不使用jscript檔,所以 scriptfile位置留空

< theme 
 title="Teachsamp1" 
 authorversion="ver 1.00" 
 author="Mirage"
 copyright="">

< view 
 scriptfile=""
 titlebar="false"
 title="teachsamp1"
 backgroundimage="teachsamp1.bmp" 
 backgroundcolor="none">

跟著用tracknametext及currentpositiontext設定歌曲資料顯示.歌名及播放時間
#RRGGBB為顏色的RGB16進位數字. #FFFFFF為白色. 此例使用Dotum字體.

< Tracknametext
 justification="left" foregroundcolor="#FFFFFF" 
 fontFace="Dotum" fontstyle="" fontsize="20" 
 width="260" top="30" left="30"  
 tooltip="曲目"
 scrolling="true" scrollingAmount="1"/>
< Currentpositiontext 
 id="current" 
 justification="left" foregroundcolor="#FFFFFF" 
 fontFace="Dotum" fontstyle="" fontsize="20" 
 width="260" top="60" left="30"      
 tooltip="時間"/>

這程式用了兩種方法設定按掣,
第一種是用buttongroup設定大量按掣, (play, pause, stop, previous & next)
需要mappingimage(看圖例:Teachsamp1map.bmp).每個顏色對應一個掣
teachsamp1hover.bmp為滑鼠移到按掣的提示圖.

< Buttongroup
 mappingimage="teachsamp1map.bmp" hoverimage="teachsamp1hover.bmp" downimage="">

< Playelement
 mappingcolor="#FF0000" cursor="hand" uptooltip="Play"/>

< Stopelement
 mappingcolor="#0000FF" cursor="hand" uptooltip="Stop"/>

< Nextelement
 mappingcolor="#FF00FF" cursor="hand" uptooltip="Next"/>

< Prevelement
 mappingcolor="#FFFF00" cursor="hand" uptooltip="Previous"/>

< Pauseelement
 mappingcolor="#00FF00" cursor="hand" uptooltip="Pause"/>
< /buttongroup>

teachsamp1hover.bmp & Teachsamp1map.bmp, 下方的Full mode掣不包括在內

第二種是直接設定按掣位置及功能. (Full mode)

< Button
 top="255" image="exit.bmp" onclick="view.returnToMediaCenter();" 
 uptooltip="Full Mode"/> 
< /view>
< /theme>

最後程式以view及theme收尾作結.
至於程式內的檔案名及位置數字皆為此示範面版專用, 每個面版不同, " "內的都可改動.
將所有相關檔案(圖像檔及wms檔)放在同一個file內就可以double-click wms檔起動, 成品如下:

如果成功起動加上效果滿意, 就可以將所有檔案壓縮, 副檔名改為wmz檔,

再放在C:\Program Files\Windows Media Player\Skins(Default設定)就可以在WMP內選用了.

當然這個面版看來太簡單了, 而且功能仍有不足.所以各位可以先了解程式碼,

下篇Mirage將會為它加上音量調節及位置搜尋.