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:

[ftf w=”550″ h=”200″]package {

import fl.video.FLVPlayback;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import mx.flash.UIMovieClip;

public class Player extends UIMovieClip
{
private var _file:String;
public var flvPlayer:FLVPlayback;

public function Player() {
}

public function get file():String
{
return this._file;
}

public function set file(f:String):void
{
if(f != “” && f != null)
{
this._file = f;
flvPlayer.source = this._file;
}
}
}
}[/ftf]

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:

[ftf w=”550″ h=”200″]
width=”100%” height=”100%”
layout=”vertical” xmlns:local=”*”
creationComplete=”init()”/>


5 Comentarios

  1. Joan Garnet

    La verdad es que al video player de Flex le falta por lo menos un par de horas de cocción para que se pueda sacar del horno… Básicamente es materia prima… pero teniendo esto para qué complicarse la vida?
    Gracias por el tip 😉

  2. Ernesto Pino Martínez

    Muy buena exposición.
    Gracias a Delógica y a Adobe por ponernos al tanto de como se está moviendo el mundo del desarrollo de RIAs y las vinculación de diferentes tecnologías con la plataforma Flex y AIR.

  3. demian

    me parece extraño que adobe ahora q es open source no lance un gigantesco paquete de componentes para hacerle fuerza a silverlight (realmente silverlight es bueno, pero si flex tiene un buen paquete de componentes no tiene comparacion). digo, ya que la complejidad de hacer un sdk, no es comparable con hacer unos 15 componentes mas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase