登陆注册
28301400000019

第19章 组件的应用(2)

(4)单击【打开】按钮,返回到如图8-27的【内容路径】对话框。取消对【匹配源FIV尺寸】的选择,单击【确定】按钮完成路径设置。至此播放器的制作就完成了,测试影片,效果如图8-28所示。

(a)(b)

2.更换播放器外观

(1)Flash还提供了许多视频播放器外观,在【参数】的【skin】选项中就能设置不同的外观,如图8-29所示。

(2)单击“查看”按钮打开【选择外观】对话框,如图8-30所示,就可以对播放器的外观进行选择。

8.2.2典型案例-制作多功能视频播放器

使用Flash提供的播放器模板虽然能够满足一定的使用要求,但是其涉及的播放控制组件不能随意地调整。在本案例中,将使用“Video”中的播放控制组件来创建一个多功能的播放器。设计思路有组件布局设计、后台程序编写、加入字幕效果。设计效果如图8-31所示效果。

制作的具体过程如下。

1.组件布局设计

(1)新建一个Flash文档,设置文档尺寸为“550×450”像素,其他属性保持默认参数。

(2)新建3个图层,然后从上到下依次重命名为“代码层”、“播放控制组件”层和“播放器组件”层,如图8-32所示。

(3)选中“播放器组件”图层,将“Video”组件中的“FLVplayback”组件拖曳到舞台,并设置播放器的宽、高为“550×400”像素,位置坐标X、Y分别为“0”、“0”,舞台效果如图8-33所示。

(4)选中播放器组件,在【参数】面板中,设置其【skin】参数为“无”,得到如图8-34所示的播放器。

(5)锁定“播放器组件”图层,选中“播放控制组件”图层,打开【组件】面板,将“Video”组件中的“BackButton”、“BufferingBar”、“ForwardButton”、“FullScreenButton”、“PauseButton”、“PlayButton”、“SeekBar”、“StopButton”、“VolumeBar”、拖曳到舞台中,并按照如图8-35所示的位置进行放置。

2.后台程序编写

(1)放置到舞台的所有组件,还需要通过设置“实例名称”才能被程序所调用。

(2)打开【参数】面板,按照从上到下,从左至右的顺序依次给组件命名:“mFLVplayback”、“mBufferingBar”、“mBackButton”、“mPauseButton”、“mForwardButton”、“mSeekBar”、“mStopButton”、“mVolumeBar”、“mFullScreenButton”,如图8-36所示。

(2)将“Video”组件中的“FLVplaybackCaptioning”组件拖曳到【库】面板中,以便程序调用。

(3)选中“代码”图层的第1帧,打开【动作-帧】面板,输入以下代码。

(4)根据程序中指定的视频播放路径“视频2.flv”,将素材“第8章\视频2.flv”文件复制到本案例发布文件相同的路径下。测试影片,得到如图8-37所示的效果。可以通过播放控制组件对视频播放进行各种控制操作。

3.加入字幕效果

(1)加入字幕的方法十分简单,首先需要在现有的程序后面加入以下程序。

(a)加载视频界面(b)播放界面

注意:素材“第8章\多功能视频播放器代码.txt”提供本案例涉及的所有代码。

(2)将素材“第8章\字幕.xml”复制到本案例发布文件相同的路径下。

字幕内容以XML的形式存在,可分为以下几个部分。

①xml的版本说明及其他相关说明:

所有的歌词和歌词样式都写在<tt></tt>之间。<head></head>之间定义歌词的文字对其方式、文字的颜色、文字的大小等,<body></body>之间定义歌词的开始时间、结束时间、歌词的文字。

本案例使用“FLVPlayback”组件结合视频播放控制组件制作了一个具有多种控制功能的视频播放器,并为视频制作了字幕效果。本案例中所涉及的所有视频和字幕源文件都可以使用网络资源来替代,从而使播放器可以直接播放网络资源。如果能独立制作本案例,就说明这部分内容已经牢固地掌握了。

8.3典型案例-制作点播系统

当视频在网络上传输时,如果文件太大,就会影响传输的速度。所以有时候需要将视频文件分割成小段来传输。在本案例中,将使用用户接口组件和视频播放器组件综合的方式来制作一款具有点播放功能的视频播放器,来选择播放被分割成5段的视频。设计思路包括使用组件设计界面、手动方式添加链接、后台程序编写、测试完善系统。设计效果如图8-39所示。

(a)普通效果(b)全屏效果

具体的操作步骤如下。

1.设计界面(1)新建一个Flash文档,设置文档尺寸为“550×650”像素,背景为“黑色”,其他属性保持默认参数。

(2)新建3个图层,并从上至下依次命名为“代码层”、“播放器组件”层和“用户接口组件”层,效果如图8-40所示。

(3)选中“播放器组件”图层的第1帧,然后将“FLVPlayback”组件拖曳到舞台中,并设置其宽、高为“550×360”像素,位置坐标X、Y分别为“0”、“0”。设置播放器组件的【skin】

参数为“SkinUnderAllNoCaption.swf”,效果如图8-41所示。

(4)选中“用户接口组件”图层的第1帧,将“TileList”组件拖曳到舞台中,并设置其宽、高为“100×400”像素,位置坐标X,Y分别为“500”、“0”,如图8-42所示。

2.添加组件链接

(1)将素材“第8章”中的“片段1.flv”至“片段5.flv”和“图片1.jpg”至“图片5.jpg”

复制到本案例发布文件的路径下。

(2)选中舞台中的“TileList组件”,打开【参数】面板,单击【dataProvider】选项按钮,打开如图8-43所示的【值】对话框。

(3)连接单击五次“+”按钮,增加5个项,如图8-44所示。

(4)依次修改“label0~label4”的【label】项为“片段1.flv”、“片段2.flv”、“片段3.flv”、“片段4.flv”和“片段5.flv”,依次填写【source】项为“图片1.jpg”、“图片2.jpg”、“图片3.jpg”、“图片4.jpg”和“图片5.jpg”,如图8-45所示。

(5)单击【确定】按钮完成值创建,测试影片即可看到如图8-46所示的效果,此时的“TileList”组件已经显示出视频片段的预览图。

3.后台程序编写

(1)选择舞台中的“FLVPLayback”组件,并设置其“实例名称”为“mFLVplayback”,选择舞台中的“TileList”组件,并设置其“实例名称”为“mTileList”。

(2)在“代码”图层的第1帧上添加如下代码。

(3)测试影片,单击右边的“视频片段阅览图”即可观看相应的视频片段,如图8-47所示。

(a)普通模式(b)全屏模式4.测试完善系统

(1)测试观看后发现,系统没有自动播放的功能,看完一部分不能自动读取下一部分,这给用户带来极大的不便。所以在“代码”图层的第1帧上继续添加如下代码,设置自动播放功能。

(2)此时的系统还有一个美中不足就是当全屏播放的时候,播放控制器不能自动地隐藏,从而影响视觉效果。

(3)选中场景中的“FLVPlayback”组件,打开【参数】面板,设置其中的【SkinAutoHide】

参数为“true”,如图8-48所示。

(4)测试观看影片,得到如图8-49所示的完美效果。

本案例结合用户接口组件和媒体控制组件的方式进行制作,完成了一个比较完整的视频点播系统。通过这个系统的制作,相信读者对组件应该有了一个更深的认识。同时认识到软件中任何部分都需要配合使用才能制作出更好作品。

小结

组件作为Flash的一个组成部分,有着其特殊的意义。它既对Flash软件本身的完整性起着重要的作用,同时也为用户开发提供了便利。通过组件,可以在短时间内完成一些类似应用程序开发,特别是制作播放器方面开发的工作,所以为许多大型网站所采用。

本章以先讲原理再以实例分析的方法为读者由浅入深地讲解了Flash组件的核心知识,但要完全掌握这门工具,还需要平时多花时间,加强练习,才能将其运用自如,为开发锦上添花。

思考与练习

1.组件可以方便地在哪些方面进行开发?

2.请以本章的讲解作为突破口,将本章没有涉及的组件运用起来。

3.使用用户接口组件开发一个个人性格测试工具,可以从素材“第8章\个人性格测试内容.txt”中获取试题,如图8-50所示。

4.请使用播放器组件和用户接口组件结合的方式制作一个可以任意设置播放文件路径的播放器,如图8-51所示。

5.重做本章全部实例。

同类推荐
  • 中文版AutoCAD2011基础与应用案例教程

    中文版AutoCAD2011基础与应用案例教程

    本书采用项目教学方式,通过大量案例全面介绍了AutoCAD2011软件的功能和应用技巧。全书共分8个项目,内容涵盖AutoCAD2011基本操作,绘制与编辑图形,标注尺寸,添加文字注释与应用表格,创建与应用块,绘制与编辑三维图形,图形输出等。
  • 我看电商

    我看电商

    本书是作者近30年从事零售及电子商务管理的总结和分享。近年来电商行业在中国迅猛发展,2012年网络零售市场规模达到13,000亿人民币,诞生了淘宝、天猫、京东、当当、凡客、唯品会……等一大批全新的网络公司,电子商务正在日益深入的影响着越来越多人的生活。如今这位自称跨界老兵的电商操盘手第一次全方位剖析电商风云,细说中美电子商务发展的不同路径,评点国内各大电商企业的是是非非,详解其中的融资、模式、运营、效率……个中经验,毫无保留的娓娓道来,笔触至深,让人不禁掩卷沉思。
  • 计算机网络技术与应用

    计算机网络技术与应用

    本书共8章,系统地介绍了计算机网络的发展和基本原理体系结构、局域网、广域网、网络服务、网络安全、典型网络的结构特点等内容。除第8章外,其他各章都附有练习题。为了加强学习效果,本书围绕知识点的典型性,精选了6个实验。此外,在本书的第8章,我们综合各章知识设计了“办公局域网组建设计”和“中小型企业局域网组建设计”这两个常用的计算机网络技术应用实例,供学生学习和参考。本教材适合作为本科非计算机专业学生的计算机网络教材。
  • Delphi程序设计教程

    Delphi程序设计教程

    本书为适应不同层次读者的需要,从Delphi的基本知识讲起,由浅入深,全面讲述了Delphi的集成开发环境、Delphi的编程语言——ObjectPascal、常用组件的使用、窗体的设计、菜单的设计、对话框的设计、多文档界面程序的设计、多媒体编程和数据库应用程序设计等内容。
  • 图说电子计算机

    图说电子计算机

    今天人们谈到计算机常常会把它和网络联系起来。20世纪90年代兴起的因特网其影响之广、普及之快也是大家始料未及的,也从没有一种技术能像网络一样日新月异,并迅速地改变着我们的学习和生活方式。因特网大大缩小了时空界限,为我们提供了快捷方便的交流途径。在未来10年内,计算机又将会有怎样飞速的发展呢?在互联网上进行医疗诊断、远程教学、电子商务、视频会议等活动已经实现,未来的互联网的传输速率将会提高100倍,大家可以随时随地连接到因特网上,更方便地进行交流、沟通和开展商务活动。
热门推荐
  • 斗战乾坤

    斗战乾坤

    斗的是这妖魔鬼怪,满天仙佛,强者为尊,胜者为王。战的是这苍穹大地,星辰宇宙,何为道,我为道。身化魔神,只手可遮天。道在我心,乾坤可入袖。
  • 逍遥仙师

    逍遥仙师

    一个修仙世家的小少爷,为什么会拜在一个二流门派门下?他如何才能在强者如云的修仙界崭露头角?做仙师很累?嘿嘿,那就做逍遥仙师!一、修炼等级:1、练气期、筑基期、结丹期、元婴期、化神期、步虚期、渡劫期,每一期又分为初期、中期、后期三个等级。2、仙人、紫罗玄仙、大罗金仙、仙君、仙帝、仙尊、圣人、仙师。每一级分为初期、中期、后期三个等级。二、丹药等级:1、灵丹:极品灵丹、一品灵丹、二品灵丹、三品灵丹、四品灵丹、五品灵丹、六品灵丹、七品灵丹、八品灵丹、九品灵丹、十品灵丹2、仙丹:神丹、极品仙丹、一品仙丹、二品仙丹、三品仙丹、四品仙丹、五品仙丹。
  • 都市之绝世帝主

    都市之绝世帝主

    八年前,家族被灭,八年后,绝世帝主强势归来。那些忤逆我的人,统统在骨灰盒里忏悔吧!
  • 泥桃儿

    泥桃儿

    什么时候才可以想明白自己想做什么,浑浑噩噩过一生,这便是我的一生
  • 仙踪魔影

    仙踪魔影

    二十八星宿,三十六地煞,七十二天罡,八十一魔神。剑道宗师商修竹,重生踏上修仙路,以剑入道,败四大神兽,斩十大凶兽,灭魔诛神,百战成圣,破天地桎梏,结九天大道。
  • 冥王回归

    冥王回归

    孤儿徐天,继承冥王传承,打破位面,飞升来到新的世界,在那里修炼成帝,看尽人间!
  • 世仁

    世仁

    一家人幸福过日子的我,因为一场阴谋遍布的大战成为了孤家寡人。我只能保持善良仁义道德地活在梦里,冷血无情处处算计地活在当下。
  • 青春荒唐我们不返

    青春荒唐我们不返

    时光啊,如果你能回转,我想看看那些早已逝去的青春包括他..
  • 重生之璎珞满裳

    重生之璎珞满裳

    坚持不剧透(*^3^)/~☆(?o?????﹏o??????)自己看??????????啊~现代女孩穿越异世大陆,明可以靠颜值吃饭,却要拼实力?
  • 拐个竹马做男友

    拐个竹马做男友

    与你相识多年,从青梅竹马到相伴一生,是我写给你的最美情书。