登陆注册
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.重做本章全部实例。

同类推荐
  • 体感交互技术

    体感交互技术

    本书提出了体感计算的研究,探讨了基于体验性认知的个性化电子学习方式,并且分析了面向儿童的艺术创造体验,在体感虚拟化身的帮助下,用户可以通过身体运动,促进情感心智的全面发展,
  • 中文版AutoCAD2005建筑绘图精讲精学

    中文版AutoCAD2005建筑绘图精讲精学

    本书从中文版AutoCAD2005建筑绘图的基础进行介绍,讲解了建筑绘图的环境设置、二维建筑图形的绘制、二维建筑及装饰图形的编辑、建筑绘图中的文字标注和图形查询、建筑装潢平面图中的尺寸标注、建筑绘图中图块的应用、建筑平面图的绘制、建筑立面图的绘制、建筑剖面图的绘制、建筑绘图中的三维造型、三维建筑模型绘制及建筑图纸的布局与打印输出等内容。
  • 悟道:一位IT高管20年的职场心经

    悟道:一位IT高管20年的职场心经

    本书是一位有20多年职场经验的IT企业高管撰写的一系列有关职场悟道的短文集成,讲述的是在企业里如何修炼自己,如何摆平自己的心态,怎样做到“世事洞明”和“人情练达”,如何“搞定老板”,怎样做到工作和生活平衡等诸多话题,涉及到跳槽、转行、升迁、环境、沟通、老板、下属、老外等等。每一篇都以作者的亲身经历或者身边的故事说明道理,语言简洁流畅,妙趣横生,更有不少经典片段和发人深省的职场警句,读起来就像是一个睿智幽默的老朋友坐在你面前娓娓道来。
  • 研究性学习丛书-电脑知识

    研究性学习丛书-电脑知识

    本书对电脑知识有一个全面详细的介绍,会对读者的电脑知识进行提高。
  • 玩转手机

    玩转手机

    本书主要包括:手机的发展历史、手机知识、手机的选购与巧用、手机与网络、手机短信等内容。
热门推荐
  • 逍遥冷妃

    逍遥冷妃

    叶香香的运气真的很背,明明好得不得了的天气,乍就突然起风了呢?在海边哀悼失恋的她怎么就被刮到了这个陌生的国度,还成为人家逃跑的妃子?成人家的妃子倒也罢了,还要任人宰割?我去,我叶香香好歹也是个读书人,懂得如何维护自己的权益,你们休想欺负我!可是,她到的地方是逍遥国,有谁肯为她说一句话?逃跑的妃子对吧?既然是妃子,我就利用妃子的头衔,专门破坏你们的好事去!啊?怎么还有一个一模一样的妃子啊?难不成是自己的分身么?老天爷,好晕哦!
  • 禧从天降:摄政王爷小刁妃

    禧从天降:摄政王爷小刁妃

    靖朝宣抚元年,大司马兼骠骑将军齐恕血腥手段镇压反叛诸王军马,拥立十岁幼帝司徒昱即位。因勤王有功,被任命为摄政王,把持朝政,风光无两。但又因残暴奸佞名声广为流传,被视为人间阎罗。
  • Shakespeare Speaks 莎翁永恒名句(永恒名句系列)

    Shakespeare Speaks 莎翁永恒名句(永恒名句系列)

    选录英国著名作家莎士比亚名言名句(中英对照),以短小篇幅,帮助学习者初步接触莎士比亚及其作品,认识可供引用的名言。
  • 这个鼠部落强的离谱

    这个鼠部落强的离谱

    鼠人,一直是弱小的代名词。天生柔弱的体质和力量,一旦遇到了强敌,就会陷入灭族的巨大危机当中。直到某天,一切都发生了改变。猪人的威胁,让鼠人大长老做出了决定,打开了先祖从秘境得来的石椁,让一位叫凌湛的人穿越过来……群号:305387559
  • 剑魔临世

    剑魔临世

    九州大陆,有王朝并起,有宗门鼎立。一代天骄沐寒,在破败中崛起,一个人,一把剑,走出自己的传奇历程。(简介无力,不过只能写成这样了。)简单来说这就是一个与剑有关的故事。
  • 珵玉南归

    珵玉南归

    天界上古圣物玉衡现世,并聚集了众仙的仙灵之力,仑南大陆必定为争夺玉衡而乱···伴着异象出生的轩辕公主竟然天生痴傻,人造人竟是公主在异世界的分身,玉衡被催动,两个灵魂被融合后又会发生什么···
  • EXO回眸一笑最倾城

    EXO回眸一笑最倾城

    她是人气偶像天团捧场王朴灿烈的妹妹,一次偶然的碰撞使她对鹿晗一见钟情。在一次演唱会上,朴梦妍看见鹿晗很温柔的对一个女生,难过的跑了出去,在稀里糊涂之中向鹿晗表白了。终于在他们好好的在一起的时候,朴梦妍却得知鹿晗解约并回国了,她害怕失去鹿晗。她来到鹿晗的故乡,她和鹿晗之间会有什么样的结局呢?
  • 紫极舞

    紫极舞

    一对江湖情侣因为骄傲的个性而分离,在分别的这两年中,配天遇到了一个真心爱着她,宁愿为了她而死的男子。这个亦正亦邪的男人为了她引发出一连串的让人意想不到的事情,引起群雄激愤。在上玄、配天本已艰涩无比的情路上,惯爱嘲弄世人的命运之神再出难题——这对多舛的恋人到底要如何选择,才能找到迷宫正确的出口?这场骄傲与骄傲的比拼到底如何收场?
  • 天行

    天行

    号称“北辰骑神”的天才玩家以自创的“牧马冲锋流”战术击败了国服第一弓手北冥雪,被誉为天纵战榜第一骑士的他,却受到小人排挤,最终离开了效力已久的银狐俱乐部。是沉沦,还是再次崛起?恰逢其时,月恒集团第四款游戏“天行”正式上线,虚拟世界再起风云!
  • 天道修仙传

    天道修仙传

    一位被认定废材资质的五行杂灵根修士,在残酷的修仙世界里,看他如何一步一步走出康庄通途,问鼎飘渺仙道,完成得证长生道果的传奇!《天道修仙传》书友QQ群:85028173