单独设置 FLV 播放自定义用户界面组件的外观

FLV 播放自定义用户界面组件允许您在 FLA 文件内自定义 FLVPlayback 控件的外观,并且允许您在预览网页时看到结果。但是,根据设计,这些组件无法缩放。您应该编辑影片剪辑及其内容,使其具有特定大小。因此,通常最好使 FLVPlayback 组件按所需大小显示在舞台上,并将 scaleMode 设置为 exactFit

若要开始,只需将所需 FLV 播放自定义用户界面组件从“组件”面板中拖出,将它们放置于舞台上的适当位置,并为它们指定实例名称。

这些组件可以不通过任何 ActionScript 而发挥作用。如果将这些组件放在与 FLVPlayback 组件相同的时间轴和帧上并且尚未设置 FLVPlayback 组件的外观,则 FLVPlayback 组件将自动与这些组件相连接。如果舞台上有多个 FLVPlayback 组件,或者自定义控件和 FLVPlayback 不在同一时间轴上,则需要 ActionScript。

当组件位于舞台上后,即可像对待任何其他元件一样编辑它们。在打开这些组件后,可以看到各个组件之间在设置上都存在微小差异。

Button 组件

Button 组件具有类似的结构。按钮包括 BackButton、ForwardButton、MuteButton、PauseButton、PlayButton、PlayPauseButton 和 StopButton。大多数按钮都在第 1 帧上具有实例名称为 placeholder_mc 的单个影片剪辑。这通常是用于按钮的正常状态的实例,但不是必须要具有它。在第 2 帧的舞台上有四个影片剪辑,分别针对以下显示状态:正常、指针经过、按下和禁用。(在运行时,组件实际上永远不会转到第 2 帧;这些影片剪辑放置于此处是为了使编辑更方便,并且强制它们加载到 SWF 文件中,而不必在“元件属性”对话框内选中“在第一帧导出”复选框。不过,您仍然必须选择“为 ActionScript 导出”选项。)

若要设置按钮的外观,只需编辑上述各影片剪辑即可。您可以更改其大小及外观。

某些 ActionScript 通常在第 1 帧中出现。您应该不需要更改此脚本。它只停止第 1 帧上的播放头,并且指定哪些影片剪辑将用于哪些状态。

PlayPauseButton、MuteButton、FullScreenButton 和 CaptionButton 按钮

PlayPauseButton、MuteButton、FullScreenButton 和 CaptionButton 按钮在设置上与其他按钮不同;它们只具有带两个图层且没有脚本的一个帧。在该帧上,有两个按钮,彼此叠放 -- 对于 PlayPauseButton,这两个按钮是 Play 和 Pause 按钮;对于 MuteButton,这两个按钮是 Mute-on 和 Mute-off 按钮;对于 FullScreenButton,这两个按钮是 full-screen-on 和 full-screen-off 按钮;对于 CaptionButton,这两个按钮是 caption-on 和 caption-off 按钮。若要设置这些按钮的外观,请按 单独设置 FLV 播放自定义用户界面组件的外观 中所述,设置这两个内部按钮的外观;不需要任何其他操作。

CaptionButton 是针对 FLVPlaybackCaptioning 组件的,必须将其附加到该组件,而非附加到 FLVPlayback 组件。

BackButton 和 ForwardButton 按钮

BackButton 和 ForwardButton 按钮在设置上也与其他按钮不同。在第 2 帧上,它们具有额外的影片剪辑,您可以将它们作为帧使用,并环绕这两个按钮或其中一个按钮。这些影片剪辑不是必需的,并且没有特殊功能;只是出于方便目的才提供它们。若要使用它们,只需将它们从“库”面板拖到舞台上,然后将它们放置于所需位置。如果不需要这些按钮,可以不使用它们,也可以将它们从“库”面板中删除。

提供的大多数按钮都基于影片剪辑的公共集,以便您可以一次更改所有按钮的外观。您可以使用此功能,或者可以替换这些公共剪辑,并使每个按钮在外观上不同。

BufferingBar 组件

缓冲栏组件十分简单:它由一个动画组成,该动画在组件进入缓冲状态时出现,并且它不需要任何特定的 ActionScript 对其进行配置。默认情况下,它是一个从左向右移动的有斑纹的条,在该条上有一个矩形遮罩,使其呈现“理发店招牌”效果,但对于此配置没有什么特殊设置。

尽管外观 SWF 文件中的缓冲栏使用 9 切片缩放(因为它们需要在运行时缩放),但 BufferingBar FLV 自定义用户界面组件没有并且 不能 使用 9 切片缩放,因为它嵌套了影片剪辑。如果您想使 BufferingBar 更宽或更高,则可能需要更改其内容,而不是对其进行缩放。

SeekBar 和 VolumeBar 组件

SeekBar 和 VolumeBar 组件十分相似,尽管它们在功能上不同。它们都具有手柄,都使用相同的手柄跟踪机制,并且都支持在其中嵌套剪辑以跟踪进度和完成程度。

在许多地方,FLVPlayback 组件中的 ActionScript 代码都假定 SeekBar 或 VolumeBar 组件的注册点(也称为 原点 零点 )位于内容的左上角,因此,维持这一惯例十分重要。否则,手柄以及进度和完成程度影片剪辑可能会有问题。

尽管外观 SWF 文件中的搜索栏使用 9 切片缩放(因为它们需要在运行时缩放),但 SeekBar FLV 自定义用户界面组件没有并且 不能 使用 9 切片缩放,因为它嵌套了影片剪辑。如果您想使 SeekBar 更宽或更高,则可能需要更改其内容,而不是缩放其大小。

手柄

手柄影片剪辑的一个实例位于第 2 帧。与 BackButton 和 ForwardButton 组件一样,该组件实际上永远不会转到第 2 帧;这些影片剪辑放置于此是为了使编辑更方便,并且以这种方式强制它们加载到 SWF 文件中,而不必在“元件属性”对话框中选中“在第一帧导出”复选框。不过,您仍然必须选择“为 ActionScript 导出”选项。

您可能会注意到,手柄影片剪辑在背景中有一个 Alpha 设置为 0 的矩形。此矩形增加了该手柄的点击区域的大小,这样,不必更改手柄外观就可以更容易地控制手柄,这与按钮的点击状态类似。因为该手柄是在运行时动态创建的,所以它必须是一个影片剪辑,而不是一个按钮。对于任何其他原因,Alpha 设置为 0 的这一矩形都不是必需的;通常,您可以用所需任何图像替代手柄内的内容。不过,如果将注册点保持在手柄影片剪辑的中部水平居中,则它的使用效果最好。

以下 ActionScript 代码位于 SeekBar 组件的第 1 帧上,用于管理手柄:

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

由于第 2 帧的内容,对 stop() 函数的调用是必需的。

第二行指定哪个元件要用作手柄;并且,如果您只编辑第 2 帧上的手柄影片剪辑实例,则应该无需对此进行更改。在运行时,FLVPlayback 组件将舞台上指定的影片剪辑的实例作为 Bar 组件实例的同级创建,也就是说它们具有相同的父影片剪辑。因此,如果您的栏位于根级别,则手柄也必须位于根级别。

变量 handleLeftMargin 确定手柄的原始位置 (0%),而变量 handleRightMargin 确定在结束时它所处的位置 (100%)。这两个数值提供与栏控件左端和右端的偏移量,正数值标记栏内部的限制,负数值标记栏外部的限制。这两个偏移量根据其注册点指定手柄可以转到的位置。如果您将注册点放置于手柄的中间,则该手柄的最左侧和最右侧将越过边界。为了正常使用,搜索栏影片剪辑必须将其注册点放置于其内容的左上角。

变量 handleY 确定该手柄相对于栏实例的 y 位置。这基于每个影片剪辑的注册点。范例手柄的注册点位于三角形的尖端,以便相对于可见部分放置它,而不考虑不可见的点击状态矩形。此外,为了正常使用,栏影片剪辑必须将其注册点保持在其内容的左上角。

因此,以这些限制为例,如果在 (100, 100) 位置设置了某个栏控件,并且其宽度为 100 个像素,则手柄在水平方向上的范围可从 102 到 198,并且在垂直方向上保持 111。如果您将 handleLeftMargin handleRightMargin 更改为 -2,并将 handleY 更改为 -11,则手柄在水平方向上的范围可从 98 到 202,并且在垂直方向上保持 89。

进度和完成程度影片剪辑

SeekBar 组件具有 进度 影片剪辑,VolumeBar 具有 完成程度 影片剪辑。但在实践中,任何 SeekBar 或 VolumeBar 都可以不具有或者同时具有这两个影片剪辑,或者具有其中一个影片剪辑。它们在结构上相同,并在行为上类似,但跟踪不同的值。进度影片剪辑随着 FLV 文件下载而填充(这仅适用于 HTTP 下载,因为如果从 FMS 进行流式加载,它始终是满的),而完成程度影片剪辑随着手柄从左向右移动而填充。

FLVPlayback 组件通过查找特定的实例名称找到这些影片剪辑实例,因此,您的进度影片剪辑实例必须使栏影片剪辑作为其父级,并且具有实例名称 progress_mc。完成程度影片剪辑实例必须具有实例名称 fullness_mc。

您在设置进度和完成程度影片剪辑时,在其内部嵌套 fill_mc 影片剪辑实例与否均可。VolumeBar fullness_mc 影片剪辑 使用 fill_mc 影片剪辑显示该方法,SeekBar progress_mc 影片剪辑则 不使用 fill_mc 影片剪辑而显示该方法。

如果您想要进行的填充不通过扭曲外观无法缩放,则在内部嵌套了 fill_mc 影片剪辑的方法十分有用。

在 VolumeBar fullness_mc 影片剪辑中,嵌套的 fill_mc 影片剪辑实例被遮罩。您可以在创建影片剪辑时遮罩它,也可以在运行时动态地创建遮罩。如果您用影片剪辑遮罩它,则将该实例命名为 mask_mc 并对它进行设置,以便 fill_mc 显示为就像百分比为 100% 时一样。如果您不遮罩 fill_mc,则动态创建的遮罩将是矩形,并且在 100% 时与 fill_mc 的大小相同。

fill_mc 影片剪辑通过两种方法之一与遮罩一起显示,具体方法取决于 fill_mc.slideReveal 是 true 还是 false

如果 fill_mc.slideReveal 是 true ,则 fill_mc 从左向右移动,以通过遮罩显示它。为 0% 时,它自始至终向左,因此不会有任何部分通过遮罩显示。随着百分比的增加,它向右移动,直到达到 100%,此时它位于舞台上的创建位置之后。

如果 fill_mc.slideReveal 是 false 或未定义(默认行为),则遮罩将从左向右调整大小,以显示 fill_mc 的更多部分。在它达到 0% 时,遮罩就在水平方向上缩放到 05,并且随着百分比的增加, scaleX 也将增加,直到达到 100%,这时它将显示所有 fill_mc。 scaleX = 100 并不是必需的,因为在创建 mask_mc 时可能已对它进行了缩放。

没有 fill_mc 的方法比具有 fill_mc 的方法更简单,但它水平扭曲填充。如果不需要进行该扭曲,则必须使用 fill_mc。SeekBar progress_mc 阐释了这一方法。

进度或完成程度影片剪辑根据百分比进行水平缩放。为 0% 时,实例的 scaleX 被设置为 0,这使其不可见。随着该百分比增加,将对 scaleX 进行调整,直到达到 100%,此时该影片剪辑的大小将与创建它时在舞台上的大小相同。同样, scaleX = 100 并不是必需的,因为在创建该影片剪辑实例时可能已对它进行了缩放。

连接您的 FLV 播放自定义用户界面组件

如果将自定义用户界面组件放在与 FLVPlayback 组件相同的时间轴和帧上并且尚未设置 skin 属性,则 FLVPlayback 将不需要任何 ActionScript 而自动与这些组件相连接。

如果舞台上有多个 FLVPlayback 组件,或者自定义控件和 FLVPlayback 不在同一时间轴上,则必须通过编写 ActionScript 代码将自定义用户界面组件连接至 FLVPlayback 组件实例。首先,必须向 FLVPlayback 实例分配一个名称,然后使用 ActionScript 将您的 FLV 播放自定义用户界面组件实例分配给相应的 FLVPlayback 属性。在以下示例中,FLVPlayback 实例是 my_FLVPlybk,FLVPlayback 属性名称后跟有句点 (.),并且 FLV 播放自定义用户界面控件实例位于等号 (=) 的右侧:

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar; 

以下几个步骤创建自定义的 StopButton、PlayPauseButton、MuteButton 和 SeekBar 控件:

  1. 将一个 FLVPlayback 组件拖到舞台上,并为其指定实例名称 my_FLVPlybk

  2. 通过“组件”检查器将 source 参数设置为 http://www.helpexamples.com/flash/video/cuepoints.flv

  3. 将 Skin 参数设置为“无”。

  4. 将 StopButton、PlayPauseButton 和 MuteButton 拖到舞台上,然后将它们放置于 FLVPlayback 实例上,并垂直堆叠在左侧。在“属性”检查器中为每个按钮提供一个实例名称(如 my_stopbttn my_plypausbttn my_mutebttn )。

  5. 在“库”面板中,打开 FLVPlayback Skins 文件夹,然后打开该文件夹下面的 SquareButton 文件夹。

  6. 选择 SquareBgDown 影片剪辑,并且双击它以在舞台上打开它。

  7. 右键单击 (Windows) 或者按住 Ctrl 单击 (Macintosh),然后从菜单中选择“全选”,并删除该元件。

  8. 选择椭圆工具,在相同位置上绘制一个椭圆,然后将填充设置为蓝色 ( #0033FF )。

  9. 在“属性”检查器中,将宽度 (W:) 设置为 40 并将高度 (H:) 设置为 20 。将 x 坐标 (X:) 设置为 0.0 并将 y 坐标 (Y:) 设置为 0.0

  10. 对 SquareBgNormal 重复第 6 步到第 8 步,但将填充更改为黄色 ( #FFFF00 )。

  11. 对 SquareBgOver 重复第 6 步到第 8 步,但将填充更改为绿色 ( #006600 )。

  12. 编辑按钮内不同元件图标(PauseIcon、PlayIcon、MuteOnIcon、MuteOffIcon 和 StopIcon)的影片剪辑。您可以在 FLV Playback Skins/ Label Button/Assets 下的“库”面板中找到这些影片剪辑,其中 Label 是按钮的名称,如“播放”、“暂停”等。为每个按钮执行以下步骤:

    1. 选择“全选”选项。

    2. 将颜色更改为红色 ( #FF0000 )。

    3. 缩放到 300%。

    4. 将内容的 X: 位置更改为 7.0 ,以便更改图标在每个按钮状态中的水平位置。

      注: 通过用此方法更改该位置,您可以避免打开每个按钮状态和移动图标影片剪辑实例。
  13. 单击时间轴上的蓝色“返回”箭头以返回到第 1 场景的第 1 帧。

  14. 将一个 SeekBar 组件拖到该舞台上,并且将其放置在 FLVPlayback 实例的右下角。

  15. 在“库”面板中,双击 SeekBar 以在舞台上打开它。

  16. 将其缩放到 400%。

  17. 选择轮廓,并且将颜色设置为红色 ( #FF0000 )。

  18. 双击 FLVPlayback Skins/Seek Bar 文件夹中的 SeekBarProgress,并且将颜色设置为黄色 ( #FFFF00 )。

  19. 双击 FLVPlayback Skins/Seek Bar 文件夹中的 SeekBarHandle,并且将颜色设置为红色 ( #FF0000 )。

  20. 单击时间轴上的蓝色“返回”箭头以返回到第 1 场景的第 1 帧。

  21. 选择舞台上的 SeekBar 实例,并为其指定实例名称 my_seekbar

  22. 在时间轴第 1 帧的“动作”面板上,为 video 类添加一条 import 语句,并且将按钮和搜索栏名称分配给相应的 FLVPlayback 属性,如下例所示:

    import fl.video.*; 
    my_FLVPlybk.stopButton = my_stopbttn; 
    my_FLVPlybk.playPauseButton = my_plypausbttn; 
    my_FLVPlybk.muteButton = my_mutebttn; 
    my_FLVPlybk.seekBar = my_seekbar;
  23. 同时按下 Ctrl+Enter 以测试该影片。