顯示具有 WMP面版改造 標籤的文章。 顯示所有文章
顯示具有 WMP面版改造 標籤的文章。 顯示所有文章

2009年6月20日 星期六

WMP面版改造教學番外篇(1)

作為WMP面版教學番外篇第一篇, Mirage將會講講歌曲資料的顯示.

眾所周知mp3或wma檔都可以用ID3 tag儲存歌曲資料

而如果想在播放音樂時同時檢閱歌曲資料,例如:

WMPskinSupp2

這個面版除了顯示基本的歌曲資料及CD封面(右邊)外, 亦有顯示聽歌時甚少用到的特殊資料(左邊)

如果想在面版顯示文字類型的歌曲資料,可以在wms檔的view/subview內加入text元素, 為text改一個id, 再改變它的值(value), 而為了方便更新及單位轉換,可以將改變資料的步驟放在Jscript的function內,在播放狀態改變時更新一次.例子可以參考面版改造教學(5)的歌曲作者顯示方法.

雖然方法一樣,但是每個歌曲資料都有獨特的呼叫方法.基本的呼叫方法是:

Jscript的function內:

text的id.value="前置的字(例如例9的 Bitrate: ) "+ player.currentmedia.getiteminfo("呼叫字元") + "後置的字(例如例9的Kbps) ";

wms檔的text內:

value="Jscript: '前置的字(例如例9的 Bitrate: ) '+ player.currentmedia.getiteminfo('呼叫字元 ') + '後置的字(例如例9的Kbps)';"

在上面的面版共顯示了19種歌曲資料, 亦即:

WMPskinSupp

1.歌名,可以在完整模式,進階標籤編輯器及playlist元素作更改,可以直接用tracknametext元素

2. 歌曲所屬專輯,可以在完整模式,進階標籤編輯器及playlist元素作更改,呼叫字元為album

3. 歌曲作者/歌手,可以在完整模式,進階標籤編輯器及playlist元素作更改,呼叫字元為author

4. 歌曲的專輯次序,可以在完整模式,進階標籤編輯器及playlist元素作更改,呼叫字元為originalindex

5.&6.  歌曲長度及播放位置,無法手動更改,可以直接用currentpositiontext 及durationtext元素

7.播放狀態,改變播放狀態時更改,可以直接用statustext元素

8. 檔案類型及大少,無法手動更改,呼叫字元為filetype及 filesize,在此例做了單位轉換及結合為一個text元素

9. 位元速率,無法手動更改,呼叫字元為bitrate,在此例做了單位轉換

10. 歌曲類型,可以在完整模式,進階標籤編輯器及playlist元素作更改,呼叫字元為genre

11. 歌曲情景,可以在完整模式,進階標籤編輯器作更改,呼叫字元為mood

12. 專輯發行日期,無法手動更改,呼叫字元為releasedate

13. 用家前一次播放此曲日期,無法手動更改,呼叫字元為userlastplayedtime

14. 用家播放此曲次數,無法手動更改,呼叫字元為userplaycount

15. 歌曲檔原位置,移動檔案位置就會轉變,呼叫字元為sourceurl

16. 用家歌曲評級,只能在完整模式作更改,呼叫字元為userrating

17. 用家自設資料1,可以在完整模式,進階標籤編輯器作更改,呼叫字元為usercustom1,在此例填了這首歌(Supercell的Melt)在NicoNico動畫的編號, 在呼叫字元中亦有用家自設資料2(usercustom2)

18. 詳細解釋,只能在進階標籤編輯器作更改,呼叫字元為description

在這個例子的更新資料用Jscript function就如下面所示:

function UpdateMetadata()
{metadata.value = player.currentmedia.getiteminfo("author");
al.value = player.currentmedia.getiteminfo("album");
var fs = Math.round(player.currentmedia.getiteminfo("filesize")/104857.6)/10;
ftype.value = "File: " + player.currentmedia.getiteminfo("filetype") + " " + fs + "MB";
bit.value = "Bitrate: " + Math.round(player.currentmedia.getiteminfo("bitrate")/1000)+"Kbps";
gen.value = "Genre: " + player.currentmedia.getiteminfo("genre");
source.value = "Source URL: " + player.currentmedia.getiteminfo("sourceurl");
muud.value = "Mood: " + player.currentmedia.getiteminfo("mood");
userrat.value = "User Rating: " + player.currentmedia.getiteminfo("userrating");
des.value = "Description: " + player.currentmedia.getiteminfo("description");
trackno.value= player.currentmedia.getiteminfo("originalindex");
reldate.value="Release date: " + player.currentmedia.getiteminfo("releasedate");
ulpt.value="User last played time: " + player.currentmedia.getiteminfo("userlastplayedtime");
upc.value="User play count: " + player.currentmedia.getiteminfo("userplaycount");
uc1.value="User custom 1: " + player.currentmedia.getiteminfo("usercustom1");}

在這個面版中唯一一個圖像歌曲資料就是19. CD封面,CD封面能在完整模式加入,在進階標籤編輯器作更改,在呼叫及更新方法會與文字資料不同.

首先新加一個subview (在此例 id="cdcover"),不設定backgroundimage,將resizebackgroundimage設為true,再在view元素加一句:

ontimer="setvisibility();"

此句意思為在一定時間(約五秒)定期執行名為setvisibility()的Jscript function

在Jscript加入同名的function,並寫入

function setvisibility(){

if(cdcover.visible==false )
      {cdcover.visible=true;
           cdcover.backgroundimage = "WMPImage_AlbumArtlarge";
              }

          else{cdcover.visible=true;}

這個function是在執行時如果subview(cdcover)無顯示時顯示subview(cdcover)並更新CD封面為subview(cdcover)的背景圖,其餘時間一切依舊.但是究竟subview(cdcover)在何時被關閉呢?就是在播放狀態改變時執行的Jscript function,亦即:

wms檔內:

<view
scriptFile="nekoSP.js"
titlebar="false"
title="WMP Custom Skin"
ontimer="setvisibility();"
backgroundimage="bigcdbgi.bmp"
clippingcolor="#CCCC00"
onload="checkPlayerState();"
>

<player
OpenState_onchange="checkPlayerState(); "
PlayState_onchange="checkPlayerState(); "/>

Jscript的function內:

function checkPlayerState()
{UpdateMetadata();

cdcover.visible=false; //就是這句

if(player.currentMedia.ImageSourceWidth>0)
{theme.openView('vpl');}
else
{vpl.close();}
}

面版改造教學(5)用到的checkPlayerState() 再加一句cdcover.visible=false; 每次播放狀態改變時subview(cdcover)都會先消失一段短時間,然後setvisibility()會在五秒內重開subview(cdcover)並更新圖像.

這樣大費周章更新CD封面的原因是想面版在更新歌曲資料時更暢順,如果直接更新CD封面而無先行關閉subview(cdcover),面版會有近三十秒的假死狀態…\x x/

資料參考:WMP skin "Miku", "CDcase", forum link

在上面的歌曲資料大部分都只有資料檢查及整理時才會使用,所以用家可以自己決定使用的資料,其他未有提及但可用的呼叫字元可以在MSDN內找到,各位可以試試.當然使用資料不能太多,否則會影響面版外觀.

2009年6月3日 星期三

WMP面版改造教學(6)



今次Mirage示範的面版是在教學(4)的面版上加上Playlist和Openfile掣
在按了Openfile掣後就會開啟"開啟"視窗(上圖右邊)
Playlist則在面版上方, 顯示現時的播放清單.(上圖例則是"開啟"視窗的Vocaloid資料夾)

首先是openfile掣, 只要在buttongroup加一個掣的設定就可.(慣例,自行設定mappingcolor)

< buttonelement
mappingcolor="#A0A0A0"
onclick="JScript:var temp=theme.openDialog('FILE_OPEN','FILES_ALL'); if(temp) player.URL=temp;"
cursor="hand" uptooltip="Open file" />


jscript的意思是呼叫Window開啟"開啟"視窗.
內置的playlist則可以在view內加一個subview, 亦即以下的程式.(可以改動大部分""的數值)

< subview
id="playlist"
zindex="1"
top="0"
left="0"
width="300"
height="200"
visible="true">

< playlist
backgroundimage="testplist.bmp"
foregroundcolor="#FFFEEC"
itemplayingcolor="#FFFFFF"
itemplayingbackgroundcolor="#FFE00C"
id="myplay"
columns="name=Name;duration=Time;artist"
columnsVisible="false"
top="5"
left="5"
width="290"
height="190"/>



P.S.如果想設定playlist為外置面版, 可以參考教學(4)(5)的effect/video設定,
不過將內部的effect或video屬性改為上面的playlist屬性就可.


testplist.bmp 簡單的黃昏背景圖...


基本的WMP面版改造教學至此將近尾聲,
如果由教學(2)至(6)全部組件加入面版, 應該可以有一個可以應付大部分功能的WMP面版
剩下的部分(面版部件放置, 圖片, 功能增減)則是依賴各位的藝術天分
Mirage將會在將來不定期發佈特殊的面版設定和設計理念.希望各位多多支持!!

2009年5月23日 星期六

WMP面版改造教學(5)


今次Mirage再用上上個教學的面版, 各位可不可以看出分別?
在下方的effect掣換成了video掣, 而歌曲資料則出現了作曲者資料.
如果按了video掣就會開啟video面版, 如下圖所示.




其實在之前的面版改造教學, 各位可以發現有些程式出現 jscript 字眼.
(custom slider的設定值內)
我們可以寫一個 js 檔, 將面版用到的 javascript寫在裡面,
再在 wms 檔內指定 WMP 使用它.
如果要顯示歌手資料和視訊畫面, 可以使用以下的 jscript




function UpdateMetadata()
{metadata.value = player.currentmedia.getiteminfo("author");}


updatemetadata() 是將metadata寫入歌手資料(之後用到)




function checkPlayerState()
{UpdateMetadata();
if(player.currentMedia.ImageSourceWidth>0)
{theme.openView('vpl');}
else
{vpl.close();}
}


checkplayerstate() 是在開始時自動啟動updatemetadata()及在視訊開啟時自動開啟 video 版面



將 jscript 存為 js檔 (此例為 teach.js)
之後在 wms檔的 view屬性內改動 scriptfile (之前漏空)



< view
scriptfile="teach.js"
titlebar="false"
title="testsamp5"
backgroundimage="testsamp3.bmp"
backgroundcolor="none">


再加入player屬性(設定 WMP 內容)




< player
OpenState_onchange="checkPlayerState();"
PlayState_onchange="checkPlayerState();"/>


並在buttongroup加入video掣




< buttonelement
mappingcolor="#A0A0A0" onclick="theme.openview('vpl');"
cursor="hand" uptooltip="Video Viewer" id="vid"/>


如果加入此text屬性就可以顯示歌手資料
將 id 設定為 metadata 就可以常時更新歌手資料.




< text
id="metadata"
justification="center"
foregroundcolor="#FF0000" fontFace="Dotum" fontstyle=""
width="60" top="326" left="215"
fontsize="10"
scrolling="true"
scrollingamount="1"
value="jscript:player.currentmedia.getiteminfo('author');"
tooltip="author"/>


由於我們要在新的面版播放視訊, 所以加一個 video 屬性, 將視訊檔開啟時轉為開啟 video 面版.




< VIDEO
ID = "video"
VISIBLE = "false"
TOP = "0"
LEFT = "0"
WIDTH = "0"
HEIGHT = "0"
ONVIDEOSTART = "theme.openView('vpl');"/>


以下為 video面版的 view 設定, 下圖為 teachvideo.bmp
fbt (音符)及 vw_exit (X)掣分別為 全畫面播放及關閉 video 面版 的掣




< view
id="vpl"
visible="true"
titlebar="false"
backgroundimage="teachvideo.bmp"
top="0" left="0" width="660" height="370">

< button
id="vw_exit"
left="650" top="2"
transparencycolor="#00FF00"
image="ext_n.gif"
hoverimage="ext_n.gif"
downimage="ext_n.gif"
uptooltip="Close Video Viewer"
cursor="hand"
onclick="view.close();"/>

< button
id="fbt"
top="14" left="650"
transparencycolor="#00FF00"
image="vw_fbt_n.gif"
hoverimage="vw_fbt_n.gif"
downimage="vw_fbt_n.gif"
cursor="hand"
onclick="vwin.fullScreen=true"
horizontalalignment="left"
uptooltip="FullScreen"/>

< subview
id="vwin_bk"
top="5"
left="5"
width="640"
height="360"
backgroundcolor="black"
backgroundtiled="true"
tabstop="false">

< video
id="vwin"
visible="true"
width="640"
height="360"
shrinkToFit="true"
stretchToFit="true"
cursor="hand"
windowless="false"
verticalalignment="stretch"
horizontalalignment="stretch"
maintainAspectRatio="true"/>

< /subview>
< /view>




teachvideo.bmp,vw_fbt_n.gif及 ext_n.gif


現在你的面版可以播放視訊, 功能更完整了.
但是每次都要返回主版面找檔案或者開新視窗開檔案挺麻煩啊!
所以下次 Mirage 將會教大家使用 playlist 及 openfile掣.

2009年5月14日 星期四

WMP面版改造教學(4)


Mirage今次為大家示範在自製WMP面版上加上視覺效果
如上圖所示, 在面版上有一個視覺效果(長條圖), 在旁邊再有一個面版顯示自選效果(流星雨)

在面版上的視覺效果是設計者設定的, 在改造教學(2)的程式上, 在view內加入:


< subview
id="BarsPanel"
zindex="2"
top="50"
left="50"
width="200"
height="250"
visible="true">

< effects
top="1"
left="1"
height="240"
width="205">

< bars
peakcolor="#232300"
levelcolor="#131300"
levelwidth="2"
displaymode="2"
transparent="true"
fadeMode="3"
fadeRate="120"/>

< /effects>
< /subview>


程式主要是在面版上加一層subview, 然後在上面放上effect, 上例為長條圖.
bars內的東西則為長條圖的屬性設定.

P.S. 如果要做到上面效果被大廈擋住的樣子,可以在view上再加一個subview,
再用zindex設定此subview在effect subview之上就可.

眾人:"我想放自己的視覺效果啊!!", Mirage:"所以要用到旁邊的面版."
如果要播放自設效果, 最好是另外開一個面版播放,
一來可以自由移動, 二來可以選用一些特別的效果, 而如果效果不能正常播放, 亦可自行關上.

同樣在改造教學(2)的程式上, 今次在view外, theme內加上:

< view
id="effect"
titlebar="false"
top="100"
left="50"
width="380"
height="280"
backgroundColor="none"
transparencycolor=""
backgroundimage="effect_back2.bmp">

< buttongroup
mappingimage="eff_map.gif">

< buttonelement
uptooltip = "Close Effect"
mappingcolor = "#0000FF"
onclick = "view.close();"/>
< /buttongroup>

< effects
tabstop="false"
id="myeffect"
zindex="7"
currentEffectType="wmpprop:mediacenter.effectType"
currentPreset="wmpprop:mediacenter.effectPreset"
currentEffectType_onchange="mediacenter.effectType=currentEffectType;"
currentPreset_onchange="mediacenter.effectPreset=currentPreset;"
onClick="next();"
top="5"
left="5"
visible="true"
width="360"
height="270"/>

< /view>


另外在buttongroup內加入一個按掣, 按下就可開啟effect面版.

< buttonelement
mappingcolor="#A0A0A0" onClick="Jscript:theme.openview('effect');"
cursor="hand" uptooltip="Effect Viewer" id="eff"/>



此程式主要是將自設效果顯示在新開的面版上, 按畫面就可轉效果.
面版上另有按掣用來關閉effect面版.下圖為efect面版的backgroundimage.(effect_back2.bmp)
自設效果的位置則在effect內設定.


加上以上要素, save後 doubleclick wms檔就可使用.

下回Mirage將會開始使用javascript, 並為面版加上影片播放功能.

2009年5月4日 星期一

WMP面版改造教學(3)


今次Mirage會先給大家看一看結果.
歌曲開頭, 中音量

歌曲結尾, 高音量

這個面版有一個火車形的歌曲位置顯示以及摩天輪形的音量調節棒.
這兩個選項都只需要填寫簡單的程式就可以, 麻煩的則是圖片的設定.

程式方面, 在改造教學(2)內提及的wms檔內, 在view下再加上以下程式, ""內的仍是自訂要素





< CustomSlider
image="vslider.bmp"
positionimage="greymap.bmp"
toolTip="Volume"
top="100"
left="250"
max="100"
min="0"
cursor="hand"
value="wmpprop:player.settings.volume"
value_onchange="jscript:player.settings.volume=value;"/>

< SeekSlider
tooltip="seek"
top="270"
left="80"
width="170"
height="20"
thumbimage="thumb2.bmp"
transparencycolor="#ffd800"
cursor="hand"
tabstop="false"
bordersize="5"/>



seekslider是普通的WMP內設歌曲位置顯示部件
音量調節則用了customslider以做出摩天輪形的調節棒
如果想用普通的音量調節棒, 可以使用和seekslider相同的程式, 開頭改為volumeslider.

至於圖像方面大家請自備以下圖片



這是seekslider的按掣,
由於透明色設定為#ffd800(黃色), 所以在面版上看不見背景.
seekslider的背景則需要畫在面版上.


P.S. 因為今次的按掣有點長,
在面版上其實加上了圖畫掩飾seekslider的按掣在開始及結束會局部消失的現象



這個是音量調節的灰階圖(bmp格式). 灰階圖依分段多少設定不同灰色調
以此圖為例, 共有八個分段, 所以RGB數字由#000000每次增加:
255/7=36.5
至#ffffff



此圖則是每個灰階對應的圖, 亦有八個,最左的是#000000, 最右的是#ffffff
在程式中設定了灰階圖的位置. 只要按到對應的位置圖像就會轉換.
所有圖像由左到右存為一個圖像檔, 依需要亦可上下排列.


在放了wms檔的面版主file內放入以上圖像後就可做出最上圖的效果, 大家可以自己改圖試試.

下一次Mirage將會在面版上面加上內設及用家自定的效果(effect),令到面版內容更豐富.

2009年4月27日 星期一

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

2009年4月24日 星期五

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檔內的組成部分, 與及試製一個基本面版.