6.3.3. Interactividad entre vídeos utilizando cuePoints, Botones y Clips de Película
El medio más habitual para interactuar con una aplicación Flash es a través del ratón, utilizando para ello símbolos de tipo botón o clips de película.
Vamos a describir la configuración de botones y Clips de película, explicando la sintaxis básica de programación a través de un ejemplo.
Ejemplo 1. Botones y cuePoints
Dado que la finalidad es vídeo interactivo, en este primer ejemplo con botones, situaremos en el archivo flash un vídeo flv, utilizando el componente FLVPlayback, para ello seguiremos los primeros pasos expuestos en el apartado 6.3.1.Video en Flash. Importar vídeo flv, hasta el paso 3.2 Pestaña Puntos de referencia (CuePoints).
El codec de vídeo debe ser On2VP6. Activando la pestaña Puntos de Referencia (cuePoints), tal como se ve en la imagen, mover la barra deslizadora del lector del vídeo y detenerlo en determinados tiempos, en el ejemplo el primero punto se sitúa en el tiempo 00:00:00.517 (horas:minutos:milisegundos). Clicando el signo + del cuadro inferior izquierdo se inscribe el primer cuePoint, al que le hemos puesto como nombre UNO. De forma semejante, se inscriben los cuePoint DOS, TRES y CUATRO.
Cuando el componente FLVPlayback se sitúa en el escenario, asignarle un nombre de instancia, en el ejemplo "vid1_flv". Es importante no olvidar los nombres de instancia, sin ellos no se podrá programar ningún comportamiento de interactividad.
Convertirlo en símbolo Clip de Película (movieClip): menú Modificar (o F8) /convertir en Símbolo/ Clip de película (movieClip) y ponerle también un nombre de instancia, en el ejemplo "vid1_mc". Con ello hemos ido colocando un elemento dentro de otro, por lo que cuando programemos para actuar en el que está en el último nivel tendremos que nombrar toda la ruta utilizando los nombres de instancia. La ruta aboluta de nuestro ejemplo sería: _root.vid1_mc.vid1_flv. Es importante entender las rutas, más adelante, cuando entremos en la programación volveremos al tema.
El tamaño de escenario que está utilizándose tiene una anchura de 640 píxeles, para poder situar dos vídeos juntos horizontalmente de 320x240 píxeles. A la Capa 1 en la que está el movieClip vid1_mc, ponerle un nombre para identificarla, en el ejemplo video1. Añadir una nueva capa que le llamaremos video2, de la ventana de componentes arrastraremos a esta capa en el escenario un componente FLVPlayback vacío, es decir, no tiene ningún vídeo flv asignado. Ponerle un nombre de instancia, ej. "vid2_flv", convertirlo en símbolo movieClip y ponerle también nombre de instancia, ej. "vid2_mc". De forma semejante al vídeo 1, su ruta absoluta será: _root.vid2_mc.vid2_flv.
Añadir una tercera capa y llamarla boton. Seleccionar la herramienta rectángulo y dibujar una forma rectangular sobre el vídeo 1, no importa el color que tenga. Seleccionar esta forma y convertirla en símbolo Botón: menú Modificar (o F8) / Convertir en símbolo / Botón.
Hacer doble Click sobre el botón y accedemos a la configuración del botón. La línea de tiempos se modificará como se ve en la siguiente imagen.
Para que el botón sea invisible, insertar un fotograma clave debajo de Zona Activa para activarla, después situar el cursor bajo la opción reposo, seleccionar la forma cuadrada y borrarla, de esta forma el usuario no verá el botón, sólo que la forma del cursor se modifica cuando pasa sobre él.
En el caso de que se desee que la forma o imagen que actúa como botón se perciba y modifique cuando el cursor pasa sobre él, simplemente se coloca un fotograma clave en cada una de las opciones, pudiendo modificarse sus características de tamaño o color o luminosidad cuando el cursor interactúa con él.
Clicar el icono de Escena 1 que aparece en la parte superior de las distintas opciones del botón para volver a la escena principal. Si se ha dejado el botón invisible se percibirá como en la imagen siguiente.
Para que el usuario pueda interactuar a través del botón con los cuePoints que hemos inscrito en el vídeo1, vamos a utilizar un campo de texto dinámico en el que aparezca una determinada palabra cada vez que pase un cuePoint. Hacemos esto porque esta palabra se quedará fija entre el paso de un cuePoint y otro, dando tiempo a que el usuario reaccione, si quiere, y utilice las posibilidades de interactividad. Si quisieramos que la propia aplicación actúe directamente al paso del cuePoint de forma automática, no haría falta buscar un elemento alternativo para extender el tiempo de acción.
Los términos de la programación para que esto suceda se explican más adelante, de momento situamos en una nueva capa, en el ej. se llama text, un campo de texto dinámico vacío. Para ello con la nueva capa seleccionada, arrastramos la herramienta texto al escenario, expandiendo su tamaño al mantener el botón izquierdo del ratón presionado y desplazándolo para definir su área. En el menú de propiedades seleccionamos que se trata de un texto dinámico y en lugar de ponerle un nombre de instancia, vamos a ponerle un nombre de variable: "box_txt", tal como se ve en la imagen.
Por último, antes de entrar en la programación, para poder interactuar con otros clips de vídeo, tenemos que tener en la misma carpeta en la que está el archivo de flash y el vídeo que hemos importado, otros vídeos en formato flv para que vayan mostrandose a través del componente FLVPlayback vacío que está en vid2_mc.vid2_flv. No hay que importar esos vídeos a esta aplicación, simplemente tenerlos preparados en esa carpeta. En el ejemplo que estamos siguiendo, el vídeo importado se llama "Entr-Acte22.flv" y los otros vídeos preparados "rene_claire.flv", "canon2.flv" y "canon1.flv". Estos últimos nombres aparecerán en la programación.
PROGRAMACIÓN PARA LOS cuePoints.
Que el sistema sepa cuando pasan los cuePoints que hemos inscrito en el vídeo 1 no depende de una acción sobre el botón o los movieClips, se trata de una programación general para toda la aplicación por lo que se sitúa en un frame: Acciones-Fotograma. Para ello se pone una nueva capa en la línea de tiempos (en el ej se denomina action). Clicando/seleccionando el frame de esa nueva capa, abrimos la ventana de acciones (en el menú que aparece al presionar el botón derecho del ratón seleccionar acciones, o desde el menú superior Ventana/ acciones, o simplemente teclear F9).
Para que el sistema conozca cuando pasa un cuePoint, tenemos que utilizar un objeto detector del tipo "listener" y programar una función. Los términos que vamos a utilizar son los siguientes:
// Creamos un nombre para el objeto detector que le llamamos ourListener
// y lo usamos como nombre para nuestro nuevo objeto
//Escribimos una función para nuestro objeto que determina lo que sucede cuando llega un cuePoint
//el parámetro eventObject es justo eso, el evento del objeto que tiene que pasar
// Void es un operador que se utiliza para evaluar, comparar y comprobar los valores solicitados
//Le escribimos que el evento que tiene que comprobar es la información del nombre
// y en función del resultado escribimos una serie de condicionales:
var ourListener:Object = new Object();
ourListener.cuePoint = function( eventObject:Object ):Void {
var cuePointName = eventObject.info.name;
----- if ( cuePointName == "UNO" ) { ---- // Sí el nombre es exactamente "UNO"
------- _root.box_txt = "UNO"; ------------ //Pon en la caja de texto "UNO" ...
------}
---- if ( cuePointName == "DOS" ) {
------- _root.box_txt = "DOS";
-----}
---- if( cuePointName == "TRES" ) {
------ _root.box_txt = "TRES";
---- }
---- if( cuePointName == "CUATRO" ) {
------ _root.box_txt = "CUATRO";
---- }
}
//se pone la ruta absoluta del componente que tiene que detectar el paso
// del cuePoint y realizar la función que hemos llamado ourListener
_root.vid1_mc.vid1_flv.addEventListener( "cuePoint", ourListener );
//esto anula el volumen del sonido de los vídeos que aparezcan en el componente del vídeo 2
_root.vid2_mc.vid2_flv.volume = 0;
stop();
PROGRAMAR ACCIONES DE BOTÓN
La sintaxis de programación siempre va a ser:
on (Evento del Raton) {
las sentencias se escriben aquí;
}
Los signos { } contienen todas las sentencias, cada sentencia termina con ";". Un evento de ratón puede realizar distintas sentencias diferenciandolas por el ";"
Los eventos de ratón utilizables son (entre otros):
press - cuando se presiona el botón izquierdo del ratón
release – cuando se suelta la presión del botón
rollOver - cuando pasa el cursor por encima del botón (no hace falta clicar)
rollOut - cuando el cursor deja de estar encima del botón (no hace falta clicar)
La programación para el ejemplo que estamos siguiendo será:
Seleccionar el botón y abrir ventana acciones (F9)
on (release) {
if (_root.box_txt == "UNO") {
_root.vid2_mc._alpha = 100; //el MovieClip que contiene el vídeo 2 es totalmente opaco
_root.vid1_mc._alpha = 100;
_root.vid2_mc.vid2_flv.play ("rene_claire.flv"); //el componente del vídeo 2 reproduce este archivo
}
if (_root.box_txt == "DOS") {
_root.vid2_mc._alpha = 100;
_root.vid1_mc._alpha = 100;
_root.vid2_mc.vid2_flv.play ("canon2.flv");
}
if (_root.box_txt == "TRES") {
_root.vid1_mc._alpha = 50; //el MovieClip que contiene el vídeo 1 es 50% transparente
_root.vid2_mc._alpha = 50;
_root.vid2_mc.vid2_flv.play ("canon1.flv");
}
if (_root.box_txt == "CUATRO") {
_root.vid2_mc._visible = false; // el vídeo 2 es invisible
_root.vid1_mc.vid1_flv.play ("rene_claire.flv");
_root.vid1_mc.vid1_flv.volume = 0; //el volumen de sonido del video 1 está a 0
_root.vid1_mc._x = 127; // La posición en X del vídeo 1 cambia a x=127
_root.vid1_mc._alpha = 100;
_root.boton._visible = false; // el botón es invisible, ya no puede actuar
_root.box_txt2 = "SE ACABO LA INTERACTIVIDAD"; // caja de texto 2 dice " "
}
}
Cuando el vídeo que está reproduciendo el componente termina, se detiene. Si queremos que continúe en loop y el sistema siga detectando los cuePoint, en el Clip de Película (movieClip) del vídeo 1 debemos añadir una nueva capa (para entrar en la línea de tiempos del movieClip simplemente hay que clicar 2 veces sobre él en el escenario, o hacer lo mismo sobre su icono en la ventana de biblioteca), e insertar en el frame la siguiente programación.
//utilizamos el evento FLVPlayback.complete de la clase FLVPlayback.
//el evento complete actúa cuando finaliza la reproducción porque llegó al final del archivo FLV
var listenerObject2:Object = new Object();
listenerObject2.complete = function(eventObject:Object):Void {
vid1_flv.play();
};
vid1_flv.addEventListener("complete", listenerObject2);
----------------
Descargar ejemplo AQUÍ
Direcciones de interés:
http://www.webwasp.co.uk Tutoriales flash en inglés
http://www.cristalab.com/tutoriales/ Tutoriales flash en español