Componente FLVPlayback

Publicado por Carla Macías
13 Junio, 2008

FlashEn esta entrada aprenderemos a usar el componente FLVPlayback que viene dentro de Flash Professional. El componente FLVPlayback nos permite cargar videos en formato FLV usando alguno de los skins que vienen predeterminados en Flash, ahorrándonos el tiempo de crear un reproductor. Veremos algunos de los eventos que soporta este componente y cómo crear una lista de videos.

Para este ejemplo usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post. Los pasos son los siguientes:

Tutorial

1. Crea un nuevo documento de Flash de 250 x 350 pixeles.

2. Ponle un color de fondo al documento, en este caso el color de fondo que usé es #26251E

3. A la única capa que existe ponle el nombre de Player. Abre el Panel de Componentes (Window -> Components ó Ctrl. + F7). En este panel hay un apartado que se llama FLVPlayback - Player 8; selecciona el componente FLVPlayback y arrástralo al escenario.

4. Selecciona el componente que acabas de arrastrar y ponle las siguientes propiedades:

- Nombre de Instancia: player
- Width (Ancho): 176.0
- Height (Alto): 120.0

5. Haz click en la pestaña de Parámetros y verifica que los valores sean los siguientes:

- autoPlay = true. Si queremos que inicie el video automáticamente (true) o si para comenzar el video el usuario deberá hacer click en el botón de play (false)
- contentPath = Ojo: Aquí debe estar vacío ya que vamos a establecer la ruta del video por medio de ActionScript. Si a ti no te interesa que sea por medio de ActionScript (ya sea, por ejemplo, que sólo quieres mostrar un video) bastará con que en este campo pongas la ruta donde se encuentra el video (Ej. videos/video_1.flv)
- skin: Aquí deberás escoger el skin que más te agrade de acuerdo a la lista que se presenta en el combobox. En mi caso seleccioné el skin MojaveExternalPlaySeekMute.swf . Observa que, una vez que hayas seleccionado el skin y hayas ejecutado el Flash (Ctrl. + Enter) se creará el archivo MojaveExternalPlaySeekMute.swf en la carpeta donde tienes tu archivo de Flash. Es muy importante que no olvides subir este archivo a tu servidor ya que los controles del reproductor no se verá (El video sí aparecerá pero no podrás pausarlo, adelantarlo, regresarle o cambiarle el volumen).
- skinAutoHide: Si pones el valor de true los controles (skin) no se verán hasta que el usuario ponga el ratón encima del video.
- volume: Aquí puedes establecer el valor del volumen del video que querrás que tenga desde un inicio.

6. Consigue unos cuatro o cinco videos en formato FLV para seguir con el tutorial. Si tienes un video muy largo (por ejemplo un concierto que está en un sólo archivo) puedes usar algún programa para convertir de video a FLV. Yo te recomiendo el programa "Allok Video to FLV Converter", el cual puedes adquirirlo de aquí. Con este software podrás seleccionar el segmento del video que quieres exportar a archivo FLV (Para este ejemplo, todos mis videos tienen una duración de dos minutos). Dentro de las bondades de este programa está el que no solo puedes generar el archivo FLV si no también puedes generar un archivo SWF con el video. Además, podrás seleccionar la resolución del video, el framerate, calidad del video, calidad del audio, etc.

7. Crea una carpeta llamada videos y guarda ahí tus videos FLV.

8. Crea dos textos dinámicos en el escenario y ponles como nombre de instancia artista_txt y cancion_txt, respectivamente.

9. Dada la cantidad de videos FLV que vas a usar para este ejercicio, crea la misma cantidad de botones. En mi ejemplo son 4 videos los que voy a usar y por lo tanto tengo cuatro botones en el escenario (estos botones nos permitirá seleccionar el número de video que queremos reproducir). A cada uno asígnale de nombre de instancia opcion1_btn, opcion2_btn y así sucesivamente.

10. Es momento de comenzar con el código. Crea una nueva capa y ponle de nombre Acciones.

Primero vamos a crear las variables que necesitaremos en nuestro código:

Texto Plano
Actionscript:
  1. /* Creamos un arreglo con el nombre de los archivos de nuestros videos. Estos nombres también puedes ponerlos en un archivo XML para que sea más fácil de actualizar */
  2. var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];
  3. /* Creamos un arreglo con el nombre que queremos que aparezca cuando se está reproduciendo un video */
  4. var canciones:Array = ["El estanque", "Fuente Esperanza", "Héroe de Leyenda", "No más lágrimas"];
  5. /* Necesitamos un contador para poder movernos y recorrer los elementos de nuestros arreglos. En este caso el valor inicial del contador es cero ya que todos los índices de un arreglo comienzan con cero */
  6. var contador:Number = 0;
  7. /* Definimos dentro esta variable el nombre de la carpeta donde estarán nuestros videos. Es bueno ponerlo en una variable aparte y no dentro del mismo nombre de los archivos (Ej. videos/video2.flv) por si en algún momento necesitamos renombrar la carpeta */
  8. var carpeta:String = "videos/";
  9. /* Como en mi ejemplo todos los videos son del grupo Héroes del Silencio, solo requiero de una variable de tipo String (texto). Si en tu caso los videos son de distintos artistas/grupos, podrás crear un arreglo con estos nombres */
  10. var artista:String = "Héroes del Silencio";

Posteriormente le indicamos al reproductor la ruta del video que queremos que reproduzca.

Texto Plano
Actionscript:
  1. /* Establecemos la ruta del video que cargará nuestro reproductor (recuerda que el nombre de instancia de nuestro FLVPlayback es player). Como es la primera vez que se reproducirá un video, el valor de contador es cero y por lo tanto cargará el video video1.flv */
  2. player.contentPath = carpeta + videos[contador];

Creamos dos listeners para saber cuando el video se acabó (complete) y cuando se está reproduciendo (playing). Existen mucho más eventos de este componente que puedes usar, para la lista completa visita esta página.

Texto Plano
Actionscript:
  1. /* En este caso, cuando un video haya acabado de reproducirse, se llamará a la función muestraVideo; cuando un video esté reproduciéndose, se llamará a la función videoActual. */
  2. player.addEventListener("complete", muestraVideo);
  3. player.addEventListener("playing", videoActual);

Ahora establecemos el código de cada uno de nuestros métodos que serán usados por los listeners.

La función muestraVideo se llama cuando se haya completado la reproducción de un video. En este caso queremos cambiar de video, por lo que le pasamos como parámetro el valor de -1 a la función cambiaVideo para que la función sepa que debe pasar a la siguiente función (Más adelante veremos el código de esta función)

Texto Plano
Actionscript:
  1. function muestraVideo(eventObject:Object):Void {
  2.      cambiaVideo(-1);
  3. }

La función videoActual se llama cuando un video se está reproduciendo. Para este ejercicio queremos que una vez que empiece a reproducirse el video se muestren los datos de éste. En este caso mostraremos en el campo de texto cancion_txt el nombre de la canción; en el campo artista_txt el nombre del artista, hacemos una llamada a la función habilitaBotones para habilitar todos los botones con los que cambiamos de video y posteriormente deshabilitamos el botón del video que se va a reproducir (de acuerdo al valor del contador y le cambiamos el valor de su propiedad de transparencia - alpha - a 50 para que se note una diferencia con respecto a los demás botones).

Texto Plano
Actionscript:
  1. function videoActual(eventObject:Object):Void {
  2.      cancion_txt.text = canciones[contador];
  3.      artista_txt.text = artista;
  4.      habilitaBotones();
  5.      eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
  6.      eval("opcion" + (contador + 1) + "_btn").enabled = false;
  7. }

La siguiente función (cambiaVideo) es la que se dedicará a cambiar el video de acuerdo a dos cosas:
1. El botón que hayamos seleccionado para cambiar de video.
2. Pasar al siguiente video cuando se acabó la reproducción del video actual
Para el primer caso pasaremos como parámetro el número de video que se deberá reproducir dependiendo del botón al que se le hizo click. En el segundo caso se le pasará como parámetro el valor de -1 para que la función sepa que se deberá pasar a la siguiente función.

Texto Plano
Actionscript:
  1. function cambiaVideo(numero:Number):Void {
  2.      cancion_txt.text = "Cargando video..."; /* Mostramos el texto de cargando video... */
  3.      if(numero == -1) { // Esto es, si debemos pasar a la siguiente canción
  4.           if(contador == videos.length - 1) /* Revisamos si el valor de contador es igual a la longitud de nuestro arreglo "videos" MENOS uno. ¿Por qué menos uno? Porque el índice de un arreglo comienza en cero, por lo tanto para nuestros cuatro videos el valor de contador será 0, 1, 2 ó 3. La propiedad "length" de un arreglo nos regresa el número de elementos que tiene el arreglo, en este caso es 4; por lo tanto el valor máximo que podrá tomar la variable contador es de 3 */
  5.                contador = 0; /* Como ya llegamos a ese máximo, reiniciamos el contador en cero */
  6.           else /* Si la variable "contador" no ha llegado a su valor máximo, aumentamos el valor de contador en uno */
  7.                contador++;
  8.      }
  9.      else /* Si numero != -1, es decir, si se le pasó a la función un valor distinto a -1 quiere decir que se le dió click a uno de los botones para seleccionar el video a reproducir */
  10.           contador = numero; /* En este caso le asignamos a la variable contador el número que recibimos como parámetro el cual indica el número de video que debemos reproducir */
  11.      player.contentPath = carpeta + videos[contador]; /* Le indicamos al reproductor la ruta del video que queremos reproducir */
  12. }

Como su nombre lo indica, la función habilitaBotones habilita todos nuestros botones (enabled = true) para que se les pueda hacer click y establecer con 100 el valor de su propiedad _alpha (es decir, que no tenga transparencia).

Texto Plano
Actionscript:
  1. function habilitaBotones() {
  2.      opcion1_btn._alpha = 100;
  3.      opcion2_btn._alpha = 100;
  4.      opcion3_btn._alpha = 100;
  5.      opcion4_btn._alpha = 100;
  6.  
  7.      opcion1_btn.enabled = true;
  8.      opcion2_btn.enabled = true;
  9.      opcion3_btn.enabled = true;
  10.      opcion4_btn.enabled = true;
  11. }

Por último, ponemos el código de cada uno de los botones que cambiarán el video. En este caso, el primer botón (opcion1_btn) hará que se muestre el primer video; y así sucesivamente.

Texto Plano
Actionscript:
  1. opcion1_btn.onRelease = function() {
  2.      cambiaVideo(0);
  3. }
  4.  
  5. opcion2_btn.onRelease = function() {
  6.      cambiaVideo(1);
  7. }
  8.  
  9. opcion3_btn.onRelease = function() {
  10.      cambiaVideo(2);
  11. }
  12.  
  13. opcion4_btn.onRelease = function() {
  14.      cambiaVideo(3);
  15. }

Va de nuevo, todo el código completo:

Texto Plano
Actionscript:
  1. var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];
  2. var canciones:Array = ["El estanque", "Fuente Esperanza", "Héroe de Leyenda", "No más lágrimas"];
  3. var contador:Number = 0;
  4. var carpeta:String = "videos/";
  5. var artista:String = "Héroes del Silencio";
  6.  
  7. player.contentPath = carpeta + videos[contador];
  8. player.addEventListener("complete", muestraVideo);
  9. player.addEventListener("playing", videoActual);
  10.  
  11. function muestraVideo(eventObject:Object):Void {
  12.      cambiaVideo(-1);
  13. }
  14. function videoActual(eventObject:Object):Void {
  15.      cancion_txt.text = canciones[contador];
  16.      artista_txt.text = artista;
  17.      habilitaBotones();
  18.      eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
  19.      eval("opcion" + (contador + 1) + "_btn").enabled = false;
  20. }
  21. function cambiaVideo(numero:Number):Void {
  22.      cancion_txt.text = "Cargando video...";
  23.      if(numero == -1) {
  24.           if(contador == videos.length - 1)
  25.                contador = 0;
  26.           else
  27.                contador++;
  28.      }
  29.      else
  30.           contador = numero;
  31.      player.contentPath = carpeta + videos[contador];
  32. }
  33.  
  34. function habilitaBotones() {
  35.      opcion1_btn._alpha = 100;
  36.      opcion2_btn._alpha = 100;
  37.      opcion3_btn._alpha = 100;
  38.      opcion4_btn._alpha = 100;
  39.  
  40.      opcion1_btn.enabled = true;
  41.      opcion2_btn.enabled = true;
  42.      opcion3_btn.enabled = true;
  43.      opcion4_btn.enabled = true;
  44. }
  45.  
  46. opcion1_btn.onRelease = function() {
  47.      cambiaVideo(0);
  48. }
  49.  
  50. opcion2_btn.onRelease = function() {
  51.      cambiaVideo(1);
  52. }
  53.  
  54. opcion3_btn.onRelease = function() {
  55.      cambiaVideo(2);
  56. }
  57.  
  58. opcion4_btn.onRelease = function() {
  59.      cambiaVideo(3);
  60. }

Guarda el documento y córrelo (Ctrl. + Enter). Verás que el mensaje inicial en el campo cancion_txt es "Cargando video..." y una vez que comienza la reproducción, el mensaje cambia al nombre de la canción. Cuando haces click en alguno de los cuatro botones para cambiar el video, el campo cancion_txt vuelve a mostrar el mensaje de "Cargando video..." hasta que comienza la reproducción de este nuevo video.

Hemos llegado al final del tutorial, no olvides bajar los archivos y ver el archivo de ejemplo que está a continuación.


Este archivo requiere Flash Player 8
Descargar Archivo
Tags: , ,
Flash

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por Carla Macías el Noviembre 11, 2008 @ 11:10 am

Hola Luis,

¿Un cargador para todo el Flash? El FLVPlayback tiene su propio cargador que se muestra mientras se carga el video (valga la redundancia).

Saludos.

  Comentario por luis el Noviembre 8, 2008 @ 4:18 pm

excelente tuto amiga, crees que se pueda colocar un cargador ??

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)