Windows Media Player Skins

Microsoft Windows Media Player提供一個程式設計平台來建造自訂面版。 面版是一組劇本 美工 媒體 文字檔的結合它可以替 Windows Media Player 建造新的外觀。 使用面版，你可以改變不只一種的 Windows 媒體播放器容貌。 面版技術其他的類型程式設計非常不同： 你須要配合程式設計和美工。 但你不需要是程式設計專家（如果你會建立網頁而且會做一些簡單的scripting這樣就可以了）﹐而且你也不需要是一個藝術家. （你可以使用一些美工處理程式 , 像是 Adobe Photoshop） 你需要使用XML（類似 HTML），微軟 JScript（類似微軟 Visual Basic 和其他的高階語言）﹐而且你可以選擇你常用美工軟體來編輯。

ABOUT Skins

Microsoft Windows Media Player讓使用者選擇多種標準面版，每一個提供附加的視覺的體驗提高視聽享受 。 你也可以自訂自己的面板,這是非常容易的一件事 面版只是一個或更多的電腦藝術檔案集合物，只需使用一個文字檔來告訴Media Player如何使用這些檔案顯示面版。 你可以使用各種程式來修改已存在的美工或建立你自己的簡單的美工。 舉例來說，使用微軟提供的 PowerPoint 的繪圖工具和美工剪輯，你只需拖放滑鼠就可以建立圖稿。 同樣地﹐你不需要使用程式設計就可以用文字檔來定義個人的面版。 面版相對地容易建造的理由之一是你可以看到任何的面版的美工圖案和原始碼，而且看見每個面版如何結合。 一些簡單的面版範例將由 Microsoft Windows Media Player SDK提供, 作為面版元素和屬性的參考。 為什麼要製造面版？ 當某人使用圖形化電腦環境 , 像是微軟 Windows 的一個程式的時候，對他們開放的視覺化選項叫做使用者介面。 以便所有的程式以相同的方法操作 , 微軟Windows 的目的之一是提供一個標準的使用者介面。 舉例來說﹐微軟推薦，在 Windows 使用者介面指導方針中﹐每個程式提供程式的主要的視窗的上面的右上角角的關閉按鈕。 Windows 媒體播放器提供你創造自己的使用者介面功能。 如果你想要把Close 按鈕放入螢幕的中央，Windows 媒體播放器允許你可以這樣做。 也許你不喜歡 Close 按鈕容貌; （它在一個方格裡看起來像 X 一樣） 如果你想要它看起來像一個骷髏骨和二根骨頭交叉的圖形一樣，你可以製造這樣一個close按鈕的使用者介面！ Windows 媒體播放器給你製造音樂和視訊撥放所有工具的自訂使用者介面： 按鈕，滑動 BAR，影像視窗，視覺化視窗，等化器 Bar，等等。 你為什麼想要為 Windows 媒體播放器建造你自己的使用者介面,有一些好理由。 一個理由是你也許想要增加在 Windows 媒體播放器中早已沒有的功能。 舉例來說﹐你也許想要建造以日期時間為基礎的撥放清單 的音樂播放器，以便你在早晨有熱門的搖擺和晚上有慢的爵士樂。 也許你想要用一個快速停止音樂的大紅色按鈕來製造面版。 Windows 媒體播放器沒有的 ”重覆撥放相同的歌一直到我的室友發狂”按鈕﹐但是如果你想要這按鈕，你可以建造它。 創造面版另一個的理由是要在 Windows 媒體播放器上貼上標幟(像是 公司名稱 ,商標,產品名稱)。 如果你正在發行你的網站的音樂並且使用特別的標誌，你也許想要設計使用你的標誌提醒關於你的站的面版。 如果你有一個搖滾樂團，你可以在它上面用你的樂團的照片來製造面版。 而且要製造面版的另一個理由是要使某些特別用途可以盛妝打扮你的桌面。 當你的朋友來的時候而且問你在你的螢幕上的那個很棒的程式是什麼，你可以說你做到你自己。 你甚至可以照你的狗的照片，掃瞄它進你的電腦之內，來增加一些按鈕，而且在你的狗的鼻子上點一下啟動音樂和狗的尾巴點一下停止。 你可以為不同的類型音樂建造不同的面版或為每天有不同的面版。 Skin Files 當你看見面版的時候，你只是看見表面。 在表面後面是組成完整的面版的一些檔案。 技術上說，面版是一群檔案，每個檔案包含明確的類型訊息。 組成完整的面版的檔案如下： Skin Definition File : 定義主擋案如何使用其他檔案,這是一個文字檔並且副檔名為 *.WMS。 Art Files :美工檔案包含你的面版的繪圖元素,這些包括 BMP ，GIF，JEPG和 PNG 檔案。 JScript Files: 如果你想要建造較複雜的事件回應，你可以使用微軟 JScript建造劇本檔案,這些是文字檔並且副檔名為 *.JS。

未完...待續

發表人 - cmf 於 2003/09/04 12:32:17

------
︿︿

Skin Definition File    面版定義檔內容包含面版的基本指令，面版使用的其他的檔案可以在哪裡找到。
一個面版只能有一個面版定義檔﹐它的副檔名為 *.wms 。
面版定義檔的指令以可展開的標記語言 (XML)寫成,與 HTML 類似。
如果你會 HTML 網頁，你會發現XML看起來熟悉。
面版定義檔的XML使用一組特別的元件標籤來定義面版使用者介面。
舉例來說﹐BUTTON元件定義按鈕要如何動作。
每個元件標籤可以指定屬性。
舉例來說﹐BUTTON元件有一個IMAGE屬性定義按鈕的圖片。
這與 HTML 類似，在BODY元件會有 BgColor屬性 定義 HTML 的背景顏色。
關於全部面板元件及屬性的詳細資訊包含在面版程式設計參考文章中。
XML有一條很簡單的規則是你建造面版需要知道的。
不像 HTML ﹐XML要求你完全遵從規則。

用＜＞括號圍繞元件

所有的元件是以＜＞括號包起來;
例如: Button 元件 :

＜BUTTON＞

你不需要鍵入"Button"所有的大寫字母文字,也就是說大小寫都可以

在括號中放入屬性定義

元件的所有的屬性定義必須包含在<>括號之內。
屬性定義由屬性名稱加上一個等號 (=) 再加上雙引號內的屬性值所組成。

＜BUTTON image="mysong.wma"＞

群組元件開始及結束

BUTTONGROUP 元件開始:

＜BUTTONGROUP＞

BUTTONGROUP元件結束:

＜/BUTTONGROUP＞

放入 BUTTONELEMENT 標籤：

＜BUTTONGROUP＞
    ＜BUTTONELEMENT/＞
    ＜BUTTONELEMENT/＞
    ＜BUTTONELEMENT/＞
＜/BUTTONGROUP＞

Skin Definition File 資料結構

skin definition file 必須指定一個資料結構. 以Theme啟始，建造一個或更多的Views，然後在定義每個views。

Theme

＜THEME＞
    ...
＜/THEME＞

THEME 是面板的根元素. 在skin definition 檔內可以有一個 THEME,及必須在檔案的上層. THEME 可以指定 周圍屬性，雖然大部份妳不需要使用他們。
關於這些屬性資訊，請見面版程式設計參考。

View

每個Theme至少要有一個VIEW。
VIEW支配你螢幕上的個別影像。
你可以擁有超過一個VIEW，因此你可以來回切換。
舉例來說﹐你可以與 撥放清單(playlists)一同工作的大的VIEW，及在螢幕的一個角落嵌入一個觀賞視覺化的小view。
如果你正在建立多個檢視框，你可以確立每個檢視框有唯一的ID屬性值來識別VIEW。
你一定要定義 backgroundImage 屬性，否則你的檢視框將沒有啟始影像。
如果你不想顯示矩形影像，你可以使用 clippingColor 屬性定義你不顯示的面版的區域﹐而且你可以設定VIEW元件的 titleBar 屬性。

每個 VIEW element 也可以有一個或更多的子檢視框. 子檢視框元件與檢視框類似而且可以作為你的面版的一部份你可以移動﹐隱藏或顯示。
舉例來說﹐一個子檢視元件可以用來建造你的面版下顯示一個圖形等化器的滑盤。

Initializing the Player

你可以使用PLAYER, SETTINGS,CONTROLS 元件設定 Windows 媒體播放器的某些初始特性。
, 舉例來說﹐你可以將音量設定初值或給一個內定的檔案名稱。
下列顯示如何設定 URL:

＜PLAYER  URL = "http://proseware.com/mellow.wma"＞
＜/PLAYER＞

如果你想要設定SETTINGS的autoStart 屬性 為FALSE，你要使用下列的程式碼：

＜PLAYER＞
  ＜SETTINGS autoStart = "False"＞
  
＜/PLAYER＞

在設計時使用這些元件可以指定下列屬性和事件：
PLAYER

• url
• Buffering
• Currentitemchange
• Currentplaylistchange
• Error
• Markerhit
• Mediachange
• Mediacollectionchange
• Modechange
• Mpenstatechange
• Mlaylistchange
• Mlaystatechange
• Mositionchange
• Mcriptcommand
• Mtatuschange

SETTINGS

• autoStart
• balance
• baseURL
• defaultFrame
• enableErrorDialogs
• invokeURLs
• mute
• playCount
• rate
• volume

CONTROLS

• currentMarker
• currentPosition

Other UI Elements

如果元件是使用者可以看見的就稱為control。
下列為面版可用的controls：

• Buttons
• Sliders, custom sliders, and progress bars
• Text boxes
• Video windows
• Visualization windows
• Playlist windows
• SubView windows

除此之外﹐一些元件可以用來更進一步定義 Windows 媒體播放器動作：

• Video settings
• Equalizer Settings
• Visualization settings

Buttons

Buttons 是面版的最受歡迎的部份。
你可以使用buttons觸發動作 , 像是play, stop,quit,minimize,檢視框切換 等按鈕。
Windows 媒體播放器提供二類型按鈕元件給面版創建者：
BUTTON元件和 BUTTONGROUP 元件。
除此之外，按鈕有一些預先定義型態。

BUTTON 元件
如果你使用BUTTON 元件，你一定要為每個按鈕供應一個圖而且定義精確的位置。
BUTTON元件的優點之一是你可以動態地改變按鈕圖。

BUTTONGROUP 元件
BUTTONGROUP 元件是作為按鈕群組的使用。
事實上﹐你一定要用一組 BUTTONGROUP 標籤圍繞每個 BUTTONGROUP 元件。
使用按鈕群組是比較容易的因為你不須為每個按鈕指定精確的位置 。
改為﹐當滑鼠移動時或滑鼠按下時 , 將發生的動作對映到你供應的圖上。

Predefined buttons
有一些預先定義的按鈕。
舉例來說﹐你可以使用一個 PLAYELEMENT 按鈕撥放媒體檔案和 STOPELEMENT 按鈕停止撥放。
請參閱面版程式設計參考的 BUTTONGROUP 元件和按鈕元件。
IMAGEBUTTON 可以用來顯示回應特定的事件圖形。

Sliders

滑動器會隨著時間改變的訊息合作是有用的。
舉例來說﹐你可以使用一個滑動器指出音樂已經撥放的長度。
他們可能是水平或垂直，線性或圓形的，或你可以想到的任何的形狀。
滑動器有三個多樣性：
滑動器，進度列和自訂滑動器。

滑動器
你可以使用 SLIDER 元件作為音量控制或 媒體控制,讓使用者可以任意移動到不同的部份.
進度列
進度列與滑動器類似。
舉例來說﹐你可以使用進度列指出緩衝區進度。

自訂滑動器
你可以建立控制 , 像是knobs，或做不尋常的控制機制。
舉例來說﹐如果你想要建造一個在你的面版的周圍包裝的音量控制，你可以做一個自訂滑動器。
為了要建立自訂滑動器，你要建造一個灰階圖形來定義滑動器上的數值位置的影像映像。

Text

你可以使用TEXT 元件在你的面版顯示文字，像是歌名。

Video 視訊

元件來設定視訊。
舉例來說﹐你可以建造控制調整視訊的亮度。
如果你不供應影像元件，視訊內容， Windows 媒體播放器將回到完整的模態和你的面版將不被顯示。
Equalizer Settings 等化器設定

你可以使用 EQUALIZERSETTINGS 元件指定聲音頻帶。
本質上這意謂你可以低頻增強﹐拉高音﹐建立聲音與你的耳朵或你的客廳匹配。

Visualizations 視覺化

你可以在你的面版上顯示視覺化。
當聲音正在撥放時 ,視覺效果顯示視覺化。
效果元件決定視覺化將在哪裡撥放，及視窗大小﹐及撥放那一個視覺化。

Playlists 撥放清單

你可以使用 PLAYLIST element 讓使用者從撥放清單選擇.

SubViews 子檢視框

你可以使用 SubView 顯示第二組的介面控制，像是 撥放清單 或視訊控制。

未完....待續

------
︿︿

Art Files

面版美工使用下列三種：

Primary Images

你必須為你的面版建立一個主要的畫面。
當安裝你的面版時 , 這是使用者所將看見的畫面。
主畫面由特定的面版控制建立一個或更多的影像。
如果你的View控制超過一個的話，你必須指定 圖層順序z-order。
z-order定義顯示順序,那一個在上那一個在下。
每個View控制會有一個背景畫面你可以把其他的元素的畫面加入，建造一個主要的複合畫面。
你也可以有第二的畫面，當你的面版剛顯現時第二的畫面不顯示 ,但當使用者採取一些行動時顯現第二的畫面，像是一個sliding tray。

Mapping Images

Windows 媒體播放器面版最強的功能之一是你可以使用影像映射到觸發事件。
影像映射是含有特別的影像的檔案。
基本上﹐使用者不法看到，但是滑鼠可以。
不同的控制需要不同的類型影像映射。
舉例來說﹐如果你把一個影像上顏色對映一個特定的紅色的數值 , 及使用者在你的主畫面紅色區域上按下滑鼠鍵，一個按鈕將觸發一個事件。
顏色用來定義在面版的什麼區域單擊觸發那一個事件。

Alternate Images

當使用者做某事的時候 , 你也可以建立交互影像顯示。
舉例來說﹐當滑鼠在按鈕之上移動時 , 你可以建立按鈕的交互影像。

Primary Images

主畫面由VIEW元素定義背景影像及特定元素搭配定義其他影像組成。
舉例來說﹐如果你建造一個按鈕元素，你一定要為那一個按鈕包含一個美工圖案，並且確定它的 z-order 高於背景影像。

Creating Art

大多數的繪圖軟體可以幫助你建造美工圖案傑作。

Mapping Images

映射影像作為指定控制那一個區域將回應滑鼠單擊並且決定控制接收事件。
映射影像必須與主畫面相同高度和寬度並且應該完全登記以便影像在兩個檔案中完全劃分。
由於這個理由，所以介紹使用Adobe Photoshop 因為你可以在不同影像的圖層工作 。
不同的控制需要不同的類型映射。

ButtonElement 控制需要為每個按鈕作不同的顏色的對映。
在映射檔的顏色區域必須符合你想要對映的按鈕的區域。

Alternate Images

當面版初始顯示時，交互影像是不被看到的影像，但回應滑鼠事件時是變成看得見。
舉例來說﹐你可以設定面版當滑鼠在特定區域移動時，美工圖案在那一個區域中變換 。
這可以視覺上告知使用者他們可以在一個區域上點一下滑鼠。

Art File Formats

Windows 媒體播放器面版可以使用下列美工圖案檔案格式：
BMP
JPEG
GIF
PNG
Note 如果你使用壓縮檔案格式定義一顏色作為透明，是不可以的。
使用一顏色表示你的影像透明的區域，然後在面版定義檔內定義那一顏案作為透明。
舉例來說﹐如果你建造一個 gif 檔案一些區域透明，他們將不是你的最後的影像的透明，而且你不能夠使用你的面版的透明顏色設定作圍 gif 檔案的透明顏色。

Simple Art Example

用二個按鈕建立簡單的面版需要三個美工圖案檔案。
需要主畫面和映射畫面和交互畫面
這些art檔案是在Adobe Photoshop建立的 但是也可以使用其他繪圖軟體。
因為你要確定你的主畫面 ，映射畫面 ，交互畫面全部是相同的尺寸和劃分所以使用圖層的繪圖軟體是比較容易工作。
關於建造art的詳細操作請參閱面版創造指南。

Primary Image

主畫面是一個簡易的黃色的橢圓形和二個按鈕，一個粉紅色按鈕啟動 Windows 媒體播放器和紫色按鈕停止。
背景是比橢圓形些微黑暗的黃色。


下列各圖是在Adobe Photoshop 所建立的主畫面，每個畫面有個別的圖層。

第一個橢圓形與斜邊及浮雕效果一起建立。


然後建立二個按鈕，也是同樣斜邊及浮雕效果。

然後建立背景影像。
選擇暗黃色，如此在橢圓形和背景之間的任何反偏不會被注意到。
色彩值是＃CCCC00。

把這些影像圖層存成 BMP 格式檔案。
使用主畫面組成的影像設定VIEW元素的 backgroundImage 屬性。

Mapping Image

映射影像與一個紅色的區域和一個綠色的區域一起建立。


綠色的區域將用來識別 Windows 媒體播放器啟動和紅色的區域將用來停止。
映射影像需與主畫面相同尺寸。
藉由拷貝按鈕圖層到新的圖層並把斜邊浮雕效果及關掉建立映射影像。
因為 Windows 媒體播放器將在每個區域中找尋單一色彩值 , 所以映射需要平的影像。
它只可以尋找一種你定義的顏色，舉例來說紅色的 （#FF0000）, 如果你的影像有一個斜邊或其他的效果，它無法知道全部都是你需要。
用易記的顏色做映射按鈕，影像填滿純紅色的和純綠色﹐但是任何的顏色都可以使用。
以便他們可以進入XML面版定義檔中 , 你需要記得你的映像的色彩數值。
在這一情況下﹐紅色是＃FF0000 和綠色是＃00 FF00 。
然後隱藏其他圖層只顯示新的層，把影像存成 BMP 檔案。
它將稱為 BUTTONGROUP 元素的 mappingImage 屬性。

Alternate Image

不一定需要交互影像但是對於提供視覺線索給使用者是很有用的。
在這情況，介紹hover image以便使用者知道在什麼區域上可以clicked。
交互影像與二個黃色的按鈕一起建立。

藉由拷貝原始的按鈕圖層到一個新的圖層然後改變填滿黃色建立交互影像。
保留斜邊及浮雕果。
然後新的圖層，增加影像：
箭號指示”撥放”和正方形指示”停止”。
然後，新的黃色的按鈕，存成 BMP檔案。
結果是當滑鼠移動到映射影像定義的區域映，那hover image將被顯示

Final Image

面版的最後的影像在這裡：


如果你在右側的粉紅按鈕之上移動 , 這是你將看見的影像：

XML Code for the Art Example

這一個實例顯示如何建造面版工作的小程式碼，該如何寫XML程式碼詳細內容請參閱面版創造指南。
預定義按鈕作為撥放及停止函數。
你必須從 Windows Media連結點載入檔案或 playlist 。
當 Windows 媒體播放器 view改變成面版模式時，一個小的方格在螢幕的右下角中出現。
這一個方格叫做連結點而且在它上面點一下給你需要的最小化的功能，以防萬一面版不提供要回到完全模式的一個方法。
如果在完整的模式使用者可以在檢視菜單的使用模式之間切換，如果在面版模式中連結點可以模式之間切換。

＜THEME＞
    ＜VIEW
        clippingColor = "#CCCC00"
        backgroundImage = "background.bmp"
        titleBar = "false"＞
         
        ＜BUTTONGROUP
            mappingImage = "map.bmp"
            hoverImage = "hover.bmp"＞
                
        ＜PLAYELEMENT
            mappingColor = "#00FF00"/＞            ＜STOPELEMENT
            mappingColor = "#FF0000"/＞
                
        ＜/BUTTONGROUP＞
    ＜/VIEW＞
＜/THEME＞

未完....待續
        

JScript Files

JScript 檔案由 VIEW元素的 scriptFile 屬性載入。
他們一定是文字檔而且應該使用附檔名 *.js。
如果你的 JScript 檔名與面版定義檔名相同時，JScript 檔案將隨面版定義檔同時載入。
舉例來說﹐如果你有一個面版定義檔案名稱laure.wms ﹐而且你有 一個JScript 叫做 laure.js 的檔案，laure.js 檔案將自動載入。

你可以使用 Microsoft JScript 在你的面版後面建立精心的功能。
藉由 JScript 的建造函數﹐你幾乎可以做任何想像的面版。
舉例來說﹐你可以每天使用不同的撥放清單。
關於 JScript和面版一起使用的更多資訊請參閱使用 JScript 。
當網頁中置入一個 Windows 媒體播放器控制時可以使用VBScript 但不支援面版。

未完....待續

------
︿︿

File Name Extensions

Windows 媒體中繼檔 附檔名的使用特定指導方針。
Windows 媒體中繼檔附檔名用來識別 Windows 媒體的不同的類型檔案。

File name extension	MIME type	File content
.wma	audio/x-ms-wma	Windows Media file, with audio content only. Typically used to download and play files or to stream content.
.wmv	video/x-ms-wmv	Windows Media file with audio and/or video content. Typically used to download and play files or to stream content.
.asf	video/x-ms-asf	Legacy content. Typically used to download and play files or to stream content. May contain audio and/or video content. Typically used to download and play files or to stream content.
.wm	video/x-ms-wm	Reserved
.wax	audio/x-ms-wax	Metafiles that reference Windows Media files with the .asf, .wma or .wax file extensions.
.wvx	video/x-ms-wvx	Metafiles that reference Windows Media files with the .wma, .wmv, .wvx or .wax file extensions.
.asx	video/x-ms-asf	Metafiles that reference Windows Media files with the .wma, .wax, .wmv, .wvx, .asf, or .asx file extensions.
.wmx	video/x-ms-wvx	Reserved

Remarks
Scripting and digital rights management (DRM) must be supported by any application rendering Windows Media files.

未完....待續

------
︿︿

建構 你的第一個面版    簡單的面版的程式碼如下 <BUTTONGROUP mappingImage = "map.bmp" hoverImage = "hover.bmp"> <BUTTONELEMENT mappingColor = "#00FF00" upToolTip = "Play" = " view.close(); " /> </BUTTONGROUP> 現在你可以使用 使用 PKZip ， WinZip 或另外程式將所需的檔案壓縮成PKWare 格式 重新命名檔案 a.wmz 然後點兩下你已壓縮面版來將它啟動。

------
︿︿