在Flex项目中使用Flash媒体组件播放视频

作者：Serge Jespers

 

    我经常听说人们在研究Flex时总会忽略Flash媒体组件。为什么不在Flex项目中使用您喜爱的组件呢？专门针对Flash CS3的Flex Component Kit已经出现了一段时间，如果安装了与Flash有关的所有最新更新，您会发现，它现在甚至还可以默认作为Flash CS3编写环境的一部分。我认为人们低估了这个特性，还没有真正领略到它的强大功能。因此，我觉得有必要撰写一篇简短的教程，介绍如何在Flash CS3中使用Flex组件，以及在这种情况下，如何在Flex项目内部使用Flash媒体组件。

    因此我们将创建一个Flex组件来托管FLVPlayback组件，并编写少量ActionScript代码来驱动组件在Flex中工作。

   

要求

Flex Builder 3

• 试用
• 购买

Flex Component Kit for Flash CS3

• 下载

示例文件：

• 视频flex.zip (ZIP, 686K)

首先，需要检查您的Flash CS3编写环境是否是最新的。如果是，您的命令菜单应该类似图 1 所示：

 

                                  

                                                        

                            图 1. 命令菜单

 

如果命令菜单与上图不同，那么单击Help菜单中的“Updates…”选项，获取所有最新更新。

创建一个新的Flash文档，并将“FLVPlayback”组件从组件面板拖拽到操作区（参见图2）。

                  

                                                          图 2. “FLVPlayback”组件

 

确保为该组件指定实例名。我将其称为“MyPlayer”（参见图3）。

 

                   

            

                               图 3. 组件的实例名

 

接下来，从这个FLVPlayback组件生成一个影片剪辑（movieclip）。我将其称为“MyVideoPlayer”（参见图4）。

              

                                图 4. 从FLVPlayback组件生成一个影片剪辑。

 

完成以上操作后，双击MyVideoPlayer影片剪辑。创建一个新层并绘制一个矩形，大小与FLVPlayback组件相同。将其转换为一个影片剪辑并将实例名指定为“boundingBox”。当在Flex中使用您的组件时，将不会显示这个影片剪辑。Flex将使用这个“boundingBox”影片剪辑判断组件的实际大小。

默认情况下，FLVPlayback组件将显示一种播放器皮肤。如果您的FLVPlayback组件没有预览播放器皮肤，您可以在参数面板中选择希望使用的皮肤。在我的示例中，我将选择SkinOverAllNoFullNoCaption作为我的播放器皮肤（参见图5）。

 

             

                        

                            图 5. 在参数面板中选择希望使用的皮肤

 

    同时，检查autoPlay参数和skinAutoHide参数是否设置为“true”。
当然，您还可以使用自己的播放器皮肤，甚至使用不同的按钮组件。但是在本例中，为了演示方便我将尽量保持简单。接下来将添加一些ActionScript代码以控制大小并设置源文件。此时最好保存FLA文件。保存文件之后，创建一个新的ActionScript文件（File > New… > ActionScript File）。您实际上将为MyVideoPlayer MovieClip创建一个ActionScript类。遗憾的是，Flash CS3没有提供自动创建类结构的选项，因此需要手动创建。

 

首先复制并粘贴下面的代码片段：

package {
                  

        import mx.flash.UIMovieClip;
                  

        import flash.display.MovieClip;
                  

        public dynamic class MyVideoPlayer extends UIMovieClip {
                  

               public function MyVideoPlayer() {
                  

                       super();
                  

               }
                  

        }
                  

}
                  

然后将ActionScript文件保存在和FLA相同的文件夹中并命名为“MyVideoPlayer.as”。现在返回FLA并右键单击Library面板中的MyVideoPlayer影片剪辑，选择“Linkage”。您实际上将把刚刚创建的类文件链接到这个影片剪辑中（参见图6）。

 

                             

 

                      图 6. 将ActionScript类文件链接到影片剪辑。

 

 

当勾选“Export for ActionScript”框时，窗口将自动显示为以下内容（参见图7）：

 

         

 

                           图 7. Linkage Properties 窗口

 

要检验是否正确地保存和命名了所有内容，单击“Edit class definition”图标 ：

这将把您带回到ActionScript类。如果不是这样，则需要检查名称是否正确，以及是否将ActionScript文件保存到与FLA文件相同的文件夹中。最后不要忘记单击“OK”保存链接设置。

现在再一次查看Class结构。可以看到，我们将扩展UIMovieClip类。该类包含一个普通Flex组件所具有的所有方法。这意味着我可以像任何其他Flex组件一样自动使用getters和setters方法。因此我将创建的第一个函数是一个setter函数，它将指定视频源文件url。

 

public function set source(MyVid:String):void{
                        

        MyPlayer.play(MyVid);
                        

}
                        

这很简单。只需告诉影片剪辑内的FLVPlayback组件播放我传递给它的视频文件。我还希望能够根据自己的需要调整组件的大小。您可以使用标准的宽度和高setter，但是我不准备这样做。实际上，我将覆盖这些setter，以便设置FLVPlayback组件的宽度和高度，而不是设置整个组件。如果不这样做的话，我的播放器的皮肤会变形并拉长。因此添加下面这些代码：

override public function set width(w:Number):void{
                        

        MyPlayer.width = w;
                        

}
                        

override public function set height(h:Number):void{
                        

        MyPlayer.height = h;
                        

}
                        

您的类文件应该如下所示：

package {
                        

        import mx.flash.UIMovieClip;
                        

        import flash.display.MovieClip;
                        

        public dynamic class MyVideoPlayer extends UIMovieClip {
                        

               public function MyVideoPlayer() {
                        

                       super();
                        

               }
                        

               public function set source(MyVid:String):void{
                        

                       MyPlayer.play(MyVid);
                        

               }
                        

               override public function set width(w:Number):void{
                        

                       MyPlayer.width = w;
                        

               }
                        

               override public function set height(h:Number):void{
                        

                       MyPlayer.height = h;
                        

               }
                        

        }
                        

}
                        

现在我们可以开始“制作”我们的Flex组件了。在library窗口中选择MyVideoPlayer影片剪辑，然后在Command菜单中选择“Convert Symbol to Flex Component”命令。Flash将提供一个小的弹出窗口，指出您的帧率与Flex使用的默认帧率不匹配（参见图8）。

 

            

 

                                图 8. 帧率弹出窗口

 

 

继续并单击“OK”。在Output窗口中，Flash将要求您发布文件：

选择File > Publish，创建在Flex中使用的SWC文件。
                             

显然，这是我们接下来要做的工作。

完成上述操作后，Flash将为您创建两个文件（参见图9）：

             

                         

 

                          图 9. Flash为您创建的文件

 

SWC文件是我们将在Flex中使用的文件。打开Flex Builder 3并创建一个新项目。首先需要向Flex库添加我们的组件，使它知道该组件可以使用。在Flex Builder 3中，添加组件非常简单，将SWC文件复制到项目的libs文件夹即可。您甚至可以直接从Finder或Explorer窗口拖拽文件。

完成上述操作后，还需要添加正在使用的播放器皮肤。这涉及到src文件夹。因此将“SkinOverAllNoFullNoCaption.swf”拖拽到Flex项目的src文件夹。您的项目文件夹现在应该类似如下所示（参见图10）：

                        

 

                              图 10. 项目文件夹结构

 

 

 

 

 

 

 

 

 

 

 

 

 

现在打开项目的主MXML文件。在我的示例中，它的名字为“FlashFlexMarriage.mxml”。如果您的Flex Builder处于Design视图，那么请切换到Code视图。当开始输入“MyVideoPlayer”时，将会发现Flex Builder已经觉察到您的组件并提供代码完成功能。按下Enter键后，“local”名称空间将被添加到应用程序描述符，并且将添加您的组件。现在您可以添加FLV的源代码了。

<local:MyVideoPlayer source="http://www.helpexamples.com/flash/video/lights_short.flv"/>
                          

继续并运行这个项目。您的视频应该会立即播放。

我想最好将视频变得更大一些，因为我们添加了宽度和高度setter，因此在放大时不会影响播放器的皮肤。

<local:MyVideoPlayer source="http://www.helpexamples.com/flash/video/lights_short.flv"
                          

        width="640" height="480" x="0" y="0" />
                          

再次运行，您将看到播放器皮肤仍然保持相同的比例。

结束语

您现在已经成功地在Flash中创建了一个Flex组件。显然，这仅仅是一个示例，您完全可以实现更多功能，但是，这个示例展示了将Flash和Flex结合在一起的威力。