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

如果您进入每个组件的影片剪辑, 就会注意到它们均通过略微不同的方式进行了设置。有关每个组件类型的完整详细信息, 请参阅 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 设置。