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

媒体播放器SKIN制作全攻略

打印 发布者:pl5788
热度473票  浏览299次 【共0条评论】【我要评论 时间:2010年10月18日 09:56
创意公社- ideaeru,^N@}

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

t'M1g,K&qb0 创意公社- ideaerE'b q:Yaj9I8Q$`BRP

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

baxy5Sx0

!e9t T3L)b(A0微软媒体播放器SKIN制作教程之(一)――简介

/xcBC#P\(T%T0 创意公社- ideaern!`;|$G.r

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

9U*O1~\&Qv"TuY0 创意公社- ideaerN%Sh_I%E1Uy1e

微软媒体播放器SKIN制作教程之(三)――准备图片创意公社- ideaer7X}*G&G4]

VZ8O's7eTM]:e0微软媒体播放器SKIN制作教程之(四)――媒体播放器用到的XML创意公社- ideaer\3[ iw?Ws9a`q

创意公社- ideaer1mh w"D,g$b1n"[.h

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

q s;j_5S pS0

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

slU"\;h zO0 创意公社- ideaerT _] P;N8S(U9j1B:[^&p&a6N

如果大家有进一步的要求,还可以搞一些进阶教程。

T2E0w~7ocsv0

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

f],Y_+U:p^0

b @)J0FG0一个微软媒体播放器SKIN其实是非常简单的,它主要由三部分文件组成:创意公社- ideaeroy-rP r Dr$_ MM'C

创意公社- ideaerD;M/{XK9K+z:e&|2P

图片: 好消息――BMP,JPG,PNG,GIF都可以用;坏消息――不支持ALPHA透明和GIF的透明,在程序里是用关键色来透明的。

'e XgB3~ gR0 创意公社- ideaer"`mJ;MX+a%P0D

XML文件:定义媒体播放器各个元素的组成,位置,调用JS文件里的操作。创意公社- ideaeru0YU E&rn%b;XK _*I

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

fa`x(ry I~0重要的参考文档:微软媒体播放器开发包(http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe),虽然是E文的,涉及SKIN的部分内容还是非常的简单,目前还没看到中文的……创意公社- ideaern4ze,a:^BI6it#B9L

.o8eA6Z&[C@0微软媒体播放器SKIN制作教程之(二)――XML热身

/j$_1oC\G5\4G_0 创意公社- ideaerX\ \U[5dK"X@%^ ~;A2D

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

q7jiw_6@0 创意公社- ideaerS gX]2Z Z$O-f$fi

什么是XML(Extensible Markup Language)?创意公社- ideaerq0~7L&L.Zm

创意公社- ideaer|n|{~`

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

6a4p3`1rFC,`$I0创意公社- ideaerr/o*AmE%i,}

{5n,bw:xSU5R*Q0<甜品>

7o&^2` N5]!atX0

? RK]rSOWY0<冰淇淋>创意公社- ideaer.H0Awwn kzl|+m.XM

4b?)]"[Og3IMx1m0<颜色>柠檬黄创意公社- ideaerf7Q5@0n1M)F%l

Y"L['l b"p:zu0<口味>微酸

8YcxCe u0 创意公社- ideaer/U J{#n%`@ X

创意公社- ideaer#m7P S;}(L1?!M4K7F

创意公社- ideaerf#Ftu$j#x]

创意公社- ideaerW4Lc G(?*vRB&?$p

创意公社- ideaer)l6as,Z9GpU/S%SQcVD

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

创意公社- ideaerZ-q$BI DkR B$s

-pj@zq-L tq0

D@$@8hv([~0如果点击那个减号,还可以折叠这个树状结构的东东――呵呵,把XML文件暂时理解为一棵树就对了。另外,实际的应用中XML标记绝大多数都是使用英文的,我这里用中文是为大家看起来比较方便。

/W"d#Rw"SA0 创意公社- ideaer8`'}V?qP6M,RO

首先解释这句:创意公社- ideaer}dF h{$F'V]oA5f

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

W;rF0a"u0m;V8x0

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

@(blF4B)r|0 创意公社- ideaerZy^4e@!U

8w _IO%I}0

8z3BE`]O0<甜品>创意公社- ideaerQ1ZlS?2H(`b

ez[C'r.k0<冰淇淋>

v}'C E U8Ay0p0 创意公社- ideaer)SQB0q'OY

<颜色>柠檬黄创意公社- ideaer4|5F'z2{&s)b

7@:jd7AQ#~ZO#zh0<口味>微酸创意公社- ideaer\#m[ A!vW$dN

c4o D5aO!`0

1y%m}x"H)B.E!T0

)m[U gG9_/Bn0<冰淇淋>创意公社- ideaer1gzP Hg"|1_#T4c

-u}E _ bq0<颜色>草莓红创意公社- ideaer,k:c9v `dPCO5}

zS,z]A;f0<口味>甜

N p1MZ(] I-~*K1f0 创意公社- ideaerG,m3v`"]&YQ7e7s/f

<装饰>一把小伞

$k#Y^'f W7{;? k0

,YosZume+v3`0

f&_1O2j*P0A7Z)n D D&`W0 创意公社- ideaer%A_1kIMt `

<水果拼盘>创意公社- ideaer%A$t ZhE2I8BsPF aK$y#v

0V*A^#N%d \LF0<水果>创意公社- ideaerl{K5B%ykv1Z

创意公社- ideaerpx;Vxv;G%q^

<西瓜 价钱=便宜的/西瓜>创意公社- ideaertP A(hY@ S$c

D:g?"figeWn0<西瓜 价钱=便宜的 质量=生的/西瓜>

a)h0`1g.\QQu+z1Gln0

2` z PM;N(L'z)Wa0<蕃茄 质量=洗净的>创意公社- ideaer cb]@`d

/Oofa@n*G}0创意公社- ideaer`}%CEG[1R

IK b c `!g%\0<装饰>塑料小勺一把创意公社- ideaer bm!N!s*U'N n _)~

?i,Yn#D0创意公社- ideaer!X}8d"VI

(P"TM7LV#H hw0

M6F%u]W+? ^7B0

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

x2?UCXW NZ,P#we-v0 创意公社- ideaera `eE tS/P Nm

关于XML这种标记语言就讲这么多,但愿你没有被我的冰淇淋和西瓜搞晕……

q b^Q1}z9fBL&s.q0

6K5A-c~ M@C0[5W0唉,其实只要记住XML是用来表述数据的就可以了……

P1vX!EWP+Yc0

@qWO"hJ0微软媒体播放器SKIN制作教程之(三)――准备图片创意公社- ideaer;W8B.U8ef_

创意公社- ideaer-j9Z"_9}[fy,^

要做一个最简的SKIN,我们只需要准备三张图片:创意公社- ideaer^)jirJ(Z4t7KjS

K rR}aYc0图片一:SKIN的初始状态(background.gif)创意公社- ideaerA6ko)mj1z;i

创意公社- ideaer8A| W'YDR9Go

gT d+r2g7qy6k_0

x;\I#u_0图片二:SKIN的mouseover状态(hover.gif)

A7A*S_5?A j9m0 创意公社- ideaer7L#\2jhUs$QW1b yc

h NB6]wS0 创意公社- ideaer$\u-| W/|T@J

图片三:蒙板图(map.gif)

G\r$n([\ DG0

?;p bxZ)B d{0创意公社- ideaer$n)Yss1gS v u+a

创意公社- ideaerx7B&nP~CsK_!_,x

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

j;`2P$d|a0

qLuyd6A0JW.`,O0微软媒体播放器SKIN所用的XML有特定的标记,我们先搞个最简的说明一下,用记事本建立如下的文本文件:创意公社- ideaerR;l$\@GM

创意公社- ideaerf5m{l3S*\

Q)WC/hh.DN X0 创意公社- ideaer2G6`WKn$_[)uP}`c

;M)V0d]8c+c0 创意公社- ideaerI[@V ^

clippingColor = #FF0000

+Lpn7R)q J0

:Q-di?g7_V0backgroundImage = background.gif

T)Rv}Fm)[0 创意公社- ideaer \B?]M gG

titleBar = false创意公社- ideaer t+l8^7a+T`x[

创意公社- ideaerx*oi#}}V B

scriptFile = demo.js>

1nbTD{:u0 创意公社- ideaer1[?-c G'thO3MZ)u

创意公社- ideaer,? \N0LT

创意公社- ideaerzf6[2cN.K;[g

mappingImage = map.gif创意公社- ideaerpB0\2cWm

_p6Z*H,\0@~[ Qj eUa0hoverImage = hover.gif>

(G'}y)F.bmq!v0

t?Db7Y0创意公社- ideaer\R/F{:r xd0C9hG

创意公社- ideaer.hw l:R:N

mappingColor = #FF00FF />创意公社- ideaerK%Q RiD#PP,L+n

创意公社- ideaer"}[7g/{ X_E etH$V

创意公社- ideaer`)Sj%w4C]Jg

创意公社- ideaer;D+V.r`(F-B,?@"a$O7y

mappingColor = #00FFFF />创意公社- ideaerv[T7z w V

)yc%OJ2v0创意公社- ideaer7sWms1kPr

+q hn g1u}*N8}Xy8Z0mappingColor=#00FF00

'Qi3W9rM DeQ2s"@0 创意公社- ideaer[Y5|3|&W/p

upToolTip=打开文件创意公社- ideaer(lL1T1Cl J(dC [

创意公社- ideaer7XC)a,sY*H'vF?

onClick=openFile()

Z)z/NuL-O0Vn0 创意公社- ideaerZ.LCm-J/XU/k |^

enabled=true/>

*Th9u-Uy s:P*k0

\6b"Ox:J-@ |g0创意公社- ideaerGNcY @/Iw+T

bmU6XW8xm \0

,B_6p fu&T%x0 创意公社- ideaer? Sju7qg0g5s&s

D&H1n0i?R1h0 创意公社- ideaerr-p a&`.FW

“THEME”就是这个XML文件的根元素,“VIEW”是在这个根元素下的一个视觉元素,这个视觉元素包含一个按钮组“BUTTONGROUP”,而这个按钮组又包含三个按钮:一个是用来播放音乐的“PLAYELEMENT”;一个是用来停止播放的“STOPELEMENT”;还有一个“BUTTONELEMENT”是用来打开音乐文件的。

CIg4a#n0

,?'Z@aR7k2cH0详解一下上面这些元素的部分属性:

7Del;dm5~1Z@!@M K0 创意公社- ideaer R]A"PN5Ue!@

clippingColor = #FF0000:这是让SKIN的圆角透明,关键色#FF0000;创意公社- ideaer3\S8X&r aAE[

)H!n.NO v y(_M0backgroundImage = background.gif:这是SKIN的背景图像;

gc5Ed]1V0 创意公社- ideaerN P&QV\v{

titleBar = false:不显示媒体播放器自带的菜单;创意公社- ideaer5G7Q Z0Bj:g

创意公社- ideaerr7Bd3kl

scriptFile = demo.js:指定SKIN所用的JS文件;

f.^%K?0owU0 创意公社- ideaer!CRp\5L E"Ru7V*` ]

mappingImage = map.gif:SKIN所用的蒙板图片,可以设定按钮的形状;创意公社- ideaerw3Q#b2Bts'R~

创意公社- ideaer g!Ch%M/~ s4JN*~

hoverImage = hover.gif:鼠标移到按钮上时显现的图片;

+~B-I6b6P+?0

}3F:n1kft)]/P0mappingColor = #FF00FF:蒙板上关键色为#FF00FF的区域显示为播放按钮;创意公社- ideaer] R1i3OL L/R[1o T;Vh

创意公社- ideaerd L$TW_k [

upToolTip=打开文件:鼠标移上去时出现的提示文本;创意公社- ideaerv-Kn yq D'|

{H]$YB%F l.AUG0onClick=openFile():点击时调用demo.js里的openFile()函数;创意公社- ideaer!| l:F*A;vd

创意公社- ideaer"|WOc!m)y

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

A/v~h[;{;s\0

-KA9t \/Bh6rt j0微软媒体播放器SKIN制作教程之(五)――媒体播放器用到的JS创意公社- ideaerR[Qr [M"g;zM

.n4HXGO8S#\0用记事本建立如下的文本文件:创意公社- ideaer+B0F4jq(kF;{[l

创意公社- ideaer$cg{4J0w+s

function openFile(){

|x].Jc G D8S0 创意公社- ideaer1tI3Bq/K%{

media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');

zN2e3i8\ d0

FpzBx-v K$N0if (media) {创意公社- ideaer-UfM-X4ve:v]4d

创意公社- ideaerjuj,EwV uj

player.URL = media;

;@XpY$_ go0

w.B^tHj1M-U0}创意公社- ideaerC#c!vMt%V{x

创意公社- ideaerH gvkKqK

}

)u"R7La._j0

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

#k%}K ?A&op B0

tA-r K]5Ru,}0现在,把这一小段脚本存为demo.js,这样,我们的SKIN就基本制作完毕了。创意公社- ideaerw-]3D#V4\/m$Q^D ?

/Y9F0O'J m+r0最后,我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件,再将zip后缀改为wmz,一个最简单的媒体播放器SKIN就搞定了!

eq5Ot8\ Z#|0

-`7z"_h3f0双击它看看效果吧,不过因为这个SKIN太简单了,我们没做关闭按钮和其它的东东,大家可以在界面上点右键看微软的默认菜单来操作。创意公社- ideaerv? u o7X bA/EL

,~Mg ]BU r0微软媒体播放器SKIN制作教程之(六)――常用参数创意公社- ideaer?.Q&Mk \%s!F

创意公社- ideaerS6JF`)o3L[0y8~ h

……这个,有空再慢慢加!

hhjN3p(L1j@O)}:q0 创意公社- ideaer!t*cq!K3@

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

r5y(c*o'Fxr0
顶:17
上一篇 下一篇
发表评论
换一张

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

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

最新创意