WMPスキン作成方法

WindowsMediaPlayer用スキンの作成方法について。

1.スキンファイルの構成

WMPのスキンは、以下のファイルにより成り立っています。

スキン定義ファイル（文書ファイル）
拡張子が.wmsのファイルです。
これをメモ帳などで編集する事により、スキンの定義を行います。
アートファイル（画像ファイル）
スキンの画像ファイルです。.bmp,.jpg,.gif,.pngなどがサポートされています。
Jscriptファイル（文書ファイル）
複雑な処理をする場合に使用する、Jscriptのファイル。
拡張子は.jsです。

2.アートファイルの作成

まず、アートファイルの作成から取り掛かります。
アートファイルには、以下のような種類があります。

1次イメージ
メインの画像イメージ。
このアートファイルがそのままスキンの外見になります。
マッピングイメージ
スキンをマウスでクリックしたりする時の、
タイミングと場所を指定するのに使用します。
要するに、当たり判定みたいな感じかな？？
代替イメージ
簡単に言えば、クリックした時の画像です。

んで、取り合えず1次イメージを作ってみました。

・・・すいません、時間が無かったんで適当です。(^^;（main.gif）

次に、マッピングイメージ。
この例の場合、赤色の所をマウスが移動すると再生ボタンの画像が変化し、
緑色の所をマウスが移動すると、停止ボタンの画像が変化する・・・
という感じになります。

(map.gif)

・・・で、代替イメージ。

(hover.gif)

ちなみに、全て大きさは400*300です。
あと、今回はプログラムで作成したのですが、
レイヤー機能を持ったお絵かきソフトで作成すると、比較的効率良く作成できます。（謎

3.スキン定義ファイルの作成

で、スキン定義ファイルを作成します。
このファイルは、HTMLの拡張版の、XMLという言語を用いて記述します。
なので、HTMLの知識がある方なら、簡単に分かるはず・・・
というわけで、こんなソースを作ってみました。

<THEME>
	<VIEW
		backgroundImage = "main.gif"
		titleBar = "False">

	<BUTTONGROUP
		mappingImage = "map.gif"
		hoverImage = "hover.gif">

	<PLAYELEMENT
		mappingColor="#FF0000"/>

	<STOPELEMENT
		mappingColor="#00FF00"/>

	</BUTTONGROUP>
	</VIEW>
</THEME>

このように、一つのスキン定義ファイルには、
<THEME>タグと<VIEW>タグがそれぞれ一つ以上必要です。
そして、<VIEW>タグと</VIEW>タグの中にいろいろなタグを記述する・・・
基本はこんな感じです。

では、タグについての説明。

<THEME>
このタグの中に、いろいろなタグを追加します。
<VIEW>
スキンのインターフェイスを定義します。
backgroundImage = "File"で１次イメージを定義します。
また、titleBar = "True|False"でタイトルバーの有無の切り替え、
clippingColor = "Color"で、指定した色の透過処理が行えます。
<BUTTONGROUP>
ボタンを定義します。
mappingImage = "File"でマッピングイメージ、
hoverImage = "File"で代替イメージを定義します。
<PLAYELEMENT/>
再生用ボタンの定義をします。
mappingColor="Color"に、マッピングイメージ内の任意の色を指定します。
<STOPELEMENT/>
停止用ボタンの定義をします。
mappingColor="Color"に、マッピングイメージ内の任意の色を指定します。

4.完成！！

・・・とまぁ、こんな感じで作成します。
かなり説明不足な所が多いので、もっと詳しく知りたい方は、MicroSoft社のHPから、
WMPSDKをダウンロードする事をオススメします。(^^;

資料室のトップに戻る