Flex Component Kit: FLVPlayback desde Flex

Últimamente vemos, cada vez más, como el video se va introduciendo en la mayoría de los sites, llegando incluso a usarse como elemento principal del site: YouTube, Tele5 entre otras.

Flex nos aporta un componente de video para ello (VideoDisplay), pero quien lo haya utilzado, sabe que prácticamente no aporta nada. Por no traer, no trae ni la barra de progreso.

Gracias al Flex Component Kit for Flash CS3, ahora podemos utilizar el componente de video de Flash o FLVPlayback, dentro de nuestra aplicación Flex sin mucho esfuerzo.

Xavi y Carlos centraron su charla del Max en la interacción de las diferentes tecnologías de Adobe; así que vamos a poner un ejemplo práctico de esa integración: la utilización del FLVPlayback dentro de Flex.

En primer lugar es necesario descargarse el Flex Component kit

Una vez instalado y estando ya en Flash IDE, creamos un movieClip vacío,le llamamos player ,y dentro de él arrastramos el componente FLVPlayback.

Luego creamos un movieclip en una capa superior de nuestro movieclip player ,con la misma medida del componente. A este movieclip le llamaremos boundingBox.

Esto lo hacemos para poder ver el preview del componente dentro de Flex builder (dead preview) y sobretodo para definir la medida que tendrá el player y cualquiera de sus elementos internos. Esto es importante, ya que por ejemplo, la barra de progreso del player es mucho más larga y sin el boundingBox nos aparecería un scroll desagradable dentro de nuestro layout de Flex.

Una vez creados, vamos a convertir nuestro componente en UIComponent para poder exportarlo a Flex; para ello seleccionamos nuestro movieclip player en la biblioteca y seleccionamos del menú superior Commands -> Make Flex Component.

Ahora ya tendríamos nuestro componente preparado para utilizarlo en Flex, pero necesitamos poder acceder a las propiedades de nuestro player desde Flex, es por ello que vamos a generar una clase que haga de Proxy entre Flex y nuestro componente para poder controlarlo desde Flex.
Así que nos vamos al linkage del componente (seleccionando el componente de la biblioteca y clickando botón derecho -> linkage y sustituimos la Base Class: mx.flash.UIMovieClip por Player.
Ahora creamos un nuevo archivo as y lo llamamos Player.as

Esa será la clase que conecte Flex con el componente FLVPlayback. Vamos a ello:

En primer lugar, nuestra clase tiene que extender de mx.flash.UIMovieClip para poder utilizarse en Flex. Luego generamos los métodos que necesitemos:

Ahora, ya podemos publicar la película y nos generará un archivo .swf y otro archivo .swc.
Ya podemos copiar nuestro archivo swc y pasarlo a nuestro proyecto de Flex.

Una vez vinculado o incluido dentro de la carpeta libs de nuestro proyecto Flex, simplemente necesitamos instanciarlo de la siguiente forma:

Este ejemplo se puede ampliar fácilmente creando nuevos métodos en nuestra clase Player, añadiendo una imagen anterior a la reproducción del video o añadiendo la funcionalidad fullScreen, o lanzando eventos desde el player hacia Flex,….

Bueno, en el próximo tutorial intentaremos crear un Player en as3 desde 0 para poderlo utilizar desde Flash o desde Flex indistintamente.

Descargar ficheros del ejemplo