(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.重做本章全部实例。