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

媒体播放器SKIN制作全攻略

打印 发布者:pl5788
热度473票  浏览289次 【共0条评论】【我要评论 时间:2010年10月18日 09:56
创意公社- ideaer7o|@*Se

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

pC*`o2KWqi0 创意公社- ideaer6q)^7z-rd A/@(J;D*l

微软媒体播放器SKIN制作教程目录

aD N z)@A%u8e0

nJ&HQ] fe0微软媒体播放器SKIN制作教程之(一)――简介创意公社- ideaer"n.k1QQ"Y

X\WL [gy$`/P0微软媒体播放器SKIN制作教程之(二)――XML热身

dr AH!v0 创意公社- ideaeruWN;E^Z1p8x4e

微软媒体播放器SKIN制作教程之(三)――准备图片

@ n9}6L5}2W0 创意公社- ideaer!p:u'L)Ob"d'X

微软媒体播放器SKIN制作教程之(四)――媒体播放器用到的XML

&R|_2\ |v A\0 创意公社- ideaer}m J]O]9OR Ce

微软媒体播放器SKIN制作教程之(五)――媒体播放器用到的JS创意公社- ideaeric4] Z^

创意公社- ideaer1e0s1vw$i)K0P

微软媒体播放器SKIN制作教程之(六)――常用参数创意公社- ideaer_$Cms1At-H

创意公社- ideaer1S!X\k C5A k

如果大家有进一步的要求,还可以搞一些进阶教程。创意公社- ideaerF~!bj"K Y9{

创意公社- ideaer4v4c:|(Y$v(b8Pi[ K

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

]hX3[&Z3{0

9[-C7` gn/I0一个微软媒体播放器SKIN其实是非常简单的,它主要由三部分文件组成:创意公社- ideaer)y ST:C;X{-D s8q

创意公社- ideaer%oXI^)s

图片: 好消息――BMP,JPG,PNG,GIF都可以用;坏消息――不支持ALPHA透明和GIF的透明,在程序里是用关键色来透明的。创意公社- ideaer&ZZJ'E!VGll-e

,Vo1f)vF3U)OE3pb0XML文件:定义媒体播放器各个元素的组成,位置,调用JS文件里的操作。

v.T"U E2@0 创意公社- ideaer is jg(Xx F6z&~&q

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

#R r!K"b9y a+Y0重要的参考文档:微软媒体播放器开发包(http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe),虽然是E文的,涉及SKIN的部分内容还是非常的简单,目前还没看到中文的……

(b]%N2Gn0

-X l@}xw(@)V0微软媒体播放器SKIN制作教程之(二)――XML热身

qvc9q+~ Zg+hIc0 创意公社- ideaer'O0O|^l

这节主要简单谈一谈什么是XML,与媒体播放器本身的XML制作方法关系不大,熟悉XML的朋友可以略过不看。

4b+b:wK(l0|&i0 创意公社- ideaerUK7}-t(S?qc Y

什么是XML(Extensible Markup Language)?创意公社- ideaer`h6c1I!tJB

1q9K^O(u-~Xhf5l9O0就象HTML是定义格式的一样,XML是用来定义数据的,微软媒体播放器用到的XML非常简单,我们了解一小部分就可以了。官方的文档如果你有兴趣看,可以到http://www.w3.org/XML/看,不过官方的文档总是比较乏味,做SKIN并不需要那么多乏味的细节,我们还是先秀一个最简单的XML文件(demo.xml),打开记事本,输入以下的文本:创意公社- ideaer UeFV|@3\8P!v

创意公社- ideaerb-S*II"wZg

创意公社- ideaerq$rDU:Z;T HC

$^ q$loKt\&Sh0<甜品>

lw&r;KcR\0~%HH c0

3z"wZ"h3h#U0lXb8D0<冰淇淋>

4I{q#z,Kd(B8^*\Y0

s,~2R9VHHYm0<颜色>柠檬黄

/k/q$Rg/`^+bD0 创意公社- ideaerir't9J%z;l

<口味>微酸创意公社- ideaery"a \Oo8hws"?

创意公社- ideaerD _.\3^+i.~3z#Q2\

1Sx ~.|6_I0 创意公社- ideaer~_AHR:V0?W

创意公社- ideaer0{ B^(P2vj ~PT

创意公社- ideaerBmS,E,N1Rc {]5u

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

U`d(?8FdW!Y#{0

y1c E f:w&tb0

'T6~L"i\k:jK0

8s{/G3E*G[1G I4{0如果点击那个减号,还可以折叠这个树状结构的东东――呵呵,把XML文件暂时理解为一棵树就对了。另外,实际的应用中XML标记绝大多数都是使用英文的,我这里用中文是为大家看起来比较方便。创意公社- ideaer'r\ }l-_Jp0e

创意公社- ideaer&Z`xr;f(GO3V

首先解释这句:创意公社- ideaer"C2\h2jX

创意公社- ideaer0c$w%|%H/wRN&`

它表明这是一个XML文件(废话?),如果你的文件中有中文,encoding=GB2312是必不可少的,当然,可加的东东还很多,不过我们现在就先说这些(秘密:媒体播放器的XML根本不用这一句,这句是方便你在IE中看文件用的)。

a8ne|6AG(@Y0 创意公社- ideaers/KPX#u-A?'@

其它的标记都是成对出现的,是不是和HTML很象?不过XML更严格,必须要成对出现,否则就会出错。其中“<甜品>”是这个文件的根元素,只能有一个哦!象“<冰淇淋>”和“<颜色>”这样的叶子则可以有好多个,还可以嵌套,它的目的只有一个:用来描述你所有的甜品。我们再加一个冰淇淋和一个水果拼盘:

vG~ [PK2?H4A u0

;snSNEO"zk0创意公社- ideaerJ,E m0k'v*ci

:J2u W2g#Y;L p0<甜品>创意公社- ideaerA/n CH*G-esdJ

创意公社- ideaerNAK zrXw@*P'LA(Y8X

<冰淇淋>创意公社- ideaer"f;HC.s:k&H2K

!aB+z AA0<颜色>柠檬黄创意公社- ideaerE,K/qbC#gO7y

创意公社- ideaer2H9rL f.Mg V p3}/R

<口味>微酸创意公社- ideaer2v]!k'GI2z V

XDVDWz:b6r'Q-h/V[0创意公社- ideaer7zb7wm2nb6a)e%]

e |e@)Vn3q3R!L&Y,Gv0<冰淇淋>

!Dl'A.tIhb{0 创意公社- ideaer/A-rya b'GH.L#S

<颜色>草莓红创意公社- ideaerx%dU?-q(AE

创意公社- ideaer \7rc1^0M)h&L W

<口味>甜创意公社- ideaerq'mY)RLl1f$P0`+NW

创意公社- ideaer{k^^,c;Ae

<装饰>一把小伞

%ueZW4g ZK5c0 创意公社- ideaer,{s,E-\O7dE!r

创意公社- ideaerppN+w"^'j

l m.RHHk0<水果拼盘>

2Q)f#Dh iB^ mq0 创意公社- ideaer'p,}hR4J'e v4u'or

<水果>创意公社- ideaer,s S;y!uzK'wx

创意公社- ideaerl,Sk-o7W)[

<西瓜 价钱=便宜的/西瓜>

A.p@!Ox"N0

Ma.gI/tb(G0<西瓜 价钱=便宜的 质量=生的/西瓜>

HF4_1a/R LrXT"~3X0

;O.Qj;~Q4|H-KZ0<蕃茄 质量=洗净的>创意公社- ideaerYsH~?

3~ | K2W'B-^wr$d6o^$Q0创意公社- ideaer-fQ ^Y/z~{|

'D7dKjYp0<装饰>塑料小勺一把

8vWX @5eJS6LgZ0 创意公社- ideaer+z(k6D/O7p5F x}

t-x!V+J!lfA0 创意公社- ideaerw1X y%U4A3MD

创意公社- ideaerbUo#C QzO

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

创意公社- ideaer&_6Di{5t-UYE(n

关于XML这种标记语言就讲这么多,但愿你没有被我的冰淇淋和西瓜搞晕……创意公社- ideaer"NU Gv~:_ k

~V:X0b |$G+Dy0唉,其实只要记住XML是用来表述数据的就可以了……

DS r;M U{,cUF"s0

~'e.l`!Rs h|l{0微软媒体播放器SKIN制作教程之(三)――准备图片

P[vDGR ~.@'Y&Gv0 创意公社- ideaer QnTl_5lK5cA

要做一个最简的SKIN,我们只需要准备三张图片:创意公社- ideaerU*cmr Q

创意公社- ideaer._@7[A2l1h5R~

图片一:SKIN的初始状态(background.gif)创意公社- ideaer}N_\sa

I*k5Kg p6rR*j0

n ol3dc;b6]6`0 创意公社- ideaer F$sD%pmQ

图片二:SKIN的mouseover状态(hover.gif)

iZ/{D:`?/c*nz]+D0 创意公社- ideaer*ROP Z,kK*vX [Kw

创意公社- ideaerQ#ct)P M+nTC9l

dYPl*AFK0图片三:蒙板图(map.gif)

q4xWMA)Gb8x0

7`"_XKo)b7z]0创意公社- ideaer1R@0eVEm g

创意公社- ideaerk+p_,` AD't

微软媒体播放器SKIN制作教程之(四)――媒体播放器用到的XML

c}` h-n0 创意公社- ideaer@wvwt9s2R(c

微软媒体播放器SKIN所用的XML有特定的标记,我们先搞个最简的说明一下,用记事本建立如下的文本文件:创意公社- ideaerR t'q6k#`

'@ ^&t1V Q8@2K nD0创意公社- ideaer { Tx]F.GT

创意公社- ideaerLFtD4{+N

#B_2a4i h;IK;d+E0 创意公社- ideaer*Fi.sq6q3e

clippingColor = #FF0000

TG1p'e?0V*M [9a0 创意公社- ideaerX9V J0}z@6O GP*AU,f

backgroundImage = background.gif

xo"Nbwb0

Td+Q[f#x(t@0titleBar = false创意公社- ideaerUM7\E#},B

*P4U2Z | |2e+Ly+b0scriptFile = demo.js>

q.~n H5A0 创意公社- ideaer `w/^Jzh+j5p

[ S~{ d(y"o(Q0

5z!R!S$ps7o0mappingImage = map.gif

'o2]!h{E+z-t:C0

T]k:j*WPJ|0hoverImage = hover.gif>创意公社- ideaer]Y,p7rc

创意公社- ideaerjH Bj1S,|d.D(q

创意公社- ideaerQ5L-m.G&d;@ ^

创意公社- ideaerGaw)ia.D,~6QKKf

mappingColor = #FF00FF />

$n ~7UV0YQHS"p0

6sD,s#Z"H'UO U0创意公社- ideaer)|wh/{Ys`5}R

];On SyU3d!c0mappingColor = #00FFFF />

q2KR,LH9r8DO0

#D]4e3n:S0:YS#E3UjKl3S0 创意公社- ideaert s`0a7y[*~.Q H

mappingColor=#00FF00创意公社- ideaer:avux#a

创意公社- ideaer%Y.a8s&~,K.q0G8pQ

upToolTip=打开文件

@GFf]5sl n5G'{0

v\*y)j:}0~Z%]0onClick=openFile()创意公社- ideaer(z_!ha)E't

创意公社- ideaer P8k:]\Bo*lV-Pm b

enabled=true/>

c$\'_,LiU W0

!xjdZS)N0创意公社- ideaerU0deN&Ro%J)CKM

创意公社- ideaerWfMR"x4k2k

创意公社- ideaerS ] tX_\U5_2F5if

[%Az V9B#C0W0

a8m#z,y Ec0 创意公社- ideaerl]k&c0n!Ctt

“THEME”就是这个XML文件的根元素,“VIEW”是在这个根元素下的一个视觉元素,这个视觉元素包含一个按钮组“BUTTONGROUP”,而这个按钮组又包含三个按钮:一个是用来播放音乐的“PLAYELEMENT”;一个是用来停止播放的“STOPELEMENT”;还有一个“BUTTONELEMENT”是用来打开音乐文件的。创意公社- ideaerO!va4\S$U Q7x

创意公社- ideaer~7l:r1[;JTaaG;`

详解一下上面这些元素的部分属性:创意公社- ideaere Y5z1UC+QL

5@0iDRP)?&BB0clippingColor = #FF0000:这是让SKIN的圆角透明,关键色#FF0000;创意公社- ideaer*Et%R8f:Wpw

创意公社- ideaere,?'q j Ig

backgroundImage = background.gif:这是SKIN的背景图像;创意公社- ideaerK.If-}-f K-t1l+k

创意公社- ideaerB!OTh,I\lGR

titleBar = false:不显示媒体播放器自带的菜单;

U$N,w1M9V0

?*^e-P6LC/u8U-I0scriptFile = demo.js:指定SKIN所用的JS文件;创意公社- ideaer} xKrp#C

创意公社- ideaer(H`/T?Y

mappingImage = map.gif:SKIN所用的蒙板图片,可以设定按钮的形状;创意公社- ideaer;JWSh6C!K0KjH

$S`;{ [ \H5r0hoverImage = hover.gif:鼠标移到按钮上时显现的图片;创意公社- ideaer5tn8LBr@

(v%rW)i4bLI {0mappingColor = #FF00FF:蒙板上关键色为#FF00FF的区域显示为播放按钮;创意公社- ideaer9C I2]&Lw!mvTG6r

创意公社- ideaer4MO;Q)k B2~ Q

upToolTip=打开文件:鼠标移上去时出现的提示文本;创意公社- ideaernP L#U O I

)f-?2B`V1k{0onClick=openFile():点击时调用demo.js里的openFile()函数;

/jA%xR izu0 创意公社- ideaerR'nU6i7W:F!Ak

OK,是不是很EASY呢?现在我们把这个文本文件的后缀改为wms,呵呵,这个SKIN就差一个JS文件了,我们的下一步教程就是来写这个JS文件。

&H en2tg0 创意公社- ideaer:DU` s:Q'yp

微软媒体播放器SKIN制作教程之(五)――媒体播放器用到的JS

1B#v R@ [Z0

7o?oJu!osI0用记事本建立如下的文本文件:创意公社- ideaer8F4_vu.U(n2L]n

y1l8W4F?;[B0function openFile(){

i#cU)ylZ^0 创意公社- ideaer3rhV(Q#la+o2{\

media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');创意公社- ideaer!rXPTX r `A

创意公社- ideaer-]3b(bx4uA-x

if (media) {创意公社- ideaerF3T9i1l vh+l

创意公社- ideaerVf s"coYI;J

player.URL = media;创意公社- ideaer!p(M.A@$K-rScr6?N

创意公社- ideaerv!OW;Q!@5Z

}

d ~*nB8Qh)?;q[@0 创意公社- ideaerzgjhF1N#U

}

iaf,q.E"Fzs0

xFv?TE0学过javascript的朋友看懂这段绝对是没有问题的,这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。

5G/e.z1IQqj_0

5Fx)| K%o0现在,把这一小段脚本存为demo.js,这样,我们的SKIN就基本制作完毕了。

s)X)Dp#T(d#_?/V0 创意公社- ideaerbK+GZ[^*D5L

最后,我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件,再将zip后缀改为wmz,一个最简单的媒体播放器SKIN就搞定了!创意公社- ideaerDxA AzRbP

创意公社- ideaer ]D*`wd d!]

双击它看看效果吧,不过因为这个SKIN太简单了,我们没做关闭按钮和其它的东东,大家可以在界面上点右键看微软的默认菜单来操作。

Q/eK ^H5R3WDq0 创意公社- ideaer n"] HW[I

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

I,f.}3x]0

H1L I4J5P0……这个,有空再慢慢加!创意公社- ideaer!PN![O@9pnV)j

["|0m'TM9l&v0有作品了别忘记放上来大家看看哦!

4SjJ/aAK yB0
顶:17
上一篇 下一篇
发表评论
换一张

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

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

最新创意