新的自家改造WMP面版

新的WMP面版終於完成了!!! (灑花)
面版素材是爐心融解的圖.

這個面版的特別處是在前一個面版作品內再加了變面原素
加了新的javascript後只要按了play掣右邊的Change View掣就會變成下圖:


雖然有點兒無實質用處...
但試想像你用最愛的動漫WMP面版聽歌, 突然感覺到母親在背後...
你即時按掣將面版換成文藝復興面版,令母親不禁欣賞你的品味.

心中聲音:"怪怪的理由..."
這個面版不失為大型面版設計及javascript指令的練習. ^ ^/

【初音ミク】 Mikunologie 【オリジナル曲】

作曲: X-Plorez

PV繪製: はともよしおっさん

Nico Nico 動畫投稿日期: 24/4/2009

機械少女初音的苦惱...

PV超可愛! \^ ^/ 曲調輕度懷舊化而仍舊活潑.長度稍短但感覺剛剛好.

歌曲描寫 少女機器人的日常生活, 渴望好像常人生活及談戀愛,

還有希望下次升級可以輕量化!!! (?)

大家可以看一看PV感受一下.

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將會為它加上音量調節及位置搜尋.

WMP面版改造教學(1)

本人在一年前開始接觸Vocaloid, 自此就成為Vocaloid的忠心追隨者.

而同時亦成為主要為鏡音子畫PV的台灣繪師紙飛機繪師的Fans...

有供就有求, 所以用 Window Media Player 11 (WMP)聽歌聽久了,
對原本的面版有點心感不足, 決定自己改一個獨一無二的出來.
現在所用的面版就是下圖那個: (圖片素材源自紙飛機繪師作品）

(圖中為實物75%大小)

不錯吧, 有一個獨一無二的面版可以取悅使用者,亦可以為WMP加上自己需要的功能.
以上圖為例, Mirage就加了兩個網上電台的快捷鍵.

可能有人開始問怎樣改(望向面版檔 ???.wmz束手無策)
其實Microsoft設計WMP面版時有照顧電腦初心者的,
家中電腦有Winzip, Notepad及小畫家就可以設計面版了(!)

眾人:"不要開玩笑吧!!!!" Mirage:"無.(認真貌)"
現在Mirage將會在此逐步講解WMP面版的組成, 組件及設計方法, 等各位都可以自己設計獨家WMP面版.

這一篇將會主要講解WMP面版檔的組成部分.
整個wmz檔其實就是特別的zip檔, 用Winzip 解壓縮後就是三個主部分.

1. 圖像(bmp, jpg, gif檔等)
2. 面版設定檔(wms檔)
3. Jscript檔(js檔)

上圖的面版壓縮前的檔案,只顯示一部分

三者的關係就是:

wms檔利用XML 語言及呼叫js檔定義面版的樣子,設定面版的功能及連結.

而WMP則利用wms檔的設定, 使用圖像檔砌出面版.

至於面版的特別功能, 面版樣貌轉換, 各功能的檢驗及執行就寫在js檔.

圖像檔可以用小畫家改造, (高級的用家都會用photoshop改, 而Mirage則會用freeware "paint.net")wms及js檔則可以用Notepad開啟及改造.

現在各位可以解壓縮一個WMP面版親自看看內部構造,如果看不懂亦不緊要.

下篇將會講解wms檔內的組成部分, 與及試製一個基本面版.

賀!! 網誌開張. \^ ^/

作為網誌的第一篇文,

Mirage 真是很開心可以成為Blogger的一員.(開香檳慶祝)

這個網誌主要是記錄Mirage在看的書, 聽的歌, 做的事

除了推廣, 亦有教授及感言

詞窮了, 所以最後請多多指教. ^ ^/