创意公社- ideaera
zRZ4|gG(jb因为不太知道怎样的教程比较合用,所以我想把这个教程做成互动式的,一部分一部分地放上来,大家可以对这篇文档提出自己的建议和要求,我根据大家的需求来改,目前拟定的目录如下:
5F8q-w|^"\r5{2o'i7Ww c0
!OVO?i0微软媒体播放器SKIN制作教程目录创意公社- ideaer.cfJHO;fl
创意公社- ideaer i,Q,U;D:_1y5j3xL4s)B微软媒体播放器SKIN制作教程之(一)――简介
Yo#}&l~sY0Q0
创意公社- ideaer:b[
L(_8Ka微软媒体播放器SKIN制作教程之(二)――XML热身
:utw1C
Da4Q9@0
/{T.R\*W/@,B0微软媒体播放器SKIN制作教程之(三)――准备图片
7z I._-I
]g0
创意公社- ideaerljS7tC;F微软媒体播放器SKIN制作教程之(四)――媒体播放器用到的XML
2BD C4q(MW0
ZvhB"y'S0J"z0微软媒体播放器SKIN制作教程之(五)――媒体播放器用到的JS创意公社- ideaer9CxC#M8G*aa?'\
创意公社- ideaer3M|4Yg!jJ*@微软媒体播放器SKIN制作教程之(六)――常用参数
w%R%b?/L0oR"S0
0Ell)`2N$G\B#x4?&Vx0如果大家有进一步的要求,还可以搞一些进阶教程。
6ls
vlC L?)L)p)]0
/Z*Sna!l j0微软媒体播放器SKIN制作教程之(一)――简介创意公社- ideaer)Wu'Dp Vk
9@?h?h7H^k4C0一个微软媒体播放器SKIN其实是非常简单的,它主要由三部分文件组成:
[0i-B1UW8R0
创意公社- ideaerxQ1s6\ SG.~ X
xF图片: 好消息――BMP,JPG,PNG,GIF都可以用;坏消息――不支持ALPHA透明和GIF的透明,在程序里是用关键色来透明的。创意公社- ideaero"GZ6K.}$l,f3@
:nIm1P/F1r5Vz0XML文件:定义媒体播放器各个元素的组成,位置,调用JS文件里的操作。创意公社- ideaer?0HGF.Z"W@+P3\
创意公社- ideaerQj2U jC&L;l'mJS文件:用javascript对媒体播放器各个元素进行操作,定义它们的属性,生成一些动态效果,要注意:这个JS里包含一些微软媒体播放器专用的JS。创意公社- ideaern\:xL0G.d
8[U&whu?iP0重要的参考文档:微软媒体播放器开发包(http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe),虽然是E文的,涉及SKIN的部分内容还是非常的简单,目前还没看到中文的……创意公社- ideaerL,`!k-O
JC3XpeQ
创意公社- ideaer6u!t)y
bIbc微软媒体播放器SKIN制作教程之(二)――XML热身
eU{5W]0
w+Mh2J)J7s&?xo(d,XAq"w0这节主要简单谈一谈什么是XML,与媒体播放器本身的XML制作方法关系不大,熟悉XML的朋友可以略过不看。
4c/\^&vO.B4|M0
t6A6?R&i7}
e0什么是XML(Extensible Markup Language)?创意公社- ideaer1i plZw
)~*cm@C4l8w
zB0就象HTML是定义格式的一样,XML是用来定义数据的,微软媒体播放器用到的XML非常简单,我们了解一小部分就可以了。官方的文档如果你有兴趣看,可以到
http://www.w3.org/XML/看,不过官方的文档总是比较乏味,做SKIN并不需要那么多乏味的细节,我们还是先秀一个最简单的XML文件(demo.xml),打开记事本,输入以下的文本:创意公社- ideaer%]A-Mc `&z
2t+tzCD/zw0
X(\_9jf8fW?0
创意公社- ideaerp(p#la,_<甜品>
wX&B)mF0
;};F!b.pVD2a&H]0<冰淇淋>创意公社- ideaer+_r#X.d&w4zpF?c
e@X ?W0<颜色>柠檬黄颜色>创意公社- ideaer
k HSj;uspG
XX
S1u?B0<口味>微酸口味>
8r6Y^z#n/g\0
(|pPckp\"V l0冰淇淋>创意公社- ideaer {8j*]?\#G(h
创意公社- ideaer:iv$t
or+Nw甜品>
E8x;}/dUF"J Q0
创意公社- ideaerx6B.mj2[;s2Oj用IE浏览器打开这个XML文件(后缀一定要是XML),你会看到如下的效果:
7n2mNM@
r kc { {M0
创意公社- ideaer+R@t^k6J(L
VG
创意公社- ideaer&xY(]N(e
创意公社- ideaereIdkE@lN^;w(?如果点击那个减号,还可以折叠这个树状结构的东东――呵呵,把XML文件暂时理解为一棵树就对了。另外,实际的应用中XML标记绝大多数都是使用英文的,我这里用中文是为大家看起来比较方便。创意公社- ideaerR8g%W'H
_p
gPFJ0i}0首先解释这句:
~ u/}&?ik
S5V5g0
创意公社- ideaer.PxB+z9ext`c)}y2B它表明这是一个XML文件(废话?),如果你的文件中有中文,encoding=GB2312是必不可少的,当然,可加的东东还很多,不过我们现在就先说这些(秘密:媒体播放器的XML根本不用这一句,这句是方便你在IE中看文件用的)。创意公社- ideaerk-_8s'sQ d;{
创意公社- ideaer
i;j*|tM
U'E{-^其它的标记都是成对出现的,是不是和HTML很象?不过XML更严格,必须要成对出现,否则就会出错。其中“<甜品>甜品>”是这个文件的根元素,只能有一个哦!象“<冰淇淋>冰淇淋>”和“<颜色>颜色>”这样的叶子则可以有好多个,还可以嵌套,它的目的只有一个:用来描述你所有的甜品。我们再加一个冰淇淋和一个水果拼盘:
g2Y
^*r5I#q$n|`i0
d:k9zE#I1Om+}'Z0
5o |aKD;r&Cm!\0
N%PK@sUfYa0<甜品>创意公社- ideaer%g0{U$O
Wa({
.wNN{)~2I G!U0<冰淇淋>创意公社- ideaer\0cqs*N9?
1Q4i,DO9K ]0<颜色>柠檬黄颜色>创意公社- ideaer.ELV[Eu
(P.vDb%s{ dpGW0<口味>微酸口味>
!f5lv!`(t0
创意公社- ideaerb J|/K,~!Qw冰淇淋>
#?w!@b\xa8Px1c#f0
~@\g0r*BL%~e0<冰淇淋>
w'n@4Q!A-hN(^0
创意公社- ideaer }cVf4Dwt<颜色>草莓红颜色>创意公社- ideaer J.I C*Z}#@'p ve
,b!P
W
I~&k\(k.G0<口味>甜口味>创意公社- ideaer Zlj$|+_XF)_\h
创意公社- ideaer1J~,Cl
e<装饰>一把小伞装饰>创意公社- ideaer]^%O8}|
yO_ ~m~0冰淇淋>
0dW8i'XDv sD0
创意公社- ideaer(R8Qx[H<水果拼盘>创意公社- ideaer|BH-bY.? zO
创意公社- ideaerQ*by.Ca4I9XF#V<水果>创意公社- ideaer,X^Fp"UV
L
_sD|e0<西瓜 价钱=便宜的/西瓜>创意公社- ideaerX6UB2X4q'C8C
5T)Y@Xy-Flr0<西瓜 价钱=便宜的 质量=生的/西瓜>创意公社- ideaer0|$TD[HS#t$a
创意公社- ideaer/AV:e)@k<蕃茄 质量=洗净的>蕃茄>
f9X%D7B U0
创意公社- ideaer`8R%t
UG!_2n[B h水果>
L [6N
]p*r/U9z0
创意公社- ideaer_$\)I*xIt6c<装饰>塑料小勺一把装饰>创意公社- ideaer,p,S5i
^j%{
I`-O\8o|{[0水果拼盘>创意公社- ideaerS"[;kvI%oaxe
r2T
创意公社- ideaer fT9h
l3{ af1y!c甜品>创意公社- ideaerr$Wk|kj|
创意公社- ideaeruC-\4V"Q
s3t9l5[F发现什么变化没有?西瓜和蕃茄有了“价钱”和“质量”的属性了,每片叶子都可以有不止一个属性,其它程序调用它们时会用到这些属性,另外“<西瓜 价钱=便宜的 /西瓜>”和“<西瓜 价钱=便宜的>西瓜>”是一样的,中间没内容当然就简写啦,这种简写也代表标记是成对的,并不意味着标记可以不成对,切记!创意公社- ideaerV]KBSSi'o){H
-WEDg'D8L?I8t0关于XML这种标记语言就讲这么多,但愿你没有被我的冰淇淋和西瓜搞晕……创意公社- ideaer%O0p V@\!W`
*R,R
n)ln-d/ID0唉,其实只要记住XML是用来表述数据的就可以了……
p:~,VIy-k+r0
QB[6y&m+Y(m"Zs0微软媒体播放器SKIN制作教程之(三)――准备图片创意公社- ideaer5A:t4x}6T*N*_E
创意公社- ideaer$S3ijRPhhC!@y要做一个最简的SKIN,我们只需要准备三张图片:创意公社- ideaerD*KFH@"uH{
创意公社- ideaer vAIb8w"u图片一:SKIN的初始状态(background.gif)
(l2Pr5lg"`Y1rr2J%o0
创意公社- ideaer"s0kH3zL`R8Z
创意公社- ideaer5\9ky:r r'[jA
9ALm2i_9~d?0图片二:SKIN的mouseover状态(hover.gif)创意公社- ideaerX8e&xb#GJ
创意公社- ideaer6fR(d&D(fq7i
/U6H,q%KQl6U!D0
Te?"~L Y5a)@;z0图片三:蒙板图(map.gif)
"? ]!k
@"a?g'g,J0
%hS7P$jy J C0
创意公社- ideaeru.I0dHHiX6l4f7n
F7j2IRi0微软媒体播放器SKIN制作教程之(四)――媒体播放器用到的XML
0jy.JJu$w8J0
创意公社- ideaer8U2G.\ bt1]7z5e p微软媒体播放器SKIN所用的XML有特定的标记,我们先搞个最简的说明一下,用记事本建立如下的文本文件:
/p4t@!f5T5v/N3]LX0
} Ct(eo?#f}{0
B"N-q?.T3ye)I.f/sf^#[ r0
创意公社- ideaer'Y!Qz7P,b@W创意公社- ideaer5M%uGgO!H
创意公社- ideaerw/G*Hd@1rP'lclippingColor = #FF0000创意公社- ideaer]M2v \:H!q7x
L
fpBv0backgroundImage = background.gif
VK3A5Y2B ^&b0[)n!G0
(tm#~$[`,Q'@T0titleBar = false创意公社- ideaerk]i'\KS;O~EnM7p[
创意公社- ideaer{7]@.`|)t*SscriptFile = demo.js>
l6{ {XCt \'[8Xi0
创意公社- ideaer5p7Y[&Mu#O/a~创意公社- ideaerK5x
v@u"Li
创意公社- ideaerz;vG0Gh`mappingImage = map.gif创意公社- ideaerD[/O&zI|#D
6yt
zYF0hoverImage = hover.gif>
N b!|\ b_dz@0
5Y
H
^"uP+uv0创意公社- ideaerx,Y1@H0d_tm/D J%G%Px
创意公社- ideaerr[J!?D~aY:lamappingColor = #FF00FF />
7^
N*m+TK
}Bj0
创意公社- ideaer;sS6M!Eu6p创意公社- ideaerB1geD2Fttv
`3K:xe8J%k`0mappingColor = #00FFFF />创意公社- ideaer3v2ZA so1V nF
0Yl9Ea0e&|0B[g8o&H0创意公社- ideaer#u6hg5P'Qzf%{ Z
创意公社- ideaer`3Ut6tP]mappingColor=#00FF00创意公社- ideaerx{ET]]:s%] ~
XA]A FH1I*e0upToolTip=打开文件创意公社- ideaer,^H.B/N&D-p1]E
创意公社- ideaer;}d5a0m,rQN,VA,uonClick=openFile()创意公社- ideaernX w g'|}V|-]`|siT
S5[
d:~*scB0enabled=true/>
+H
@ILHF'b0
c;Bjb
Ac.M)o0
*V%g|y}8W0
0d/pl
c2SO0
Mz \8i-`0
创意公社- ideaer$d"k,hEt7c创意公社- ideaer/W;Y_N vx
pc3V\
K5O8h5}%jz0“THEME”就是这个XML文件的根元素,“VIEW”是在这个根元素下的一个视觉元素,这个视觉元素包含一个按钮组“BUTTONGROUP”,而这个按钮组又包含三个按钮:一个是用来播放音乐的“PLAYELEMENT”;一个是用来停止播放的“STOPELEMENT”;还有一个“BUTTONELEMENT”是用来打开音乐文件的。
A?DFW0
创意公社- ideaer%\/x7P o&r
I]w详解一下上面这些元素的部分属性:创意公社- ideaer;~~qH-l1^B
Pe7e
%}*CrzQ[~HZd0clippingColor = #FF0000:这是让SKIN的圆角透明,关键色#FF0000;创意公社- ideaer.OP3f&i!M
创意公社- ideaerpv4V [[#};|zbackgroundImage = background.gif:这是SKIN的背景图像;创意公社- ideaer/Y |LR(zsmLg,X
v#nZ+{HTnk0titleBar = false:不显示媒体播放器自带的菜单;创意公社- ideaerq@S7g
m;Q+j(\A
?7dc?&q:H0scriptFile = demo.js:指定SKIN所用的JS文件;
't"e qD3p.R8hT'xa0
创意公社- ideaerSsLY!Y j_}QmappingImage = map.gif:SKIN所用的蒙板图片,可以设定按钮的形状;创意公社- ideaer}!R4R+cg4k$W:\W
*D?p*~*\cs oS0hoverImage = hover.gif:鼠标移到按钮上时显现的图片;创意公社- ideaer5cBGFG)y!s
n7Qk+g]s!v M0mappingColor = #FF00FF:蒙板上关键色为#FF00FF的区域显示为播放按钮;创意公社- ideaer"N.fA;Uh1kx
Qp%C)I4XMyAp9K0upToolTip=打开文件:鼠标移上去时出现的提示文本;
"ahJPb(sg|$a0
)bhy3k5C&u,c0onClick=openFile():点击时调用demo.js里的openFile()函数;
&s^#WA+V5Z\/p {0
*F4]E;m#vOz5w.x0OK,是不是很EASY呢?现在我们把这个文本文件的后缀改为wms,呵呵,这个SKIN就差一个JS文件了,我们的下一步教程就是来写这个JS文件。
(M9kr?.q.yeV0
创意公社- ideaer@\#G6G;k
KUY微软媒体播放器SKIN制作教程之(五)――媒体播放器用到的JS创意公社- ideaer4~S"`;~9KCJ
创意公社- ideaer\`:BN#@sc用记事本建立如下的文本文件:
V.p3x Yl+W'b2n(g0
创意公社- ideaer ]2l
r%X+~3SwIdfunction openFile(){
h:[7rh3Ku-l._.~6W!z5h0
创意公社- ideaer*n[&?&bGnmedia = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');创意公社- ideaer
Bp-d"KJ&_DY![
创意公社- ideaer9d6p
UV,{%qif (media) {
:|ALC F
pjOu.^0
创意公社- ideaer~z:tD}!Gplayer.URL = media;
HO%oBbW.Ai5l0
创意公社- ideaer9A.A
U `/A8Z|D(s,P}创意公社- ideaer!I"F-V4\)y
创意公社- ideaer8T%~G;}-D+cC}创意公社- ideaer$?-S$m5Wk'J%\
)o$gS6h9k t"}0学过javascript的朋友看懂这段绝对是没有问题的,这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。
|6Sw'W5z8QR0
^3@!UTC Dd0现在,把这一小段脚本存为demo.js,这样,我们的SKIN就基本制作完毕了。
O`XX1R'[0
创意公社- ideaerJ0z-v9Xq
L aV最后,我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件,再将zip后缀改为wmz,一个最简单的媒体播放器SKIN就搞定了!创意公社- ideaer`H6V*~$l7r@5n
创意公社- ideaer+YE}Z|;[[双击它看看效果吧,不过因为这个SKIN太简单了,我们没做关闭按钮和其它的东东,大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerN&B?"P#Nn}
创意公社- ideaer&i]5n0a
gdakP微软媒体播放器SKIN制作教程之(六)――常用参数
?wIfF+Be0
创意公社- ideaertH,PC#Q.Jz……这个,有空再慢慢加!创意公社- ideaer%g;o4m/pd9ffH
创意公社- ideaer%I1n+q s2K$W-\G有作品了别忘记放上来大家看看哦!
fY4_,[L K]0