Existen diversos métodos para incluir vídeo en los documentos de Flash: vídeo incorporado (recomendable sólo para vídeos de tamaño reducido y muy poca duración), vídeo en formato QuickTime (como archivo vinculado), vídeo en formato FLV utilizando Componente FLVPlayback, o se puede también trabajar con vídeos FLV utilizando sólo programación de scripts con ActionScript. En este tema veremos ejemplos de estos dos últimos métodos.
Importar vídeo en formato FLV utilizando Componente FLVPlayback
1. Crear un nuevo documento de Flash y guardarlo en una carpeta que contendrá también los vídeos FLV.
2. Importar el vídeo Archivo (File) / Importar / Importar Vídeo. Se abrirá la ventana Importar video (Video Import Wizard). A través de una serie de pantallas se realiza el proceso de codificación para la importación, empezado desde la localización del vídeo: ruta de archivo (elegir). En la siguiente ventana hay que elegir el tipo de descarga que hará el vídeo desde el servidor: 1. Descarga progresiva desde el servidor, 2. Flujo de Flash vídeo desde Streaming Service (cuando se tiene alojado el vídeo en un proveedor cuyo servidor tiene Flash Comunication Server), 3. Flujo de Flash Communication Server (Cuando tienes instalado en tu servidor el Flash Media Server). Incorporar vídeo en swf y reproducir en la línea de tiempo (el vídeo está embebido en el archivo de flash y no va por streaming, el archivo pesa demasiado y la sincronización audio-vídeo se pierde). En nuestro caso utilizaremos la 1º opción.
Un vídeo en streaming funcina como pequeños paquetes de información que va recibiendo el Player de Flash cuando los necesita. Dependiendo de la opción de streaming elegida, el vídeo esperará uno o dos segundos hasta que tenga los paquetes suficientes para ir reproduciéndolos -descarga progresiva- o con la llegada del primer paquete se iniciará la visualización -Flash Media Server. La clave para una visualización adecuada es el valor del flujo de datos (data rate) la velocidad con que los paquetes fluyen en el Player de Flash. El segundo factor es almacenar suficientes paquetes antes de que el vídeo comience a visulizarse. A este proceso se le denomina buffering.
3. La siguiente ventana es el perfil de codificación, primero según el tipo de player de flash que necesitará (player 7 o 8), y después, activando configuración avanzada:
- Pestaña Codificación, para el tipo de codec (sorenson o On2 Vp6 –utilizaremos este último) y si necesita o no codificar un canal alpha (solo si el vídeo va a tener zonas transparentes); la velocidad de fotogramas fps; el porcentaje de keyframes (automático o personalizado cada x frames); el nivel de calidad (está relacionado con el perfil que hemos asignado al principio o podemos personalizarlo ahora y el tamaño del vídeo (es importante asignarle el tamaño final que va a tener en la aplicación).
Respecto a la velocidad de fotogramas y el intervalo de fotogramas clave, estos valores dependen de las características del vídeo, si existe mucho movimiento en la imagen, es decir, si los píxeles que componen cada uno de los frames cambian mucho de frame a frame, en un vídeo con cámara fija frente a una persona que habla sin moverse sobre un fondo estático y sin ruido en la señal, existe muy poco movimiento y requiere un intervalo de fotogramas clave alto pues tendrá un flujo de datos bajo. Si hay mucha variación de un frame a otro requiere un intervalo bajo porque tendrá un flujo muy alto de datos. Como guía se establecen las siguientes tablas:
- Pestaña Puntos de referencia (CuePoints). Al situar el lector del vídeo en determinados tiempos podemos incorporar información de puntos de referencia que servirán para la programación, clicando el signo + añadimos los cuePoints. En el tema 6.3.3. Interactividad entre vídeos utilizando cuePoints, Botones y Clips de Película, se detalla este punto.
- Pestaña Recortar y Ajustar, podemos hacer un crop (recorte) a la imagen del vídeo.
4. En la siguiente ventana Aplicación de Aspectos, se puede elegir si el visualizador del vídeo llevará o no controles y de qué tipo (en nuestro caso normalmente no llevará controles. Aspecto: ninguno) y finalizar.
Asegurarse que el archivo de vídeo FLV está en la misma carpeta que el archivo de flash, y que es la ruta que aparece en los parámetros del FLVplayback
Si se ha exportado el archivo de vídeo a flv con otra aplicación, igualmente se puede importar el vídeo, en ese caso no aparece la ventana explicada en el punto 3. Pero también puede utilizarse el vídeo sin importarlo. Para ello utilizaríamos el componente FLV Playback: abrir la ventana de componentes (si no está abierta) desplegar FLV Playback-player 8 clickar FLVPlayback y arrastrarlo al escenario, mantenerlo seleccionado y en la ventana Parámetros asignar la ruta del archivo FLV, recordar que es importante que esté en la misma carpeta que el archivo de Flash.
En esta misma ventana de Parámetros aparece un item llamado bufferTime, su valor está relacionado con el proceso denominado Buffering, explicado al final del punto 2. El valor introducido, medido en segundos y décimas de segundo, determina la cantidad de vídeo almacenado antes de ser reproducido. Por defecto es una décima de segundo. Esto quiere decir que, si el vídeo va a 24 fps, tres frames de vídeo, representan aproximadamente una décima de segundo de reproducción, que siempre habrán sido descargados previamente en buffer. Cuando un frame es liberado del buffer durante la visualización, el que va detrás, como haciendo cola, lo sustituye.
No hay ninguna regla absoluta en cuanto al bufferTime. Cambiar ese valor solo puede suponer una pequeña ventaja si el vídeo alojado en el servidor web es de descarga progresiva. En este caso, el Player de Flash irá recogiendo los datos del buffering en función del valor asignado, pero si la llegada de paquetes de información al buffer se ve limitada por la capacidad de trasmisión del servidor, el valor introducido en ese parámetro será ignorado. Si se utiliza un servidor del tipo Flash Communication Server o Flash Media Server, es común asignarle un valor entre una décima y medio de segundo para el buffer.
Por último, para poder utilizar el vídeo en programación hay que asignarle un nombre de instancia, es IMPORTANTE no olvidarlo. Para ello, seleccionar el componente FLVPlayback y en la ventana de Propiedades escribir el nombre por el que se le reconocerá, en el ejemplo de la imagen de abajo, la instancia es vid1. En esta ventana también se ve su tamaño y posición en el escenario.
Importar vídeos con ActionScript
La utilización del componente FLVPlayback es un recurso cómodo, pero incrementa el peso del archivo publicado de flash, el archivo .swf de la publicación del ejemplo anterior con un componente FLVPlayback pesa 36 KB, mientras que si se realiza por programación sólo pesa 4KB y el resultado es el mismo. Para realizarlo por programación debemos tener ya codificado un archivo de vídeo FLV (en el ejemplo se llama bomba.flv). En Flash seguiremos los siguientes pasos:
- Crear un nuevo documento de Flash y guardarlo en la misma carpeta en la que tengamos el archivo de vídeo FLV que se va a reproducir
- En el panel Biblioteca (Ventana > Biblioteca), seleccionar Nuevo Vídeo en el menú emergente Biblioteca.
- En el cuadro de diálogo Propiedades de vídeo, asignar un nombre al símbolo de vídeo (utilizaremos video1) y seleccionar Vídeo (controlado por ActionScript).
- Hacer clic en Aceptar para crear el objeto de vídeo.
- Arrastrar el objeto de vídeo desde el panel Biblioteca hasta el escenario para crear una instancia del mismo.
- Con el objeto de vídeo seleccionado en el escenario, introducir un nombre en el cuadro de texto Nombre de instancia (utilizaremos vid1) del inspector de propiedades (Ventana > Propiedades > Propiedades).
- Seleccionar el fotograma 1 en la línea de tiempo y abrir el panel Acciones (Ventana > Acciones).
- Introduzcir el código siguiente en el panel Acciones:
var nc:NetConnection =new NetConnection(); //Crea un objeto de conexión y le da el nombre nc
nc.connect(null); // usa el método connect para establecer la conexión,
//el parámetro null conecta con un servidor web o con el disco del ordenador en local
var ns:NetStream = new NetStream(nc);
//se crea un nuevo objeto NetStream utilizando el objeto nc de NetConnection de la línea anterior
Con la conexión hecha y el stream establecido, ya se puede alimentar el flujo de datos del vídeo en el objeto vídeo llamado vid1 que hemos puesto en el escenario.
vid1.attachVideo(ns);
ns.play("bomba.flv");
Descargar los archivos de los dos ejemplos AQUÍ
-----------------
Para más información sobre vídeo en flash: http://www.adobe.com/es/devnet/flash/video.html
Podeís ver el Tutorial rápido de Flash Video FLV para Flash 2004Mx en castellano en CRISTALAB