学院首页 新闻频道 学院概况 网络学院 院系设置 师资介绍 教学成果 招生就业 实践基地 校园文化 视频 论坛
  ◎    网络学院首页
  ◎    影视动画
  ◎    动漫设计
  ◎    影视广告
  ◎    视觉传达
  ◎    环境艺术
  ◎    人物形象
  ◎    电脑艺术
  ◎    电视摄像
  ◎    电视制作
  ◎    多媒体
  ◎    摄影专业
  ◎    播音主持
  ◎    影视表演
  ◎    新闻采编
  ◎    编导专业
  ◎    电视网络
  ◎    电视制片
  ◎    师生交流
  ◎    意见采纳
  ◎    我要投稿
 
 
    您认为网络学院那些栏目仍然需要加强?
专业新闻
理念论文
软件教程
作品赏析
专业资源

  
    您最想了解哪一类型的专业知识?
理念文献
软件教程
素材资源
作品赏析

  



媒体播放器SKIN制作全攻略
作者:未知    文章来源:5D    点击数:    更新时间:2007-4-29
 因为不太知道怎样的教程比较合用,所以我想把这个教程做成互动式的,一部分一部分地放上来,大家可以对这篇文档提出自己的建议和要求,我根据大家的需求来改,目前拟定的目录如下:
  微软媒体播放器SKIN制作教程目录
  微软媒体播放器SKIN制作教程之(一)——简介
  微软媒体播放器SKIN制作教程之(二)——XML热身
  微软媒体播放器SKIN制作教程之(三)——准备图片
  微软媒体播放器SKIN制作教程之(四)——媒体播放器用到的XML
  微软媒体播放器SKIN制作教程之(五)——媒体播放器用到的JS
  微软媒体播放器SKIN制作教程之(六)——常用参数
  如果大家有进一步的要求,还可以搞一些进阶教程。

  微软媒体播放器SKIN制作教程之(一)——简介
  一个微软媒体播放器SKIN其实是非常简单的,它主要由三部分文件组成:
  图片: 好消息——BMP,JPG,PNG,GIF都可以用;坏消息——不支持ALPHA透明和GIF的透明,在程序里是用关键色来透明的。
  XML文件:定义媒体播放器各个元素的组成,位置,调用JS文件里的操作。
  JS文件:用javascript对媒体播放器各个元素进行操作,定义它们的属性,生成一些动态效果,要注意:这个JS里包含一些微软媒体播放器专用的JS。
  重要的参考文档:微软媒体播放器开发包(http://download.microsoft.com/download/f/3/5/f355083d-61d7-4470-a572-cd6fb141cfb5/WMPlayerSDK.exe),虽然是E文的,涉及SKIN的部分内容还是非常的简单,目前还没看到中文的……

  微软媒体播放器SKIN制作教程之(二)——XML热身
  这节主要简单谈一谈什么是XML,与媒体播放器本身的XML制作方法关系不大,熟悉XML的朋友可以略过不看。
  什么是XML(Extensible Markup Language)?
  就象HTML是定义格式的一样,XML是用来定义数据的,微软媒体播放器用到的XML非常简单,我们了解一小部分就可以了。官方的文档如果你有兴趣看,可以到http://www.w3.org/XML/看,不过官方的文档总是比较乏味,做SKIN并不需要那么多乏味的细节,我们还是先秀一个最简单的XML文件(demo.xml),打开记事本,输入以下的文本:

<?xml version=1.0 encoding=GB2312 ?>
<甜品>
<冰淇淋>
<颜色>柠檬黄</颜色>
<口味>微酸</口味>
</冰淇淋>
</甜品>

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

   

  如果点击那个减号,还可以折叠这个树状结构的东东——呵呵,把XML文件暂时理解为一棵树就对了。另外,实际的应用中XML标记绝大多数都是使用英文的,我这里用中文是为大家看起来比较方便。
  首先解释这句:<?xml version=1.0 encoding=GB2312 ?>
  它表明这是一个XML文件(废话?),如果你的文件中有中文,encoding=GB2312是必不可少的,当然,可加的东东还很多,不过我们现在就先说这些(秘密:媒体播放器的XML根本不用这一句,这句是方便你在IE中看文件用的)。
  其它的标记都是成对出现的,是不是和HTML很象?不过XML更严格,必须要成对出现,否则就会出错。其中“<甜品></甜品>”是这个文件的根元素,只能有一个哦!象“<冰淇淋></冰淇淋>”和“<颜色></颜色>”这样的叶子则可以有好多个,还可以嵌套,它的目的只有一个:用来描述你所有的甜品。我们再加一个冰淇淋和一个水果拼盘:

<?xml version=1.0 encoding=GB2312 ?>
<甜品>
<冰淇淋>
<颜色>柠檬黄</颜色>
<口味>微酸</口味>
</冰淇淋>
<冰淇淋>
<颜色>草莓红</颜色>
<口味>甜</口味>
<装饰>一把小伞</装饰>
</冰淇淋>
<水果拼盘>
<水果>
<西瓜 价钱=便宜的/西瓜>
<西瓜 价钱=便宜的 质量=生的/西瓜>
<蕃茄 质量=洗净的></蕃茄>
</水果>
<装饰>塑料小勺一把</装饰>
</水果拼盘>
</甜品>

  发现什么变化没有?西瓜和蕃茄有了“价钱”和“质量”的属性了,每片叶子都可以有不止一个属性,其它程序调用它们时会用到这些属性,另外“<西瓜 价钱=便宜的 /西瓜>”和“<西瓜 价钱=便宜的></西瓜>”是一样的,中间没内容当然就简写啦,这种简写也代表标记是成对的,并不意味着标记可以不成对,切记!
  关于XML这种标记语言就讲这么多,但愿你没有被我的冰淇淋和西瓜搞晕……
  唉,其实只要记住XML是用来表述数据的就可以了……

  微软媒体播放器SKIN制作教程之(三)——准备图片
  要做一个最简的SKIN,我们只需要准备三张图片:
  图片一:SKIN的初始状态(background.gif)

   

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

   

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

   

  微软媒体播放器SKIN制作教程之(四)——媒体播放器用到的XML
   微软媒体播放器SKIN所用的XML有特定的标记,我们先搞个最简的说明一下,用记事本建立如下的文本文件:


<THEME>
<VIEW
clippingColor = #FF0000
backgroundImage = background.gif
titleBar = false
scriptFile = demo.js>

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

<PLAYELEMENT
mappingColor = #FF00FF />

<STOPELEMENT
mappingColor = #00FFFF />

<BUTTONELEMENT
mappingColor=#00FF00
upToolTip=打开文件
onClick=openFile()
enabled=true/>

</BUTTONGROUP>

</VIEW>
</THEME>

  “THEME”就是这个XML文件的根元素,“VIEW”是在这个根元素下的一个视觉元素,这个视觉元素包含一个按钮组“BUTTONGROUP”,而这个按钮组又包含三个按钮:一个是用来播放音乐的“PLAYELEMENT”;一个是用来停止播放的“STOPELEMENT”;还有一个“BUTTONELEMENT”是用来打开音乐文件的。
  详解一下上面这些元素的部分属性:
  clippingColor = #FF0000:这是让SKIN的圆角透明,关键色#FF0000;
  backgroundImage = background.gif:这是SKIN的背景图像;
  titleBar = false:不显示媒体播放器自带的菜单;
  scriptFile = demo.js:指定SKIN所用的JS文件;
  mappingImage = map.gif:SKIN所用的蒙板图片,可以设定按钮的形状;
  hoverImage = hover.gif:鼠标移到按钮上时显现的图片;
  mappingColor = #FF00FF:蒙板上关键色为#FF00FF的区域显示为播放按钮;
  upToolTip=打开文件:鼠标移上去时出现的提示文本;
  onClick=openFile():点击时调用demo.js里的openFile()函数;
  OK,是不是很EASY呢?现在我们把这个文本文件的后缀改为wms,呵呵,这个SKIN就差一个JS文件了,我们的下一步教程就是来写这个JS文件。

  微软媒体播放器SKIN制作教程之(五)——媒体播放器用到的JS
  用记事本建立如下的文本文件:

[code]
function openFile(){
media = theme.openDialog(''FILE_OPEN'',''FILES_ALLMEDIA'');
if (media) {
player.URL = media;
}
}
[/coe]

  学过javascript的朋友看懂这段绝对是没有问题的,这段脚本的作用是把文件打开对话框中选中的文件设为当前曲目。
  现在,把这一小段脚本存为demo.js,这样,我们的SKIN就基本制作完毕了。
  最后,我们把demo.wms、demo.js 、background.gif、hover.gif、map.gif这几个文件用文件压缩工具打包为zip文件,再将zip后缀改为wmz,一个最简单的媒体播放器SKIN就搞定了!
双击它看看效果吧,不过因为这个SKIN太简单了,我们没做关闭按钮和其它的东东,大家可以在界面上点右键看微软的默认菜单来操作。

文章录入:刘炬    责任编辑:刘炬 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
      相 关 文 章
    首届高端数字媒体人才双选会下周举行
    James Owen概念播放器设计多图欣赏
    多级存储技术在媒体资产管理系统中的应用
     
    最新热门图片  

    全球华人大学生平面设…

    第四届中国国际茶叶包…

    《中国平面设计展》在…

    广告大创意应具备的五…
    最 新 热 门
    最 新 推 荐
    关于我们 广告服务 法律声明 联系方式 常见问题 中国生活网 留言 论坛 帮助
    广播电影电视管理干部学院版权所有 Copyright 2001-2006 ARFT.net All Rights Reserved
    感谢动易网络科技有限公司友情提供技术支持,山西艺龙影视信息中心(有限公司)运营