temario  
 
tecnica
VIDEO INTERACTIVO

6.3.2. Uso de Máscaras  
     

 

 

Un vídeo en un archivo flash, es como un objeto más que se adapta y relaciona con otros objetos. En el caso de las máscaras, el vídeo se puede visualizar a través de otra imagen, o  encuadrado por una forma, como un círculo, o cualquier otra forma o conjunto de formas irregulares. También puede incorporarse a un clip de película (MovieClip) y manipularse utilizando las posibilidades de programación de ese símbolo. Las máscaras para vídeo no es un tema complejo. Existen sólo dos métodos:

  1. Utilizando una capa de máscara,  En una capa se dibuja una forma a través de la cual se visualizará el vídeo que tiene que estar situado en la capa inferior. Todo lo que esté fuera de la forma quedará  oculto, es decir, sólo la parte del vídeo que está directamente bajo de la forma, será visible. La forma  puede  ser un objeto dibujado sobre el escenario en esa capa o un objeto convertido en símbolo clip de película.
  2. Utilizando una imagen con canal alpha como máscara, (por ejemplo una imagen tipo .png) con un hueco por el que se ve el vídeo.

La complejidad surge por la manera en que la máscara es aplicada y utilizada, pudiendo ir de lo más simple a lo verdaderamente complejo.

 

1. Utilizando una capa de máscara

Para crear una máscara simple, por ejemplo visualizar el vídeo a través de una forma circular, simplemente seguiremos estos pasos:

En un documento de flash importar un vídeo flv utilizando el componente FLVPlayback en la primera capa, siguiendo alguno de los procedimientos vistos en el apartado anterior “Video en Flash. Importar vídeo flv”. Añadir una segunda capa y en ella dibujar una forma continua sobre el componente vídeo. Situando el ratón sobre esa segunda capa, clicar botón derecho y del menú que surge seleccionar  Máscara. Observar como cambian los iconos de las capas, se bloquean y deja de verse la forma circular sobre el componente de video. Darle a ctrl.+Enter (o Cmd.+Enter en Mac) para visualizarlo.

capa mascara

Máscara como Clip de película con movimiento

Si la máscara es una forma estática no se necesita nada más, pero también puede ser una forma con movimiento. Para ello, antes de asignar su capa como máscara, debemos convertirla en un símbolo Clip de Película: Modificar/Convertir en símbolo, o teclear F8, y seleccionar Clip de Película. Haciendo doble click sobre ella accedemos a la línea de tiempo del Clip de Película, y para darle movimiento debemos nuevamente convertir la forma dibujada en un símbolo gráfico, tal como se vé y comenta en las siguientes imágenes.

mascara como clip de pelicula

Convertir la forma de la máscara en Clip de película.

Haciendo doble click en el clip de película pasamos de la línea de tiempo principal de la escena a la línea de tiempo del Clip de Película que en este caso se llama mascara_mc, seleccionando la forma inicial, volver a teclear F8 y seleccionar Gráfico

simbolo grafico

Se selecciona de nuevo la forma de la máscara y se convierte en símbolo gráfico. Se extiende la línea de tiempo del clip de película añadiendo frames, para ello podemos situar el cursor en el frame último que , por ejemplo el frame 45 y si tecleamos F6, se extiende su duración hasta ese frame en el que se sitúa un fotograma clave (keyframe). Se sitúa el cursor en ese último frame 45, se selecciona la forma y con la herramienta Transformación Libre, se realiza el cambio en la forma que definirá su movimiento, en este caso sólo un cambio de escala. Para asignarle el movimiento se sitúa el cursor en cualquier frame intermedio entre el 1 y el 45, y en la ventana de propiedades seleccionamos en el menú Animar: Movimiento. Una flecha recorrerá los frames ocupados de la Línea de tiempo.

movimiento máscara

Clicar en Escena 1 para salir de la línea de tiempo del Clip de película mascara_mc y volver al principal de la escena. Siguiendo los mismos pasos explicados en el punto 1., situar el ratón sobre la capa enla que está el Clip de película, clicar el botón derecho y del menú que surge seleccionar Máscara. Observar de nuevo como cambian los iconos de las capas, se bloquean y deja de verse la forma de la máscara sobre el componente de video. Haciendo Ctrl.+Enter (o Cmd.+Enter en Mac) publicar el archivo para visualizar el vídeo a través de la máscara móvil.

video con mascara

Descargar el ejemplo AQUÍ, en el ejemplo se a duplicado el movimiento del Clip de película de la máscara para generar un loop sin saltos.

Se puede utilizar este mismo tipo de máscara con una sencilla programación, sin modificar las propiedades de la capa como máscara. Esto nos permite además poder aplicar filtros al movieClip que actúa como máscara. La programación puede situarse en el frame o en el propio movieClip que contiene el vídeo y se escribe del siguiente modo:

niv_mc.setMask(ni_mask);

//niv_mc = nombre de instancia del movieClip que contiene el vídeo
//ni_mask = nombre de instancia del movieClip que contiene la máscara

Siguiendo el sistema de escribir código de programación y no la propiedad de máscara de la capa, podemos hacer que la máscara se mueva al mover el ratón. Si tenemos 2 capas de vídeo, una de ellas con máscara, y hacemos que la máscara siga la posición X del ratón, el movimiento del ratón mostrará/oculatará el vídeo de la capa inferior al visualizar partes del vídeo de la capa superior.

La programación en el primer fotograma de la línea de tiempo sería:

niv_mc.setMask(ni_mask); //igual que antes
this.onEnterFrame=function() {
//movimiento de la máscara respecto al cursor
_root.ni_mask._x = _root._xmouse;
}

Tal como se ve en este ejemplo (mover el cursor sobre él)

Descargar elemplo AQUÍ

Para que los vídeos estén en loop, dentro del movieClip que contiene cada uno de los componentes flv que reproducen los vídeos, se le ha añadido una capa de acciones con el siguiente código:

var listenerObject:Object = new Object();
listenerObject.complete = function(eventObject:Object):Void {
vid2_flv.play();
};
vid2_flv.addEventListener("complete", listenerObject);

"vid2_flv" es el nombre de instancia del componente FLVPlayback. Para el script se ha utilizado el evento FLVPlayback.complete de la clase FLVPlayback, que actúa cuando el reproductor de vídeo llega al final del archivo FLV.

2. Utilizando una imagen con canal alpha.

Al igual que en otros softwares, las capas que establecemos en la línea de tiempo del archivo flash superponen en el escenario las formas u objetos que contienen, de modo que unos pueden tapar a otros. Si situamos en una capa una imagen con un hueco o con una zona que tiene un alto nivel de transparencia, puede verse en ese área el vídeo situado en una capa inferior, sin tener que aplicarle a la capa la propiedad de máscara.

En el siguiente ejemplo se utiliza una imagen con fondo transparente, tipo .png, en la que en Photoshop se le ha asignado, además del fondo transparente, una zona con un grado de transpatencia del 67%.

imagen .png

En el archivo de Flash importamos la imagen a la biblioteca, y se sitúa en el escenario en una capa. Se añade una nueva capa situada por debajo y en ella se importa un vídeo siguiendo el mismo procedimiento que vimos en el apartado “Video en Flash. Importar vídeo flv”. Haciendo Ctrl.+Enter (o Cmd.+Enter en Mac) publicar el archivo para visualizar el vídeo a través de la imagen en el que se apreciarán distintos grados de transparencia.

el video a traves de la imagen .png

Si la imagen .png se convierte en Clip de película, se le pueden aplicar efectos. Para ello hay que seleccionar el Clip de película y en la ventana de propiedades, en Mezcla seleccionar del menú alguna de las posibilidades que muestra, en el ejemplo se ha elegido Diferencia.

Con efecto Mezcla / Diferencia

El efecto en el vídeo queda del siguiente modo

mascara con efecto

Descargar ejemplos AQUÍ

 

En esta dirección podéis ver otro ejemplo de máscara con degradado.

http://www.cristalab.com/tutoriales/