自定义 FLVPlayback 组件

		您的当前位置：首页>兴趣思索>内容

自定义 FLVPlayback 组件

发布时间：2007-12-09

用于 Flash 视频的新 FLVPlayback 组件是 Flash Professional 8 中的一项功能升级。如果您一直在等待在图形方面较为灵活的 Flash 视频组件, 现在您终于如愿以偿了。FLVPlayback 组件提供了扩展的 ActionScript API 以及多种图形自定义和外观设置方法。

本文将向您介绍设置 FLVPlayback 组件外观的三种方法:

通过“选择外观”对话框选择预置的外观
使用 FLV Playback Custom UI 组件混合及匹配可自定义的控件
创建自己的预置外观

要求

要充分学习本教程, 您需要以下软件和文件:

Macromedia Flash Professional 8

购买

Flash Professional 8 附带了 FLVPlayback 以及新的 Flash 8 Video Encoder。

教程和范例文件:

为理解本文, 您很可能需要准备一个 Flash 视频 (FLV) 文件 (尽管这不是必需的) , 以便能够利用工作文件测试外观自定义。如果您手头上没有 FLV 文件, 可以使用 FLVPlayback 组件的 contentPath 属性中的下列 URL。

water.flv (FLV, 378K)

必备知识

本文着重介绍使用外观设置功能自定义 FLVPlayback 组件。有关如何播放及控制视频的详细信息, 请参阅 Flash Video Template: Video Presentation with Navigation (Flash 视频模板: 带有导航的视频演示文稿) *。

使用预置的外观 SWF 文件

新的 FLVPlayback 组件包含非常出色的功能。在使用 FLVPlayback 组件时您会注意到, 此组件具有各种外观样式。外观 SWF 文件是预置的控件集合, FLVPlayback 组件可以在回放过程中使用这些控件控制视频。使用“选择外观”对话框, 可以从各种外观和控制组合中进行选择 (见图 1)。

图 1. 使用“选择外观”对话框从预置外观选项中进行选择。

选择预置外观是修改视频播放器外观的最简单方式。您只需打开此对话框然后从预览浏览器中选择外观即可。其余的工作由 Flash 完成。

使用“导入视频”命令打开“选择外观”对话框

在 Flash Professional 8 中, 可使用“导入视频”命令将视频组件添加到舞台中, 为该组件指定外部 FLV 文件, 然后从“选择外观”对话框中选择所需的外观。这样操作非常简单, 如果您是 Flash 新手或者您想快速入门, 就应该采用这种方法。在第一次向舞台添加视频组件时可使用此方法。之后, 可使用组件检查器来更改外观选项。

以下为使用“导入视频”命令指定外观的基本步骤:

在 Flash Professional 8 中, 创建一个新的 Flash 文件, 然后将其保存到与您的 FLV 文件相对的位置。
从主菜单中选择“文件” › “导入” › “导入视频”。“导入视频”对话框随即打开。
在“选择视频”屏幕中, 浏览找到要查看的 FLV 文件的路径。单击“下一步”进入下一屏幕。
在“部署”界面中, 如果您不从 Flash Media Server 上以数据流方式下载 FLV 文件, 请选择“从 Web 服务器渐进式下载”选项。在流式下载的情况下, 请选择一个相关选项。单击“下一步”进入下一屏幕。
在“设置外观”屏幕中, 使用“外观”弹出式菜单预览并选择外观。此屏幕等同于图 1 所示的“选择外观”对话框。单击“下一步”进入下一屏幕。
在“完成视频导入”屏幕中, 检查您的设置, 在利用此向导完成操作后, 单击“完成”。注意, FLVPlayback 组件已添加到舞台中。其大小已经过调整, 适合您在第 3 步中指定的 FLV 文件。

备注: FLVPlayback 组件使用嵌在 FLV 文件中的元数据调整自身大小。较早的 FLV 文件可能不包含此元数据。如果是这样, 该组件就无法自动调整自身大小。为实现最佳效果, 请使用 Flash 8 Video Encoder 再次将源文件编码成 FLV 格式。如果没有源文件, 还可以使用 FLV 元数据实用程序 (例如 FLV MetaData Injector*) 嵌入此信息并解决该问题。
单击该实例选中它, 然后打开组件检查器, 查看由“导入视频”命令添加的组件参数。请注意, contentPath 属性保留指向该视频的 URL, skin 属性包含您在第 5 步中选择的外观 SWF 文件的名称。如果此时要更改外观, 可以在组件检查器中手动更改外观参数来实现。
导入影片, 以查看效果。

使用组件检查器打开“选择外观”对话框

在将 FLVPlayback 组件放到舞台上后, 请使用组件检查器更改所选外观 (以及其它各种参数)。您可以根据需要多次更改成不同的外观。

我们已经完成了上述练习步骤, 下面将练习使用组件检查器指定或更改外观的步骤:

在 FLVPlayback 实例处于选中状态时, 单击选择组件检查器参数列表中的 skin 属性, 然后再次单击, 打开对话框。“选择外观”对话框随即打开。
单击“外观”弹出式菜单, 预览并选择外观 SWF 文件。完成浏览后单击“确定”。
此时应看到包含了您更改后的更新组件的“实时预览”。

关闭外观 SWF 功能

您很可能要经常关闭 FLVPlayback 组件的默认外观, 以便添加自己的控件、使用不同的自定义用户界面组件, 或利用 ActionScript 完全控制组件 (请参阅我的文章 Controlling Flash Video with the FLVPlayback Behaviors (使用 FLVPlayback 行为控制 Flash 视频) *)。要关闭 SWF 功能, 请执行以下简单步骤:

在 FLVPlayback 实例处于选中状态时, 双击组件检查器参数列表中的 skin 属性。“选择外观”对话框随即打开。
从“外观”弹出式菜单选择“无”, 然后单击“确定”, 退出该对话框。
此时应看到删除了控件的“实时预览”更新。

提示: 您可以在组件检查器中将 FLVPlayback 组件的 skinAutoHide 属性设为 true, 以隐藏控件, 直至光标位于此视频上方为止。请注意, 此属性仅在使用外观 SWF 功能时有效。

请注意, 不能直接修改预置的外观 SWF 文件。因此, 在设置 FLVPlayback 组件外观的三种方式中, 使用预置的外观 SWF 文件是最不灵活的方式。但使用它们无需任何开发工作或 Flash 编辑经验。

使用 FLV Playback Custom UI 组件

FLVPlayback 组件的另一项强大的新功能是添加了支持 FLV Playback 自定义用户界面组件。您可能已经注意到“组件”面板中有两个新类别 (见图 2)。

Flash 8 Professional“组件”面板包含两个新类别: FLV Playback – Player 8 和 FLV Playback Custom UI

图 2. Flash Professional 8 中的“组件”面板包含两个新类别: FLV Playback – Player 8 和 FLV Playback Custom UI。

FLV Playback Custom UI 组件是可以与 FLVPlayback 实例相关联的单个视频控件的集合。自定义用户界面组件可以任意组合使用, 可放置在屏幕上的任何位置, 并且可以象编辑标准影片剪辑元件那样进行编辑。

Flash 8 提供了以下控件:

按钮:

返回
前进
静音
播放/暂停 (或作为单独按钮的“播放”和“暂停”)
停止

栏:

缓冲
搜索
音量

使用自定义用户界面组件的一般过程是将实例添加到舞台, 命名该实例, 并使该实例名与视频组件上的赋值属性相关联。自定义用户界面组件与 FLVPlayback 实例相关联后, 该组件会自动具有其名称所暗示的功能。无需进行额外编码。

将自定义用户界面组件添加到 FLVPlayback 实例

要将自定义用户界面组件添加到 FLVPlayback 实例, 请执行以下步骤:

在 Flash Professional 8 中创建一个 FLA 文件, 然后将 FLVPlayback 组件的实例从“组件”面板拖到舞台上。选中该 FLVPlayback 实例, 然后在属性检查器中为其命名 (例如 flvPlayback)。
保存该文件, 然后导出 SWF 文件。
选择组件, 然后检查确保在组件检查器中已将 skin 属性设为 None (组件检查器中的外观参数在下一部分介绍)。您可以指定外观 SWF 文件和自定义用户界面组件, 但您应仅在打算这样做时才执行此操作。
现在您已准备就绪, 可以开始将自定义用户界面组件添加到舞台中 FLVPlayback 实例的旁边。您可以按照您喜欢的任何方式放置组件。为该实例命名 (例如 mySeekBar)。
作为一个曾应用过的范例, 假设您要将搜索栏添加到 skin 属性设为 None 的 FLVPlayback 实例。要完成此任务, 则将 SeekBar 组件从“组件”面板拖到舞台上。将该组件放在所需的位置。一般不要将自定义用户界面组件设计为可在舞台上进行缩放；尽量避免缩放组件实例。而应该更改库中组件影片剪辑元件内的图形大小。但是, 如果进行水平缩放, 搜索栏的外观会比较好看。使用“任意变形”工具或“对齐”面板中的匹配命令使 FLVPlayback 实例的宽度保持一致 (见图 3)。

图 3. 这是 SeekBar 实例在舞台上的视图。请注意, 在属性检查器中, 该实例被命名为 mySeekBar。该实例名在以下步骤中与 FLVPlayback 组件相关联。
打开“库”面板。请注意, SeekBar 实例附带了多个外观元件, 这些外观元件保存在名为 FLV Playback Skins 的文件夹中。通过这些影片剪辑各自在舞台上的实例或它们在库中的元件, 您可以进入其中每一个影片剪辑的编辑模式 (见图 4)。

图 4. 这是包含 SeekBar 自定义用户界面组件和组件外观的“库”面板的视图。
最后一步是将 SeekBar 实例与 FLVPlayback 实例相关联。要执行此操作, 请在包含这些视频组件的时间轴中添加名为 actions 的新图层。选择此 actions 图层, 然后打开“动作”面板。输入以下代码, 将 flvPlayback 替换为要使用的 FLVPlayback 实例名, 将 mySeekBar 换为搜索栏的实例名。
```
// 将 mySeekBar 实例指定到 flvPlayback 实例
flvPlayback.seekBar = mySeekBar;
```
导入 SWF, 以查看效果。

提示: 如果您要对较早的 FLV 文件使用 SeekBar 组件, 此 FLV 文件可能不包含驱动 SeekBar 组件及百分比功能所需的元数据。在这种情况下, 您可以通过手动将 totalTime 值输入到 FLVPlayback 参数中来解决此问题。

修改自定义用户界面组件图形

您可以象正常编辑任何影片剪辑元件一样编辑自定义用户界面组件中包含的图形。进入影片剪辑的时间轴, 找到您要调整的图形, 然后从那里进行编辑。关键是您不需要更改所提供的实例名或文件结构。

完成上述练习步骤后, 下面将向您介绍如何能改搜索栏图形:

双击舞台上的 SeekBar 实例, 进入其编辑模式。
锁定除 progress 图层外的所有图层, 然后双击进度栏, 进入其编辑模式。选择舞台上的渐变填充, 然后使用工具栏上的“填充颜色”样本更改颜色 (例如, 您可以将其更改为纯蓝色或其它颜色的渐变填充)。
单击编辑栏上的 SeekBar 按钮, 返回到 SeekBar 时间轴 (见图 5)。

图 5. 单击编辑栏上的 SeekBar 按钮可以返回其时间轴。
请注意, 图 5 中时间轴的第 2 帧上有一个关键帧。实际上, 时间轴不会播放到第 2 帧, 但在某些情况下图形会保存在这里, 以确保可以将元件随文件一同导出, 并可用于 ActionScript。解除对 assets 图层的锁定, 移动到第 2 帧, 然后编辑舞台上的手柄图形。双击该图形, 进入其编辑模式。根据需要更改图层 1 上的图形。请注意, 为手柄创建“点击状态” (活动区域) 的 hitBG 图层上有一个不可见的图形。
单击编辑栏上的 SeekBar 按钮, 返回到 SeekBar 时间轴。如果您喜欢, 可以在此处继续进行编辑。请注意, script 图层中包含可调整 FLVPlayback 实例相关控件设置的代码。除非您更改图形的大小和形状, 否则无需调整此代码。

此过程适用于所有自定义用户界面组件。有关复杂自定义的更多信息, 请参阅下面列出的“帮助”文档。
（阅读次数：）

[

收藏] [