Unidad 21. Vídeo (III)



21.5. Uso de componentes para la reproducción

Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones.

Componentes de vídeo
  • BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio de éste.
  • BufferingBar: muestra el progreso de descarga del vídeo.
  • ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente posterior o en su defecto al final de éste.
  • FullScreenButton: cambia al modo de pantalla completa.
  • MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma similar a la línea:
    miVideo.volume = 0;
  • PauseButton: pausa la película en el momento en el que se pulse el botón.
  • PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de vídeo.
  • PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproducción desde un mismo control.
  • SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película.
  • StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del vídeo.
  • VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de volumen.

Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombre de instancia y luego asociarlo al reproductor empleando ActionScript. Básicamente, el reproductor tiene una propiedad que coincide con el tipo de componente, por lo que hay que asignar cada instancia a su propiedad correspondiente. Un ejemplo sería el siguiente:

		miVideo.playButton = miBotonPlay;
		miVideo.pauseButton = miBotonPausa;
		miVideo.playPauseButton = miBotonPausaPlay;
		miVideo.stopButton = miBotonStop;
		mVideo.backButton = miBotonAtras;
		miVideo.forwardButton = miBotonAdelante;
		miVideo.muteButton = miBotonSilencio;
		miVideo.volumeBar = miBarraVolumen;
		miVideo.seekBar = miBarraDeslizadora;
		miVideo.bufferingBar = miBarraProgreso;

El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad?

Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamaño o color.

21.6. Crear controles propios

Crear controles propios no es muy complicado en Flash CS5. Sólo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback.

Puedes recurrir al panel Fragmentos de código donde encontrarás códigos muy útiles con las funciones básicas.

  • play(): reproduce el vídeo.
    miVideo.play();
  • stop(): detiene el vídeo y vuelve al inicio.
    miVideo.stop();
  • pause(): detiene el vídeo conservando su posición actual.
    miVideo.pause();
  • seek(segundo:Number): permite el avance o retroceso de la película de vídeo.
    miVideo.seek(5);
    Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.
     
  • volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.
    miVideo.volume = 50;

Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón:

  miBoton.addEventListener(MouseEvent.CLICK,pararContinuar);
  function pararContinuar(event:MouseEvent) {
    if (miVideo.state==miVideo.PAUSED) {
      miVideo.play();
    } else {
      miVideo.pause();
    }   
  }

La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento, puede tomar los siguientes valores:

  • miVideo.PAUSED: el vídeo se encuentra pausado.
  • miVideo.PLAYING: el vídeo se está reproduciendo.
  • miVideo.REWINDING: el vídeo está en estado de rebobinado.
  • miVideo.SEEKING: el vídeo está en estado de búsqueda.
  • miVideo.STOPPED: el vídeo se encuentra detenido.
  • miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.
  • miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse.
  • miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se producirá hasta que se le asigne una ruta a la propiedad contentPath.
  • miVideo.LOADING: el vídeo está en estado de carga.

21.7. Navegar con los puntos de referencia

Ahora veremos como interactuar con los puntos de referencia que hayamos creado.

Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra navegar por el vídeo, o esperar a que se produzcan y entonces realizar una acción.

 

• Navegar con puntos de referencia

En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2.

El código asociado al botón sería el siguiente:

  miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio);
  function reproducirInicio(event:MouseEvent) {
    miVideo.seekToNavCuePoint("inicio");
    miVideo.play();
  }

Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproducción.

También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegación creados.

		miVideo.seekToNextNavCuePoint();
		miVideo.seekToPrevNavCuePoint();



Marzo-2011
Pág. 21.3

Atrás  Inicio  Adelante







.