《FLASH影音在线播放器的设计界面的实现.doc》由会员分享，可在线阅读，更多相关《FLASH影音在线播放器的设计界面的实现.doc（29页珍藏版）》请在三一办公上搜索。
1、 南通纺织职业技术学院毕业设计（论文） FLASH影音在线播放器的设计与实现 界面的设计与实现季 晓 花3514211班 级 03网 络 2 班 专 业 网络技术/市场营销 教 学 系 信 息 系 指导老师 周 悦 完成时间 2007年04月01日至 2007年05月03日目 录第一章引 言 4第二章FLASH的特点与功能 52.1 FLASH的特点 52.2 FLASH的功能 6第三章元件、实例的使用 83.1关于元件 83.1.1 元件和实例 83.1.2元件的类型 93.1.3 元件的优点 93.2创建按钮 103.3遮罩层的使用 113.4滤镜和混合模式 12第四章播放器界面功能需求分
2、析 13第五章播放器界面结构分析 145.1界面需求横向分析（场景帧）145.2界面需求纵向分析（场景层）14第六章色彩的应用 166.1色彩在界面中的作用 166.2 色彩的运用 16第七章播放器界面实现 187.1 视频、进度条和列表界面等美工 187.29个常见播放器按钮的制作 197.3暂停/继续按钮的切换显示 197.4音量按钮上的菜单效果 207.5音量大小图形控制 217.6双击视频区完成“全屏模式”与“完整模式”间的切换 227.7当前播放曲目着重显示 237.8对盗用SWF的给以友情提示237.9Flash文件优化 24第八章设计总结 26致 谢 27参 考 文 献 28FL
3、ASH影音在线播放器的设计与实现 界面的设计与实现【 摘 要 】 现在WEB和电脑用户对网页媒体需求是越来越多。因为宽带的普及和质量的提高，更多的用户已经不太习惯下载音乐、MV和电影了。都习惯于在线观看浏览，而且又不占用硬盘、不需要长时间等待下载、又可以经常更新。所以本课题尝试用时下最为流行且最具发展前景的WEB元素Flash，设计并实现一个多媒体影音在线播放系统，侧重其按钮、滑条、进度条的制作以及页面框架美工的设计、功能的实现。【 关键词 】 Flash 播放器 多媒体 美工 界面设计与实现【 Abstract 】 Now WEB and computer user to the homep
4、age media demand is more and more many. Because of wide band popularization and quality enhancement, more users already not too custom downloading music, MV and movie. All is accustomed to on-line watches the browsing, more over does not take the hard disk, does not need the long time to wait for do
5、wnloading, may frequently renew. Therefore this topic tastes the test to be at present most popular also most to have the prospects for development WEB element - Flash, designs and realizes a multimedia video and music on-line broadcast system contact surface: Button, slippery strip, progress strip
6、manufacture and page frame art designing design, function realization.【 Keyword 】 Flash player Multimedia Art designing Contact surface design and realization第一章 引 言Flash（中文译为“闪动、一闪”）这个英文单词是一个用于制作网络动画的软件的名称，在今天已是广为人知了。就像Photoshop、Corel-draw、3D MAX等设计软件名称一样，已被许多爱好者熟悉和掌握！因为Flash是为制作网络动画而开发的软件。现在的Flash
7、，它的流行经历了一个由默默无闻到惊天动地的历程，并终于迎来了它的成功，迎来了市场特别是设计界的关注和认可，使设计界对于未来设计的发展趋势有了一个有据有理的认识，也引发了我对于Flash现象的研究和有关设计探索的兴趣。 今天，Flash已经不是什么新鲜事物了。它大约是在两年前出现在我国的，那时我国的网络才刚刚开始发展，网络正式进入千家万户，网络动画也随着进入了千家万户。或是因为兴趣，或是因为商业的需要，或是因为设计的需要，部分网民开始了Flash动画的制作。Flash一族自2000年来逐渐成型，并迅速壮大，Flash原创作品蜂拥而起。因为动画的实用性、趣味性和娱乐性很强，它已经逐步的占据了广大青
8、少年、甚至是部分中老年的工作和生活，Flash动画短片成为一时间网络最热的娱乐方式，也成为了一种时尚和潮流。开始学习和制作Flash的人越来越多，人们都以能够制作出倍受大家关注的Flash动画作品而感到骄傲、自豪。现在有许多专门的如“FLASHEMPIRE闪客帝国，大话三国，闪盟在线”等等这样的一些网站，这里面不仅拥有大量的Flash动画供爱好者在线观看，而且还是Flash迷们的一个专门交流的空间。的确，它的发展让人不得不刮目相看。Flash作为现代的一种新的设计方式和娱乐方式，不仅有其实用功能，并且还有视觉和听觉上的双重享受，更因为它所具有的趣味性，成为现代人放松自我，表现自我，甚至是陶醉自
9、我的一种方式！因为各大媒体对它的宣传，设计界和市场也开始对这样一种新的宣传和表达方式重视起来，Flash动画的价值也开始以秒来计算，大大的刺激了更多的Flash迷的创作热情。他们汇聚在自己的网络空间里，以始终如一的热情，创作出一个又一个的Flash精品，吸引着成千上万双眼睛的关注！第二章 FLASH的特点与功能FLASH是目前最为流行的网络动画制作工具。它集矢量编辑和动画创作功能为一体，并具有灵活的交互功能，能将图形、图像、音频、动画和深层次的交互动作有机地结合在一起。由于FLASH广泛使用矢量图形，文件非常小，因此特别适合于创建通过INTERNET提供的内容。与位图图像相比，矢量图形所需要的
10、内存和存储空间要小的多，因为它们是一数学公式而不是大型数据集表示图像自身的。而位图图形之所以更大，是因为图像中的每个像素都需要一组独立的数据来表示。2.1 FLASH的特点FLASH具有简单易用、高效多能的特点。概况来说，FLASH具有以下一些优点：（1） 灵活播放的作品使用FLASH不仅可以制作质量非常出色的网页，还可以制作高质量的离线交互作品，并且拥护不需要使用网页浏览器就可以浏览这些FLASH作品。FLASH附带着一个免费发放的离线播放器，这个离线播放器的文件非常小，因此可以将它和FLASH作品一起放在依仗软盘上，从而生成一个不需要单独安装既可独立播放的演示程序。（2） 作品的网络传输速
11、度快FLASH中的动画图形用的是矢量技术，而不是在大多传统网页动画图像中所使用的点阵技术，因此，FLASH动画作品的文件非常小，下在一个包含有几个场景的全屏FLASH动画文件只需要几秒钟，明显少于下载并播放一个同等大小和复杂程度的点阵组成的网页动画文件的时间。（注：矢量技术，由数学公式和指令描述的图像被称为矢量图形，这些数学公式和指令以纯文本的形式存在，所以要描述一个全屏幕动画过程只需要很小的数据量。点阵技术，由具有颜色特征的像素组成的一个矩阵来描述图像，每个像素的大小和每个给定图像中的像素的总数是固定不变的。描述一个像素需要232位数据位。）（3） 可自由缩放的FLASH图像一般来说，在网页
12、所用的图像都要尽可能地小，只有这样才能减少传输网页时的传输时间。所以在网页中使用全屏幕图像相对较少。否则，浏览者为下载图像花费很长的时间，以至于在他们还没有看到图像的整个内容时就没有了耐心。而对于FLASH生成的网页动画，不管尺寸如何，其文件大小几乎是一样的，只是在控制图像放大倍数上有微小区别。因此，对于FLASH网页动画来说，不论画面大小，其运行过程都是一样的。（4） 高质量的文字和图像效果在FLASH中使用矢量图形最大的好处是，总能保证它的线条图形和文字的输出质量是浏览者的计算机所能实现的最高输出质量。因为矢量图形中的指令可以告诉浏览者的计算机如何去识别这些图形，从而保证这台计算机能尽其所
13、能地输出高质量的图形，因此在FLASH生成的网页中，每一个元素都非常清晰和专业化。而点阵动画图像经常是通过改变和扭曲被固定了大小的像素矩阵制作出来的，在这个过程中，一些必要的像素可能被夸大或丢失，因此，图像的质量受到了明显的影响。在FLASH中使用矢量图形的另一个好处是，FKASH生成的网页中绝不在它的纯色或渐变色色彩区域内找到模糊或游离的像素。（5） 多用性FLASH是一个多能的工具，所输出的文件还可以被高档的图形软件所接受。因此，FLASH既可以帮助那些不太精通绘图的人将他们的想法图形化，又可以让专业的图像设计师利用它进行构思或设计草稿，然后输出到高档的图形软件中，以便对其做进一步的加工和
14、完善，从而简化操作过程。（6） 浏览FLASH作品的障碍正逐渐消除目前几乎所有先进的和具有图形功能的浏览器都加入了支持FLASH的插件，而一些十分流行的多媒体网页浏览器的插件如QuickTime4、Real Audio和Shockwave等都支持FLASH。另外，Macromedia公司已发布了FLASH动画文件格式的源代码，可以提供给任何想要使用它的人，因此可望看到FLASH技术将被植入到许多新的网页浏览器中，包括Netscape。2.2 FLASH的功能FLASH功能强大。就其基本功能来说，概括起来有以下几点：（1） 具有较强的矢量绘图和动画制作功能，所制作的图象质量高而动画和网页数据量小
15、。（2） 具有较强的导入和发布功能，不但可以导入点阵图、QUICKTIME格式电影文件和MP3格式音乐文件等，还可以发布MP3文件等。（3） 采用插件的工作方式，只要电脑中的浏览器安装了SHOCKWAVEFLASH插件，即可观看FLASH动画。（4） 采用“流式技术”播放动画，文件没有全部下载完就可观看以下载的内容。（5） FLASH播放器可以直接从网上下载更新版本。（6） 可充分调用FLASH文件内部库中的符号，重复利用资源。只要这个库下载后，其他的电影都可以不在下载共享的符号，直接使用这个库的符号，是文件字节数减少。（7） 包含许多功能更强大的ActionScript函数、属性和目标对象，
16、兼容并支持Flash以前的版本。（8） Apple授权使用Flash的播放器可内置于Apple产品中，这样就可以通过QuickTime播放Flash的图片、电影和具有交互能力的图像。（9） 采用与JavaSpcript类似的语法结构，以及新的文本编辑区和调试区，可进一步提高程序的开发能力，开发更多的可扩展的工具，以便开发Web应用程序。（10） ActionScript编辑器允许有普通模式和专家模式两种模式.所有的脚本程序均可从外部脚本文件调入，外部的脚本文件可以和任何ASCII码的文本文件。（11） 支持XML。第三章 元件、实例的使用3.1关于元件元件是在FLASH中创建的图形、按钮或影片
17、剪辑，而实例是指位于舞台上或嵌套在另一个元件内的元件副本，实例可以与它的元件在颜色、大小和功能上有很大区别。编辑元件会更新它的所有实例，但对元件的一个实例应用效果则只更新该实例。3.1.1 元件和实例简单地说，元件是一个特殊的对象，可以是一个形状，也可以是一个按钮，甚至可以是一段影片剪辑。它在FLASH中只创建一次，然后可以在整部影片中反复使用。所创建的任何元件都会自动成为当前文档的库的一部分。例如，创建了一个小鸟飞翔的影片剪辑元件后，当需要制作一个一群小鸟在空中飞翔的场景时，就可以从库中反复拖出小鸟飞翔元件的实例。这些元件实例的每一个都是对原元件的一次引用，而不是重新创建原元件。原元件只在最
18、终的FLASH影片中存储一次。不管引用多少次，引用元件对文件大小都只有很小的影响。因此，如果最初做成元件的对象使影片总的文件大小增加可25KB，那么添加10个、20个甚至更多的元件实例，不会造成文件成倍增长，且文件大小与元件的大小无关。元件实例的外观和动作无需与原元件一样。每个元件实例都可以有其不同的颜色和大小，并提供不同的交互作用。例如，可以将按钮元件的多个实例放置在场景上，其中每一个实例都有不同颜色和指定动作。每一个元件都有自己的时间轴、场景及图层，也就是说，可以将元件实例放置在场景中的动作看成是将一部小的影片（元件）放置在较大的影片（FLASH项目）中。而且，可以将元件实例作为一个整体来
19、设置影片效果。当对元件进行编辑后，元件的每个实例都会做相应的更新。例如，如果将已经用其创建过几个实例的矩形元件更改为圆形，那么该元件的每一个实例也将变成圆形。不过，元件的改动在其实例中只能从图形的角度反映出来，而每个元件实例仍然可以拥有各自的颜色、大小和功能等特定属性。3.1.2元件的类型每个元件都有一个唯一的时间轴和舞台及几层。创建元件时要选择元件类型，这取决于文档中如何使用该元件。FLASH中的元件包括以下4种类型。（1）图形元件：可用于静态图象，并可用来创建连接到主时间轴的可重用的动画片段，图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。（2）按钮元件：可用于
20、创建响应鼠标点击、滑过或其他动作的交互式按钮。在制作这种类型的元件时，首先要定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。（3）影片剪辑元件：可用于创建可重用的动画片段。影片剪辑作为FLASH中最具有交互性、用途最多及功能最强的部分，基本上是小的独立影片，它们可以包含主要影片中的所有组成部分（包括声音、影片及按钮）。影片剪辑拥有自己的独立于主时间轴的多帧时间轴，所以可以将影片剪辑看作是主时间轴内的嵌套时间轴。也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。（4）字体元件：用于导出字体并在其他FLASH文档中使用它。3.1.3 元件的优点使用元件的优点主要有以下4个方面：（
21、1） 可以简化影片的剪辑。在应派内剪辑过程红，可以把要多次使用的元素做成元件。当修改了元件以后，使用他的所有实例都会随之更新，而不必逐一更改。（2）由于所有实例在文件中仅保存一个完整描述，其余只需保存参考指针，因此应用元件可以使影片文件的大小大大缩减。（3）制作运动类型的过渡影片时，必须使用元件。（4）在使用软件时，由于一个实例在浏览中仅需要下载一次，因此可以加快影片的下载速度。3.2创建按钮按钮实际上是一个四帧的交互影片剪辑。当为元件选择按钮行为时，FLASH会创建一个四帧的时间轴。前三帧显示按钮的三种可能状态，第四帧则定义按钮的活动区域。如果要使一个按钮具有交互性，可以把该按钮元件的一个实
22、例放在舞台上，然后给该实例指定动作。必须将动作指定给文档总的按钮实例，而不是指定给按钮时间轴中的帧。按钮元件时间轴上的每一帧都表示一种状态，这4种状态的功能如下：（1）第1帧：弹起状态，表示指针没有经过按钮时该按钮的状态。（2）第2帧：指针经过状态，表示当指针滑过按钮时，该按钮的外观。（3）第3帧：按下状态，表示单击按钮时，该按钮的外观。（4）第4帧；点击状态，定义响应鼠标单击的区域。此区域在SWF文件中是不可见的。如果没有在“点击”帧指定动作，则显示“弹起”帧中的对象就作为响应鼠标事件的动作。创建按钮的操作步骤如下：（1）确保没有选择舞台上的任何内容。（2）选择“插入”|“新建元件”命令，弹
23、出“创建新元件”对话框，在“名称”文本框中键入新按钮元件的名称，并在“类型”选项组中单击“按钮”单选按钮。（3）单击“确定”按钮，切换到元件编辑模式。同时时间轴的标题会变为显示4个标签分别为“弹起”、“指针经过”、“按下”和“点击”的连续帧。第1帧（“弹起”）是空白关键帧。（4）创建弹起状态的按钮图像。可以使用绘画工具、导入一幅图形或在舞台上放置另一个元件的实例。（注：可以在按钮中使用图形元件和影片剪辑元件，但不能在按钮中使用另一个按钮）（5）单击标示为“指针经过”的第2帧，然后选择“插入”|“时间轴”|“关键帧”命令，使其成为一个关键帧。（6）将按钮图象改为“指针经过”状态。（7）为“按下”
24、帧和“点击”帧重复步骤（5）和（6）。（8）完成之后，单击编辑栏上的“返回”按钮退出元件编辑模式。然后从“库”面板中拖出按钮元件即可在文档中创建该元件的实例。3.3遮罩层的使用使用FLASH的遮罩功能可以制作很多复杂的效果。遮罩层的功能就像一个蜡版，当用户将蜡版防在一个表面并在该表面涂抹颜料时，颜料只会涂在没有被蜡版遮掩住的地方，其他地方则被隔开或被遮掩住。例如，要获得聚光灯效果以及转变，可以使用遮罩层创建一个孔，通过这个孔可以看到下面的图层。遮罩项目可以是填充的形状、文字对象、图形元件的实例或影片剪辑。可以将多个图层组织在一个遮罩层之下来创建复杂的效果。要创建遮罩层，可以将遮罩项目反复在要用
25、作遮罩的图层上。和填充或笔触不同，遮罩项目像是个窗口，透过它可以看到位于下面的链接层区域。除了透过遮罩项目显示的内容之外，其余的所有内容都被遮罩层的其余部分隐藏起来。一个遮罩层只能包含一个遮罩项目。按钮内部不能有遮罩层，也不能将一个遮罩应用于另一个遮罩。与遮罩层连接的常规图层实际上已经成了被遮罩层，但它保留了常规层的所有功能，可以使用任何被连接图层上的多个元件、对象和文本，甚至可以将它们处理成动画。简言之，遮罩层是包括用作遮掩的实际对象的层，与被遮罩层是一个受遮罩层影响的层。遮罩层可以有多个与之相联系的或相连接的被遮罩层。与遮罩层连接的常规图层中的内容只能通过遮罩层上具有实心对象（如圆、正方形
26、、群组、文本甚至元件）的区域显示。可以将遮罩层上的这些对象做成动画以创建移动的遮罩层。创建一个遮罩层的操作步骤如下：（1）创建一个常规层，并在上面画出将要透过遮罩的洞显示的图形与文本。（2）单击时间轴左下角的“插入图层”命令，新建一个图层。（3）在新图层上创建填充形状、文字或元件实例。（4）右击新建图层，从弹出的快捷菜单中选择“遮罩层”命令。此时该图层即转换为遮罩层，并用一个遮罩层图标来表示。紧贴它下面的图层将连接到遮罩层，其内容会透过遮罩层上的填充区域显示出来。被遮罩的图层的名称将以缩进形式显示，其图标将更改为一个被遮罩的图层的图标。（5）锁定遮罩层和被遮住的图层，既可在FLASH中显示遮罩
27、效果。3.4滤镜和混合模式使用滤镜，可以为文本、按钮和影片剪辑增添有趣的视觉效果，并且可以将投影、模糊、发光和斜角等图形效果应用于图形元素。FLASH所独有的一个功能是可以使用补间动画让应用的滤镜活动起来。例如，如果创建一个具有投影的球（既球体），可以在时间轴将投影位置从起始帧移动到终止帧，来模拟光源从对象一侧移动到另一侧的效果应用滤镜后，可以随时改变其选项，或者重新调整滤镜顺序以试验组合效果。在属性检查器中，可以启用、禁用或者删除滤镜。删除滤镜时，对象恢复原来的外观。通过选择对象，可以查看应用于该对象的滤镜；该操作会自动更新属性检查器中所选对象的列表。每个滤镜都包含控件，可以调整所应用滤镜的
28、强度和质量。在运行速度较慢的计算机上，使用较低的设置可以提高性能。如果在一系列不同性能的计算机上创建回放内容，或者不能确定观众所使用计算机的计算能力，应将质量级别设置为低，以实现最佳的回放性能。（注：应用于对象的滤镜类型、数量和质量会影响SWF文件的播放性能。对象应用的滤镜越多，为正确显示用户创建的视觉效果，Macromedia Flash Player要处理的计算量也就越大。因此，对于一个给定对象，建议用户只应用有限数量的滤镜。）在FLASH中，使用混合模式可以创建复合图像。复合是改变两个或两个以上重叠对象的透明度或者颜色相互关系的过程。使用混合，可以混合重叠影片剪辑中的颜色，从而创造独特的
29、效果。混合模式也为对象和图像的不透明增添了控制尺度。可以使用FLASH混合模式来创建突出显示或阴影效果，以透显下层图像的细节或者对不饱和的图像涂色。混合模式包含这些元素：（1）混合颜色：应用于混合模式的颜色。（2）不透明度：应用于混合模式的透明度。（3）基准颜色：混合颜色下的像素的颜色。（4）结果颜色：基准颜色的混合效果。第四章 播放器界面功能需求分析（1）视频框/进度条/列表等美工 给人以立体、醒目、轻松的视觉效果。（2）常见播放器按钮的制作 每个按钮都有3中状态：弹起、指针经过、按下。这里只需要“弹起”和“指针经过”两种状态即可。有区于鼠标是否在该按钮上（即按钮是否在鼠标点击范围里）。（3
30、） 暂停/继续按钮的切换显示 当影片状态为停止时或暂停时，“;”按钮隐藏而“4”按钮显现；当影片状态为正在播放时，“4”按钮隐藏而“;”按钮显现。（4） 音量按钮上的菜单效果 鼠标移入音量按钮既显出音量控制梯形图；鼠标移出梯形图或音量按钮亦隐藏音量控制梯形图。（5） 音量大小图形控制 鼠标点击音量指示梯形图，音量大小得到设置，同时更新音量指示梯形图。（6） 双击视频区完成“全屏模式”与“完整模式”间的切换 Flash 8中，鼠标动作里没有双击鼠标的动作。这就需要变通达到双击切换的控制效果。（7） 当前播放曲目着重显示 在播放列表里，将正在播放的曲目用其他颜色着重标出。以重新刷新列表的Html文
31、本实现。（8） 对盗用SWF的给以友情提示 当其他网站调用播放器时，播放器提示“非法登入”同时提供“返回主页”的链接。（9） Flash文件优化 优化库里文件：删除无用元件、合并相同元件以减少编译后的文件体积。第五章 播放器界面结构分析5.1界面需求横向分析（场景帧）播放器不同于动画，需要很多帧。该播放器在场景里只需要4帧。每一帧都对应播放器的一种状态。是通过代码在对应帧中跳转的。帧之间关系示意图如下：第一帧第二帧第三帧第四帧图1：场景跳转帧关系示意图第一帧 数据载入界面 当用户刚打开播放器时候，播放器要访问网络请求播放列表（过程如图2：Flash载入播放列表示意图）。播放器请求播放列表到播放
32、器得到页面返回播放列表之间会有不定时长的网络延迟。此期间，要给用户提示一个等待的画面和提示。也给主Flash载入用户当地天气预报的小SWF以时间。脚 本文 件Data返回查找结果返回AS脚本访问URL查找数据库Flash第一帧图2：Flash载入播放列表示意图同时，得到的播放列表是一长串字符,赋在变量“concent”里，该帧也分割处理该字符串，以数组形式存放曲目。方便以后使用。第二帧 初始化视频连接和变量并定义一些函数 视频连接对象、声音对象的初始化；时间格式化函数：timeFormat()、播放函数：playFLV()的定义。第三帧 完整模式页面 该页面有完整的各种控制按钮、进度条、播放列
33、表、天气预报和场景1/3大小视频区。第四帧 全屏模式页面 场景100%的视频区和一个退出全屏按钮。5.2界面需求纵向分析（场景层）Flash层的概念使得场景上各个元件、图片、组件显得井井有条。大大的加快了Flash制作的速度、提高了工作效率。运用层还可以使用遮罩、引导等来做特殊的效果。以下是场景中层的说明（由上至下）：1. ActionScript ： 用以放置帧动作。2. 关于 ： 版权、制作者信息。3. 外框 ： 在网页SWF框架不成比例时，用以遮盖场景以外的Flsah元素。4. 天气 ： 外部载入的，第三方提供的天气预报的SWF。5. 进度条AS ： 有关下载/播放进度条的帧动作。6.
34、全屏 ： 有关全屏控制的一些按钮和动作。7. 音量控制 ： 有关音量控制的一些按钮和动作。8. 警示框 ：曲目播放结束后或曲目链接无效，而自动跳转下一首时提示给用户。9. 按钮/进度条 ： 所有按钮和进度条的相关元件和元件动作。10. 列表 ： 曲目列表相关元件11. 视频框架样式 ： 视频区外围框架的样式效果。12. 背景动画 ： 完整模式中飞花和“气泡”的动画。13. 背景 ： 载入页面的载入动画、完整页面的风景背景、全屏的黑屏背景。第六章 色彩的应用色彩给人视觉上造成的冲击力是最为直接与迅速的。作为第一视觉语言，色彩在多媒体制作中的作用是字体与图像等其他要素所无法替代的。由于对色彩的爱好
35、是人类一种最本能、最普遍的美感，它对观看者的影响便是最为直接的。设计者要考虑观看者最初一瞬间的色彩感觉，牢牢地捕捉住他们的眼光，以达到引起关注的目的。较高艺术性的媒体播放器是内容与美的形式的统一，应集结构对称、色彩柔和、搭配合理、审美性强为一体。6.1色彩在界面中的作用1. 色彩可以被当作一种很好的格式规划工具来使用。特别是当同一界面里包容大量信息，且利用惯常的空间区域分隔的方法来对它们进行组织和规划非常困难的时候。我们则用同一颜色显示它们，用颜色的纽带将它们联系起来。如果我们要提醒用户对界面上某一部分的注意，可以采用高亮度显示或动画显示等技巧，但这些办法可能都不如利用颜色来得灵活方便。2.
36、色彩本身充当有特定意义的视觉符号颜色是有意义的。这种意义可能来自于人们的长期共识，约定俗成。利用颜色的这种性质，我们可以把它当成一个很重要的屏幕元素来使用。比如：绿色的按钮表示“开始”;红色的按钮表示“停止”;白色的边框表示标题区;蓝色的边框表示正文区;红色区域显示警告信息;黄色区域提供帮助信息。这些都将大大提高人机界面的亲和性。在将色彩作为某种意义符号或渲染感情的手段时，设计者必须要注意：你所指定的这种色彩意义或情感象征一定要为用户所了解并接受，不能与他的固有色彩经验发生冲撞。还有，在整个设计中，色彩的意义一定要具有稳定性、一致性。3. 借助色彩逼真地反映客观世界。我们周围的世界是五彩缤纷的
37、，特别需要以照片、动画、活动视频等来展示一些客观对象和过程，这时候逼真的彩色显得尤其重要。6.2 色彩的运用在选用色彩设计多媒体播放器界面时，最重要的是明确色彩使用的目的和可能的作用，力求发挥色彩辅助交流、促进信息传播的作用。要做到合理运用色彩应注意以下几个方面：1. 对色彩的基本认识。在选用色彩时，最基本的要求是了解人眼的视觉系统：明确色彩滥用可能导致的问题，并尽量去避免它;考虑色彩搭配带来的情景效应;考虑视野环境因素等等。最重要的是明确色彩的作用是辅助交流，我们最终要达到的目标是完成信息从机到人的有效传递。换言之，色彩的作用应是为界面增色，而界面设计不可依赖色彩。2. 避免同时使用太多颜色
38、。同一画面中不要使用太多的颜色，一般以四五种为限。过多的颜色易于引起视觉疲劳。我们可以用一些其他的技巧，如：空间划分、层次变化及几何形状等来配合颜色使用，以增加屏幕的视觉效果。3. 用色彩来起强调作用。在同调的色中，局部加上不同调的色，形成视觉美点。色彩的点缀在界面中产生一种紧张感，成为整体的一个着力点。点缀的色应该采用小的面积，并与其他色形成强烈反差，以加强吸引力，形成视觉中心。根据一些色彩知识与应用，故我选橙黄色作为播放器界面的主色调。与金属相结合的黄色，具有快乐，希望，智慧和轻快的个性，它的明度最高，而且是理论性思考事情的“理智之色”。看到黄色，便容易提高自制力和注意力。 喜好黄色的人，
39、大多属于理论家类型。虽然才能出众，却容易恃才傲物。由于自尊心强，又对自己的能力极具信心，因此，经常希望得到别人的肯定和赞赏。尽管如此，有时又能温顺服从，表现出合作的个性，由此而言，毫无疑问，爱好黄色的人是一位真正生命力强胜的人。而橙色是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。它代表着节日的喜庆，充满了生机，在一间用橙色装饰的房子里想要变得忧郁悲伤都是件困难的事情。橙色能吸引人们的注意力，给人们带来能量、热力、乐趣和青春活力。第七章 播放器界面实现7.1 视频、进度条和列表界面等美工视频区背景画一白色圆角矩形。中间镂空，镂空部分与视频区吻合。以作为视频框，使得视频区凸显于播放器背
40、景。把圆角矩形转换为影片剪辑（图片不可使用滤镜效果）。选中该影片剪辑，在“属性”“滤镜”使用投影，强度设置为140，其他默认，进度条也一样。这样做可以增加视觉上的立体效果，不容易与背景混为一起。列表里，动态文本框外围也扩大一些画一个矩形，填充色为灰色，20%的透明（可以随意调节以适合为宜），笔触颜色“#CC3300”、笔触高度“2”、笔触样式“虚线”，用以表示列表文本框。将该矩形也转为影片剪辑做如上的滤镜。动态文本框设置字体字号和和颜色（宋体、12号、黑色）。文本框类型为“多行”、变量为“list”，另外要注意“”按钮要点选，表示list里的文本表现成Html。同时添加滤镜“发光”，颜色选用“
41、#FF8631”其他默认。这用以在列表字周围有发光颜色，用以在播放器背景前较容易的看清字。调节摆放各个按钮和视频、列表、进度条还有天气预报的位置。如下图3：图3：播放器页面设计7.2 9个常见播放器按钮的制作2个上下首、2个快进后退、停止、播放、暂停、全屏、静音。其中除了“静音”为影片剪辑，其他类型为按钮。每个按钮都只有2帧：第一帧弹起为水晶效果（上下有白色光亮）、第二帧指针经过为平板效果，得以区分鼠标当前是否在该按钮上。“静音”为4帧的影片剪辑，是2个按钮样式（同上，一个按钮两个效果即两帧） 和 。用代码控制显示，对应表示当前是否为静音。另外，当按钮为 同时鼠标在按钮上，即显示音量调节梯形图
42、（）。以完成静音和音量大小的控制。7.3 暂停/继续按钮的切换显示这两个按钮为重叠叠放。给这两个按钮命名实例名称“button_pause” 和“button_play”。每个按钮动作上使用点击动作“on (release)”来设置自身和另一按钮的“_visible”属性。如下“button_play”按钮的动作：on (release) /释放鼠标my_ns.pause(); /影片暂停和播放间的切换button_play._visible = false; /自身不显示button_pause._visible = true; /暂停按钮显示出来因为“暂停”和“停止”按钮对应的是同一个“继
43、续”或叫“开始”的按钮。所以只用上面的办法不太方便控制按钮的显现。所以同时采用了视频状态监听（NetStream.onStatus 处理函数）：onStatus = function(infoObject:Object) 每当状态更改或发布针对 NetStream 对象的错误时调用。如果您要对此事件处理函数做出响应，则必须创建一个函数来处理该信息对象。以下事件在发生某些 NetStream 活动时通知您。代码属性含义NetStream.Buffer.Empty数据的接收速度不足以填充缓冲区。数据流将在缓冲区重新填充前中断，此时将发送 NetStream.Buffer.Full 消息，并且该流将
44、重新开始播放。NetStream.Buffer.Full缓冲区已满并且流将开始播放。NetStream.Buffer.Flush数据已完成流式处理，剩余的缓冲区将清空。NetStream.Play.Start播放已开始。NetStream.Play.Stop播放已结束。NetStream.Play.StreamNotFound无法找到传递给 play() 方法的 FLV。NetStream.Seek.InvalidTime对于使用渐进式下载方式下载的视频，用户已尝试跳过到目前为止已下载的视频数据的结尾或在整个文件已下载后跳过视频的结尾进行搜寻或播放。NetStream.Seek.Notify搜
45、寻操作完成。按钮监听部分代码如下：var my_ns:NetStream = new NetStream(my_nc);my_ns.onStatus = function(infoObject:Object) if (infoObject.code = NetStream.Play.Start) button_play._visible = false;button_pause._visible = true;7.4 音量按钮上的菜单效果音量按钮（即上面提到的静音按钮）里4帧，每一帧都有个“stop()”。第一帧里是一个只有一帧的按钮，是弹起情况下的有声图案。该按钮上动作为“ on (roll
46、Over) this.gotoAndStop(2); ”，当鼠标滑入时该影片剪辑跳图4：空按钮（亮蓝部分）转并停在第二帧。第二帧里两个按钮和一个控制音量的影片剪辑。一个按钮是指针经过下的有声图案，一个是以音量控制的影片剪辑和上面按钮之外空白部分为热点的空按钮（如图4）。空白按钮的功能是鼠标经过热点（图中亮蓝部分，不与图上按钮和剪辑重叠）时，“on (rollOver， rollOut， dragOver， dragOut) this.gotoAndStop(1); ”以达到移出音量按钮和剪辑后，音量按钮回位到弹起状态。即实现菜单效果。7.5 音量大小图形控制在上面“音量控制的影片剪辑”里是用到
47、了遮罩。用代码控制遮罩下的橘红色的矩形影片剪辑的“_xscale”属性的值来达到梯形图示声音大小。首先在最底层画一个白色的矩形，作为背景。倒数第二层绘制一些逐渐变高的矩形，并调整好间距，以达到梯形效果。笔触为空，填充为灰色。复制刚刚的梯形图那帧，在新建一顶部图层并粘贴刚复制的帧。在这一帧下面在新建一图层，绘制一个橘红色的矩形，矩形大小要刚刚好覆盖整个梯形图。转换橘红的矩形为影片并命名实例为“vol_img”。再设置第一层为遮罩，此时第二层被自动设为了被遮罩层，其他为正常层。返回上一元件，命名“音量控制的影片剪辑” （即图4中按钮上的剪辑）实例名为“vol_logo”。在该实例上添加动作如下：on (press, release, releaseOutside, dragOver, dragOut) if (_xmouse40.7) /40.7是橘红色矩形的宽度mouse_x = 40.7;
