Con Flash cada vez es más fácil añadir vídeos a nuestras
presentaciones o webs. En particular Flash 8 incorpora una serie de
características que facilitan la tarea al máximo y permiten el uso de vídeos
como si se tratase de cualquier otro objeto en pantalla.
4.1 VÍDEOS
En ésta lección aprenderemos a insertar un vídeo en flash 8;
ahora, éste proceso es extremadamente parecido al de sonido, así que discutamos
formatos: Flash no debería tener problema con ningún archivo de vídeo, sin
embargo, es más posible que responda mejor con un tipo de archivo llamado .flv,
dado que es un archivo de vídeo en flash, es el mismo tipo de archivo que usan,
por ejemplo, en youtube; si no los archivos .avi tampoco están mal, sin
embargo, con otros tipos de archivos, tales como .mp4 u otros, no te aseguro
nada.
4.1.1 IMPORTANDO VÍDEOS
Lo primero que deberemos hacer es transformar nuestro vídeo
de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.
Este formato, además de crear archivos de vídeo de buena
calidad muy comprimidos, te permitirá introducir puntos de referencia desde
donde controlaremos la interacción del entorno de la película con el vídeo.
Haz clic en Archivo → Importar → Importar vídeo para empezar
a configurar el archivo .flv que crearemos.
Deberás seleccionar el archivo que quieres importar para
utilizarlo en tu película. Haz clic en el botón Examinar y búscalo en tus
carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo
para seguir pulsando el botón Siguiente.
También es posible marcar la opción Ya se ha implementado en
un servidor Web, Flash Vídeo Streaming Service o Flash Communication Server. En
este caso deberás introducir la URL del archivo, que previamente habrá sido
preparado para poder utilizarlo en Flash.
La siguiente pantalla te permitirá seleccionar el modo en el
que se implementará el vídeo:
Puedes elegir entre varias opciones, si seleccionas
cualquiera de ellas verás su descripción en la derecha de la pantalla. Te
adelantamos que para la implementación de vídeo para Streaming deberás disponer
de un servidor (de pago) que transmita tu vídeo al usuario de una forma óptima.
La opción Descarga progresiva, a pesar de no ser la más
aconsejada para conexiones de baja velocidad (sobre todo para archivos muy
grandes) es la más utilizada por aquellos que no disponen de los recursos
necesarios para contratar los servicios de un servidor de vídeo en formato
Stream.
Así que seleccionaremos la primera opción y pulsaremos
Siguiente.
Ahora es cuando realmente configuraremos el archivo de
salida. Antes que nada pulsa el botón Mostrar configuración avanzada.
Verás 3 pestañas. La primera te servirá para ajustar la
compresión y calidad del vídeo. Puedes seleccionarla directamente en el
desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen
en la pestaña Codificación.
Nosotros haremos hincapié en la pestaña Puntos de
referencia.
Desde aquí podremos configurar puntos en nuestra película.
4.1.2 COMPONENTE FLV PLAYBACK
El vídeo, no se reproduce directamente. Lo hace a través de
un reproductor, un componente del tipo FLVPlayback.
Otra forma de insertar un vídeo en el escenario, es creando
primero este componente, e indicándole el vídeo a reproducir. Podemos hacerlo a
través del Panel Componentes, accesible desde el menú desde Ventana →
Componentes→ FLVPlayback.
Desde el inspector de Propiedades podemos configurarlo.
Veamos sus opciones:
FlvPlayBack - Inspector de componentes
align: especifica el diseño del vídeo. Por ejemplo, lo
podemos centrar con center.
autoPlay: puede tomar los valores true o false. Indican si
el vídeo debe reproducirse nada más abrir el archivo o esperar a una orden para
empezar a reproducirse.
cuePoints: indica los puntos de referencia que están incluidos
en la película. Una vez importada la película a formato flv no pueden ser
modificados los puntos codificados, aunque sí los de ActionScript.
isLive: puede tomar los valores true o false. Este campo se
utilizará para la transmisión de vídeo en vivo y sólo podrá utilizarse a través
de un servidor de Streaming.
preview: Permite obtener una previsualización desde una
imagen png.
scaleMode: Indica si se altera la escala del vídeo: si
muestra su tamaño original, si se ajusta al tamaño de la escena, etc...
skin: desde aquí podemos modificar la apariencia de los
controles de la película y seleccionar uno entre los predefinidos.
skinAutoHide: puede tomar los valores true o false. Indicará
si los controles se pueden esconder para volver a aparecer cuando el cursor se
sitúe sobre la película.
skinBackgroundAlpha establece la transparencia del fondo del
skin, y skinBackgroundColor su color.
source es el archivo de vídeo que se mostrará en el
reproductor.
volume: de 0 a 100. Indica el volumen máximo del vídeo.
A parte de las que se muestran en el panel, existen otras
propiedades que pueden sernos útiles:
autoRewind: puede tomar los valores true o false. Indica si
el vídeo deberá volver a la posición inicial después de haberse reproducido
completamente, o tras hacer un stop.
autoSize: puede tomar los valores true o false. Indica si el
control deberá ajustarse al tamaño del vídeo, o por el contrario deberá ser el
vídeo el que se ajuste al tamaño del control.
bufferTime: especifica el número de segundos que se
almacenarán en la memoria antes de que se inicie la reproducción del vídeo.
totalTime: indica el tiempo total del vídeo.
Recuerda que todas estas propiedades son accesibles desde
ActionScript.
Una vez insertada la película mediante la adición de este
componente o por importación deberemos darle un nombre de instancia para poder
referirnos a él. Hazlo desde este mismo panel o desde el Panel Propiedades.
4.1.3 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.
Para añadir estos componentes haz clic en el elemento FLV
Playback Custom UI y arrastra el que tu quieras al Escenario, veamos cuales son
sus funciones.
BackButton: retrocede el flujo del vídeo al punto de
referencia inmediatamente anterior o en su defecto al inicio de éste.
Componentes de vídeo
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.
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 nombrede instancia y luego escribir lo siguiente
(dependiendo de los controles que hayas arrastrado) en el Panel Acciones del
fotograma 1:
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.bufferinBar = 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.
4.1.4 CREAR CONTROLES PROPIOS
Crear controles propios no es muy complicado en Flash 8.
Sólo tienes que crear los botones que consideres necesarios y utilizar las
propiedades del componente FLVPlayback.
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:
on
(release) {
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 estdo 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.
Ahora veremos como interactuar con los puntos de referencia
que hayamos creado.
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:
on
(release) {
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();
4.1.5 NAVEGAR CON PUNTOS DE REFERENCIA
El vídeo se puede mostrar como un flujo, simplemente
reproducirlo y pararlo. Pero podemos hacer más, podemos hacer que se pueda
navegar a determinados momentos del vídeo, o que se produzca un evento cuando
alcance una posición determinada. Pero para hacer todo esto, tenemos que
trabajar con puntos de referencia.
Podemos ver Puntos de referencia desde el panel de
Propiedades del componente de vídeo:
Puntos de Referencia
Existen dos tipos de puntos de referencia diferentes: puntos
de referencia codificados y puntos de referencia de ActionScript.
• Los puntos de referencia codificados se añaden al
codificar el vídeo con Adobe Media Encoder. Pueden ser de Navegación o de
Evento.
Creando puntos de Navegación podremos referenciarnos más
tarde a ellos para saltar en la película. Sería algo así como crear capítulos
sobre los que podremos navegar utilizando botones y ActionScript.
El punto de Referencia de Evento nos permitirá crear
interacciones con el resto de objetos en la película. Estos puntos nos
permitirán pasar parámetros que podremos recuperar mediante ActionScript.
En la imagen anterior, vemos que hay 3 puntos de Navegación,
a los cuales acudiremos pulsando los botones para saltar entre los capítulos de
la película. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un
parámetro que hará que se muestre determinado fotograma de un clip que se
encontrará en el Escenario.
• Realiza el siguiente ejercicio paso a paso para ver cómo
Crear Puntos de Referencia Codificados.
• Los puntos de ActionScript, como su nombre indica, se
codifican mediante ActionScript. Por ello, podemos añadirlos directamente desde
el panel de Propiedades. Para hacerlo no tenemos más que desplazar el cabezal
del vídeo hasta el momento en el que lo queramos añadir, y pulsar el icono más
+ del panel.
Tanto los puntos de ActionScript como los codificados,
pueden enviar parámetros, lo que nos permite recibir información.
4.1.6 EVENTOS DE VÍDEO
Capturar el evento.
Imaginemos que tenemos un vídeo con un punto de referencia
llamado susto, y que cuando el vídeo lo alcance, queremos mostrar un texto
determinado en un componente de texto.
Lo que tenemos que hacer es escuchar cuándo se produce el
evento MetadataEvent.CUE_POINT, y entonces llevar a cabo nuestra acción, Lo que
hacemos en la condición, es comprobar si hay información sobre los parámetros
(.info.parameters).
Si es así, sacamos la información del parámetro llamándolo
por su nombre y actuamos en consecuencia. Lo que hemos hecho, es hacer que el
parámetro fotograma nos indique la etiqueta a la que queremos desplazar el
cabezal de mensaje.
En el ejemplo hemos creado un clip de película que se llama
mensaje. Cuando se van produciendo determinados eventos en el vídeo vamos
moviendo el cabezal de reproducción de dicho clip y así creamos una vinculación
entre ambos, el clip y el vídeo.
