你的位置:创意公社- ideaer >> 百科 >> 交互设计 >>详细内容 在线投稿

媒体播放器SKIN制作全攻略

打印 发布者:pl5788
热度473票  浏览395次 【共0条评论】【我要评论 时间:2010年10月18日 09:56
创意公社- ideaera zRZ4|gG(jb

因为不太知道怎样的教程比较合用,所以我想把这个教程做成互动式的,一部分一部分地放上来,大家可以对这篇文档提出自己的建议和要求,我根据大家的需求来改,目前拟定的目录如下:

5F8q-w|^"\r5{2o'i7Wwc0

!OVO?i0微软媒体播放器SKIN制作教程目录创意公社- ideaer.cfJHO;fl

创意公社- ideaer i,Q,U;D:_1y5j3xL4s)B

微软媒体播放器SKIN制作教程之(一)――简介

Yo#}&l~sY0Q0 创意公社- ideaer:b[ L(_8Ka

微软媒体播放器SKIN制作教程之(二)――XML热身

:utw1C D a4Q9@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!lj0微软媒体播放器SKIN制作教程之(一)――简介创意公社- ideaer)Wu'DpVk

9@?h ?h7H ^k4C0一个微软媒体播放器SKIN其实是非常简单的,它主要由三部分文件组成:

[0i-B1U W8R0 创意公社- ideaerxQ1s6\ SG.~X xF

图片: 好消息――BMP,JPG,PNG,GIF都可以用;坏消息――不支持ALPHA透明和GIF的透明,在程序里是用关键色来透明的。创意公社- ideaero"GZ6K.}$l,f3@

:nIm1P/F1r5Vz0XML文件:定义媒体播放器各个元素的组成,位置,调用JS文件里的操作。创意公社- ideaer?0HGF.Z"W@+P3\

创意公社- ideaerQj2UjC&L;l'm

JS文件:用javascript对媒体播放器各个元素进行操作,定义它们的属性,生成一些动态效果,要注意:这个JS里包含一些微软媒体播放器专用的JS。创意公社- ideaern\:xL0G.d

8[U&whu?i P0重要的参考文档:微软媒体播放器开发包(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+tzC D/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

X X S1u?B0<口味>微酸

8r6Y^z#n/g\0

(|pPckp\"Vl0创意公社- ideaer{8j*]?\#G(h

创意公社- ideaer:iv$t or+Nw

E8x;}/dUF"J Q0 创意公社- ideaerx6B.mj2[;s2Oj

用IE浏览器打开这个XML文件(后缀一定要是XML),你会看到如下的效果:

7n2mNM@ rk c { {M0 创意公社- ideaer+R@t^k6J(L VG

创意公社- ideaer&xY(]N(e

创意公社- ideaereIdkE@l N^;w(?

如果点击那个减号,还可以折叠这个树状结构的东东――呵呵,把XML文件暂时理解为一棵树就对了。另外,实际的应用中XML标记绝大多数都是使用英文的,我这里用中文是为大家看起来比较方便。创意公社- ideaer R8g%W'H _p

gPF J0i}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} cVf4D wt

<颜色>草莓红创意公社- ideaerJ.I C*Z }#@'pve

,b!P W I~&k\(k.G0<口味>甜创意公社- ideaerZlj$|+_XF)_\h

创意公社- ideaer1J~,Cl e

<装饰>一把小伞创意公社- ideaer]^%O8}|

yO_ ~m~0

0dW8i'XDvsD0 创意公社- ideaer(R8Qx[H

<水果拼盘>创意公社- ideaer|BH-bY.? zO

创意公社- ideaerQ*by.Ca4I9X F#V

<水果>创意公社- ideaer,X^ Fp"UV L

_sD|e0<西瓜 价钱=便宜的/西瓜>创意公社- ideaerX6UB2X4q'C8C

5T)Y@Xy-Flr0<西瓜 价钱=便宜的 质量=生的/西瓜>创意公社- ideaer0|$TD[HS#t$a

创意公社- ideaer/AV:e)@k

<蕃茄 质量=洗净的>

f9X%D7BU0 创意公社- ideaer`8R%t UG!_2n[B h

L [6N ]p*r/U9z0 创意公社- ideaer_$\)I*x It6c

<装饰>塑料小勺一把创意公社- ideaer,p,S5i ^j%{

I`-O\8o| {[0创意公社- ideaerS"[;kvI%oaxe r2T

创意公社- ideaer f T9h l3{af1y!c

创意公社- ideaerr$Wk|kj|

创意公社- ideaeruC-\4V"Q s3t9l5[F

发现什么变化没有?西瓜和蕃茄有了“价钱”和“质量”的属性了,每片叶子都可以有不止一个属性,其它程序调用它们时会用到这些属性,另外“<西瓜 价钱=便宜的 /西瓜>”和“<西瓜 价钱=便宜的>”是一样的,中间没内容当然就简写啦,这种简写也代表标记是成对的,并不意味着标记可以不成对,切记!创意公社- ideaer V]KBS Si'o){H

-WEDg'D8L?I8t0关于XML这种标记语言就讲这么多,但愿你没有被我的冰淇淋和西瓜搞晕……创意公社- ideaer%O0p V@\!W`

*R,R n)ln-d/I D0唉,其实只要记住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:rr'[jA

9A L m2i_9~d?0图片二:SKIN的mouseover状态(hover.gif)创意公社- ideaerX8e&xb#GJ

创意公社- ideaer6fR(d&D(fq7i

/U6H,q%KQl6U!D0

Te?"~LY5a)@;z0图片三:蒙板图(map.gif)

"? ]!k @"a?g'g,J0

%hS7P$j y 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?.T3y e)I.f/sf^#[ r0 创意公社- ideaer'Y!Qz7P,b@W

创意公社- ideaer5M%uGgO!H

创意公社- ideaer w/G*Hd@1rP'l

clippingColor = #FF0000创意公社- ideaer]M2v \:H!q7x

L fpBv0backgroundImage = background.gif

VK3A5Y2B ^&b0[)n!G0

(tm#~$[`,Q'@T0titleBar = false创意公社- ideaer k]i'\KS;O~EnM7p[

创意公社- ideaer{7]@.`|)t*S

scriptFile = 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>

Nb!|\ b_dz@0

5Y H ^"uP+uv0创意公社- ideaerx,Y1@H0d_t m/DJ%G%Px

创意公社- ideaerr[J!?D~aY:la

mappingColor = #FF00FF />

7^ N*m+TK }Bj0 创意公社- ideaer;sS6M!E u6p

创意公社- ideaerB1ge D2Fttv

`3K:xe8J%k`0mappingColor = #00FFFF />创意公社- ideaer3v2ZAso1V nF

0Yl9Ea0e&|0B[g8o&H0创意公社- ideaer#u6hg5P'Qzf%{ Z

创意公社- ideaer`3Ut6tP]

mappingColor=#00FF00创意公社- ideaerx{ET]]:s%]~

XA]AFH1I*e0upToolTip=打开文件创意公社- ideaer,^H.B/N&D-p1] E

创意公社- ideaer;}d5a0m,rQN,V A,u

onClick=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[[#};|z

backgroundImage = background.gif:这是SKIN的背景图像;创意公社- ideaer/Y| LR(zsmLg,X

v#nZ+{HTnk0titleBar = false:不显示媒体播放器自带的菜单;创意公社- ideaerq@S7g m;Q+j(\A

?7d c?&q:H0scriptFile = demo.js:指定SKIN所用的JS文件;

't"e qD3p.R8hT'xa0 创意公社- ideaerSsLY!Y j_}Q

mappingImage = map.gif:SKIN所用的蒙板图片,可以设定按钮的形状;创意公社- ideaer }!R4R+c g4k$W:\W

*D?p*~*\ cso S0hoverImage = hover.gif:鼠标移到按钮上时显现的图片;创意公社- ideaer5cBGFG)y!s

n7Qk+g]s!v M0mappingColor = #FF00FF:蒙板上关键色为#FF00FF的区域显示为播放按钮;创意公社- ideaer"N.fA;Uh1kx

Q p%C)I4XMyAp9K0upToolTip=打开文件:鼠标移上去时出现的提示文本;

"ahJPb(s g|$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.p3xYl+W'b2n(g0 创意公社- ideaer ]2l r%X+~3SwId

function openFile(){

h:[7rh3Ku-l._.~6W!z5h0 创意公社- ideaer*n[&?&bGn

media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');创意公社- ideaer Bp-d"KJ&_DY![

创意公社- ideaer9d6p UV,{%q

if (media) {

:|ALCF pjOu.^0 创意公社- ideaer~z:t D}!G

player.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$gS6h9kt"}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+Y E}Z|;[[

双击它看看效果吧,不过因为这个SKIN太简单了,我们没做关闭按钮和其它的东东,大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerN&B?"P#Nn}

创意公社- ideaer&i]5n0a gdakP

微软媒体播放器SKIN制作教程之(六)――常用参数

?wI f F+B e0 创意公社- ideaertH,PC#Q.Jz

……这个,有空再慢慢加!创意公社- ideaer%g;o4m/pd9ffH

创意公社- ideaer%I1n+qs2K$W-\G

有作品了别忘记放上来大家看看哦!

fY4_,[L K]0
顶:17
上一篇 下一篇
发表评论
换一张

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。

查看全部回复【已有0位网友发表了看法】

最新创意