自定义 FLVPlayback 组件

Dan Carr

Dan Carr Design*

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

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

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

要求

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

Macromedia Flash Professional 8

教程和范例文件:

为理解本文, 您很可能需要准备一个 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 新手或者您想快速入门, 就应该采用这种方法。在第一次向舞台添加视频组件时可使用此方法。之后, 可使用组件检查器来更改外观选项。

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

1. 在 Flash Professional 8 中, 创建一个新的 Flash 文件, 然后将其保存到与您的 FLV 文件相对的位置。
2. 从主菜单中选择“文件” › “导入” › “导入视频”。“导入视频”对话框随即打开。
3. 在“选择视频”屏幕中, 浏览找到要查看的 FLV 文件的路径。单击“下一步”进入下一屏幕。
4. 在“部署”界面中, 如果您不从 Flash Media Server 上以数据流方式下载 FLV 文件, 请选择“从 Web 服务器渐进式下载”选项。在流式下载的情况下, 请选择一个相关选项。单击“下一步”进入下一屏幕。
5. 在“设置外观”屏幕中, 使用“外观”弹出式菜单预览并选择外观。此屏幕等同于图 1 所示的“选择外观”对话框。单击“下一步”进入下一屏幕。

6. 在“完成视频导入”屏幕中, 检查您的设置, 在利用此向导完成操作后, 单击“完成”。注意, FLVPlayback 组件已添加到舞台中。其大小已经过调整, 适合您在第 3 步中指定的 FLV 文件。

   备注: FLVPlayback 组件使用嵌在 FLV 文件中的元数据调整自身大小。较早的 FLV 文件可能不包含此元数据。如果是这样, 该组件就无法自动调整自身大小。为实现最佳效果, 请使用 Flash 8 Video Encoder 再次将源文件编码成 FLV 格式。如果没有源文件, 还可以使用 FLV 元数据实用程序 (例如 FLV MetaData Injector*) 嵌入此信息并解决该问题。

7. 单击该实例选中它, 然后打开组件检查器, 查看由“导入视频”命令添加的组件参数。请注意, contentPath 属性保留指向该视频的 URL, skin 属性包含您在第 5 步中选择的外观 SWF 文件的名称。如果此时要更改外观, 可以在组件检查器中手动更改外观参数来实现。
8. 导入影片, 以查看效果。

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

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

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

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

关闭外观 SWF 功能

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

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

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

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

使用 FLV Playback Custom UI 组件

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

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

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

Flash 8 提供了以下控件:

按钮:

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

栏:

• 缓冲
• 搜索
• 音量

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

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

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

1. 在 Flash Professional 8 中创建一个 FLA 文件, 然后将 FLVPlayback 组件的实例从“组件”面板拖到舞台上。选中该 FLVPlayback 实例, 然后在属性检查器中为其命名 (例如 flvPlayback)。
2. 保存该文件, 然后导出 SWF 文件。
3. 选择组件, 然后检查确保在组件检查器中已将 skin 属性设为 None (组件检查器中的外观参数在下一部分介绍)。您可以指定外观 SWF 文件和自定义用户界面组件, 但您应仅在打算这样做时才执行此操作。
4. 现在您已准备就绪, 可以开始将自定义用户界面组件添加到舞台中 FLVPlayback 实例的旁边。您可以按照您喜欢的任何方式放置组件。为该实例命名 (例如 mySeekBar)。

5. 作为一个曾应用过的范例, 假设您要将搜索栏添加到 skin 属性设为 None 的 FLVPlayback 实例。要完成此任务, 则将 SeekBar 组件从“组件”面板拖到舞台上。将该组件放在所需的位置。一般不要将自定义用户界面组件设计为可在舞台上进行缩放；尽量避免缩放组件实例。而应该更改库中组件影片剪辑元件内的图形大小。但是, 如果进行水平缩放, 搜索栏的外观会比较好看。使用“任意变形”工具或“对齐”面板中的匹配命令使 FLVPlayback 实例的宽度保持一致 (见图 3)。

   

   图 3. 这是 SeekBar 实例在舞台上的视图。请注意, 在属性检查器中, 该实例被命名为 mySeekBar。该实例名在以下步骤中与 FLVPlayback 组件相关联。

6. 打开“库”面板。请注意, SeekBar 实例附带了多个外观元件, 这些外观元件保存在名为 FLV Playback Skins 的文件夹中。通过这些影片剪辑各自在舞台上的实例或它们在库中的元件, 您可以进入其中每一个影片剪辑的编辑模式 (见图 4)。

   

   图 4. 这是包含 SeekBar 自定义用户界面组件和组件外观的“库”面板的视图。

7. 最后一步是将 SeekBar 实例与 FLVPlayback 实例相关联。要执行此操作, 请在包含这些视频组件的时间轴中添加名为 actions 的新图层。选择此 actions 图层, 然后打开“动作”面板。输入以下代码, 将 flvPlayback 替换为要使用的 FLVPlayback 实例名, 将 mySeekBar 换为搜索栏的实例名。

   // 将 mySeekBar 实例指定到 flvPlayback 实例
   flvPlayback.seekBar = mySeekBar;
   

8. 导入 SWF, 以查看效果。

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

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

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

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

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

3. 单击编辑栏上的 SeekBar 按钮, 返回到 SeekBar 时间轴 (见图 5)。

   

   图 5. 单击编辑栏上的 SeekBar 按钮可以返回其时间轴。

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

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

自定义用户界面组件详细信息

如果您进入每个组件的影片剪辑, 就会注意到它们均通过略微不同的方式进行了设置。有关每个组件类型的完整详细信息, 请参阅 Flash 8“帮助”文档的以下部分:

“组件语言参考” › “FLVPlayback 组件” › “自定义 FLVPlayback 组件” › “单独设置自定义 FLVPlayback UI 组件的外观”

用于外观设置的其它 FLVPlayback ActionScript 属性

下面的代码示例显示了 FLVPlayback 组件中包含的所有可用外观赋值属性。在此范例中, 组件的实例名为 flvPlayback, 赋值运算符 (=) 之后显示的值为舞台上自定义用户界面组件的实例名:

flvPlayback.playButton = playbtn; 
flvPlayback.pauseButton = pausebtn; 
flvPlayback.playPauseButton = playpausebtn; 
flvPlayback.stopButton = stopbtn; 
flvPlayback.muteButton = mutebtn; 
flvPlayback.backButton = backbtn; 
flvPlayback.forwardButton = forbtn; 
flvPlayback.volumeBar = volbar; 
flvPlayback.seekBar = seekbar; 
flvPlayback.bufferingBar = bufbar;

请注意, 您将使用 PlayPauseButton 组件,或 PlayButton 加上 PauseButton 组件。PlayPauseButton 组件可切换这两种状态, 而 PlayButton 和 PauseButton 组件则是单独的按钮。以上代码范例只是将所有外观属性简单地显示在一起以供参考。

您还可以使用 bufferingBarHidesAndDisablesOthers 属性修改组件处理与缓冲栏相关的外观的方式:

flvPlayback.bufferingBarHidesAndDisablesOthers = true;

如果您的缓冲区很大, 并且需要在下载视频 (很可能是从 Flash Media Server 服务器流式下载视频) 时禁用控件, 这样做非常方便。默认情况下, 此属性设置为 false。

请注意, autoSkinHide 属性是另一个与外观相关的属性, 但它不会影响 FLV Playback Custom UI 组件实例。如先前的使用预置的外观 SWF 文件中所述, 此属性只能与外观 SWF 文件一起使用。

创建自定义外观 SWF

如您先前所了解的, “选择外观”对话框和外观 SWF 功能使用起来非常快捷轻松。在本部分中, 您将了解创建自定义外观 SWF 文件的过程。

通过结合预先设计的自定义控件和用于扩展功能的 ActionScript 代码, 以及使用“选择外观”对话框来应用外观, 创建自定义外观 SWF 可以为您节省大量时间。此外, 外观 SWF 的设计还使之能够通过新的 Flash 8 影片剪辑缩放功能实现缩放。有关详细信息, 请参阅 Flash“帮助”文档 (“使用 Flash” › “关于 9 切片缩放和影片剪辑元件”)。

入门

创建新外观 SWF 文件的最简单方法是复制现有的外观 SWF 文件并对其进行修改。我们可以从创建 Flash Professional 8 附带的预置外观 SWF 文件的副本开始。默认外观集的 FLA 文件位于您的硬盘上 Flash 8 应用程序文件夹下的 <语言 › \Configuration\SkinFLA 文件夹中。

下列步骤可以帮助您开始:

1. 如果您安装了 Flash Professional 8, 请转到 Flash 8 应用程序文件夹, 然后打开 <语言 › \Configuration\SkinFLA 文件夹。

2. 您应看到每个预置外观 SWF 文件的 FLA 文件 (见图 6)。选择与您所想的外观接近的外观, 然后在 Flash 中打开此外观 FLA 文件。

   

   图 6. 这是 Windows XP 中显示的 SkinFLA 文件夹视图。

3. 使用新名称将该 FLA 文件保存在 <语言 › \Configuration\SkinFLA 文件夹中。请注意, 您不必一定要将该 FLA 文件保存在此位置。从该 FLA 中生成的 SWF 文件将被放置在 Configuration 文件夹中。您可以将该 FLA 保存在您硬盘上的任何位置。
4. 利用少许时间浏览一下此 FLA 文件。记住, 不要改变所提供的实例名和文件结构。
5. 您会立即注意到所有控件图形都在舞台中展开。单击各个图形, 并查看所选择的项目。用来创建各控件的图形集合被分组放置在影片剪辑中。您可以根据需要编辑影片剪辑中的这些图形, 但影片剪辑的嵌套结构和实例名需要保持不变。

至此, 您已经准备好了新的外观 SWF 文件, 可以开始进行自定义了。

修改外观 SWF 文件的图形

现在, 您已经根据现有的外观 SWF 文件创建了自己的版本, 对其进行修改的最快方法是编辑舞台上的影片剪辑中显示的图形。您可以花一些时间进行试验并对图形进行更改。

外观 SWF 文件采用了称为“9 切片缩放”的新 Flash 8 缩放功能。9 切片缩放功能可以在库中的影片剪辑上放置辅助线网格。缩放辅助线将图形分割成九个区域, 这些区域可使 Flash 一个实例接一个实例地对它们进行缩放, 且不发生扭曲。要将其取出, 则打开库中的 Chromes 文件夹, 双击其元件进入其时间轴。请注意覆盖矩形铬印染图形的辅助线。当在库编辑模式下编辑影片剪辑或按钮时, 这些辅助线是可见的。9 切片缩放功能的效果仅在 SWF 文件运行时才能看到。尝试缩放主时间轴上的一些实例, 然后导出影片 (“控制” › “测试影片”) , 以查看效果。

在不改变影片剪辑尺寸的情况下, 对按钮外观或按钮的铬印染 (或背景) 的简单修改都将有效, 不需要进一步修改。大多数情况下, 对控件位置的简单修改也将有效。

通过下列步骤, 您可以快速了解如何浏览及编辑文件:

1. 打开您要在 Flash Professional 8 中编辑的外观 SWF FLA。

   请注意, 此文件在根时间轴第 1 帧上包含带有图形的大量图层。位于图层堆栈最上方的图层包含 layout_mc 实例 (容纳组合控件的容器) 和 ActionScript 代码, 这些代码可初始化 layout_mc 影片剪辑中的各种属性。您无需编辑这些代码, 但您可能要查看以及浏览注释和默认属性设置。

2. 要编辑图形, 您必须先进入包含此图形的影片剪辑的编辑区域 (时间轴)。重复双击舞台上的图形, 直到您到达包含这些图层及可编辑图像的时间轴为止。

   例如, 要编辑水平显示在屏幕底部的铬印染背景图形, 则双击该图形一次, 进入此影片剪辑的时间轴及编辑区域。请注意, 该影片剪辑包含分布在多个图层中的可编辑图形 (见图 7)。影片剪辑的名称会随着文件的不同而变化, 但始终显示在根时间轴最下面的图层上, 并且内部的图层结构相同。

   

   图 7. 这是铬印染图形的影片剪辑时间轴 (如从 ClearOverNoVol.fla 文件复制的外观 SWF 文件所示) 的视图。

3. 解除对“Clear Plate”图层的锁定, 然后在舞台上选择填充。选择填充后, 更改工具栏上“填充颜色”样本中的颜色。请注意, 根时间轴上 layout_mc 影片剪辑中的颜色会自动更新。您可以试验一下更改填充颜色、轮廓及阴影的效果。
4. 完成时, 单击编辑栏上的“场景 1”按钮 (控件 E) , 返回到主时间轴。
5. 对于您要修改的任何图形, 此过程均相同。双击该图形, 直到进入编辑区域为止。请注意, 您可能必须双击多次才能到达编辑区域。例如, 当按钮嵌套深度达到 2 至 3 层时就需要如此。
6. 保存您的文件, 然后导出 SWF 文件。要了解如何将导出的外观 SWF 文件加载到 FLVPlayback 组件中, 请参阅下一部分。

提示: 如果不进行大量生成工作, 通过修改铬印染图形和背景图形中的颜色来更改视频播放器的外观可能真的需要很长时间才能实现。

手动加载自定义外观

要将自定义外观 SWF 文件加载到 FLVPlayback 组件中, 请使用外观参数和“选择外观”对话框浏览找到该 SWF。尽管您可以从任何位置浏览找到 SWF 文件, 但将文件放在 Flash Configuration 文件夹中使之能够与默认外观列表一同显示是最方便的方法。这使您能够预览其它默认文件中的外观 SWF 文件。它还会自动在您正在开发的 FLVPlayback SWF 文件旁放置一个外观 SWF 文件的副本。

要使外观 SWF 文件永久位于“选择外观”对话框中, 请将您的自定义外观 SWF 文件保存在 Flash 8 应用程序文件夹的 <语言 › \Configuration\Skins 文件夹中。将 SWF 文件保存在此位置中可使其包含在“选择外观”对话框中。这样每次使用“选择外观”对话框时您都会看到您的自定义外观。

要将外观 SWF 加载到 FLVPlayback 组件中, 请执行以下操作:

1. 在 Flash Professional 8 中创建一个 FLA 文件, 然后将 FLVPlayback 组件的实例从“组件”面板拖到舞台上。
2. 保存该文件。
3. 选择该 FLVPlayback 实例, 然后从“窗口”菜单打开组件检查器 (“文件” › “窗口” › “组件检查器”)。
4. 单击一次 skin 参数将其选中, 然后再单击一次打开“选择外观”对话框。
5. 向下滚动“外观”弹出式菜单中的选项列表, 找到保存您的外观所使用的名称。从现在起, 您即可像使用默认外观那样使用该外观。

要加载不是默认显示在“选择外观”对话框中的外观 SWF 文件, 您可以使用“自定义外观 URL”选项。如果要浏览查找位于公司服务器上的 SWF 文件, 或为方便起见要将文件保存在您的桌面上, 这样做非常有用:

1. 从 FLVPlayback 参数再次打开“选择外观”对话框。

2. 向下滚动到“外观”弹出式菜单中的最后一个选项: 自定义外观 URL (见图 8)。

   

   图 8. 这是带有 URL 文本框的“选择外观”对话框更新的视图, 该文本框可接受指向自定义 SWF 文件的路径。

3. 在 URL 文本框中输入路径, 然后单击“确定”。该路径应为包含 .swf 扩展名的外观 SWF 文件名。

至此, 您应看到 SWF 文件出现在组件的“实时预览”中, 并且会在导出后显示在影片中。

利用 ActionScript 加载自定义外观

您可以完全绕过组件检查器参数, 使用 ActionScript 将外观 SWF 文件指定到组件。这对在运行时进行初始化的动态应用尤其有用。

要使用 ActionScript 将外观 SWF 文件指定到组件, 请执行以下操作:

1. 在 Flash Professional 8 中创建一个 FLA 文件, 然后将 FLVPlayback 组件的实例从“组件”面板拖到舞台上。
2. 保存该文件, 然后导出 SWF 文件。
3. 创建您要使用的外观 SWF 文件的副本, 然后将其放置在刚才保存的文件旁边。
4. 返回到包含视频组件的 FLA 文件中, 选择 FLVPlayback 实例, 然后为该实例命名 (例如 flvPlayback)。
5. 给时间轴添加一个新图层, 并将其命名为 actions。选择此 actions 图层, 然后打开“动作”面板, 添加一段代码。

6. 编写以下代码, 将 flvPlayback 替换为要使用的实例名, 并将路径替换为要尝试加载的外观 SWF 文件的正确名称。指向 SWF 文件的路径可以是相对 URL 或绝对 URL:

   // 使用 ActionScript 为我的 FLVPlayback 实例指定一个新外观
   flvPlayback.skin = "myCustomSkin.swf";
   

7. 导出 SWF 文件, 以查看更新。请注意, 在进入运行时之前, SWF 文件中不能显示 ActionScript 设置。

外观 SWF 剖析

如果您对从头开始构建外观 SWF 文件感兴趣, 则应学会分析此文件的预期布局。Flash“帮助”文档中的以下部分概括介绍了有关文件结构的一些要点:

“组件语言参考” › “FLVPlayback 组件” › “自定义 FLVPlayback 组件” › “单独设置自定义 FLVPlayback UI 组件的外观”

如何继续学习

本文所述的三种外观设置方法为您自定义 FLVPlayback 组件和控件的外观及风格提供了多种选择。请花一些时间试验并浏览 Flash Professional 8 附带的预置外观文件。FLVPlayback 组件还包含扩展的 ActionScript API, 使您能够充分控制视频播放器的状态及性能。有关详细信息, 请参阅 Flash“帮助”文档 (“Flash 帮助” › “组件语音参考” › “FLVPlayback 组件” › “mx.video.FLVPlayback 类”)。

关于作者