Oscurecer página con ThickBox y LightWindow desde Flash

En este ejemplo veremos cómo llamar a LightWindow y Thickbox desde Flash. Thickbox y LightWindow son unas librerías de JavaScript que nos permite crear el efecto de oscurecer la página y mostrar una foto, otra página, información, etc. encima de lo demás. A este tipo de efecto se les conoce como “Modal Window”y se refieren a un tipo de ventana secundaria la cual obliga al usuario a realizar una acción antes de poder trabajar con la ventana principal. Actualmente existen muchas versiones y tipos de estas ventanas; algunas de ellas son LigthBox, Control.Modal, TinyBox, iBox, etc.

El resultado final así como los archivos de los ejercicios los encontrarás al final de esta entrada.

Flash

En este ejemplo haremos una galería de fotos en Flash y cada una de las fotos las mostraremos (en un tamaño mayor con respecto a las del documento de Flash) llamando a una función de JavaScript, la cual a su vez llamará a la función tb_show de ThickBox o activateWindow de LightWindow. Lo único que deberás hacer en Flash es realizar una simple llamada a una función de JavaScript, la cual llamaremos muestraImagen. El archivo de Flash es el mismo tanto para el ejemplo de ThickBox como el ejemplo de LightWindow. Lo único que cambiará es el documento HTML que los contiene.
A continuación pegaré todo el código del documento de Flash, no lo explicaré ya que es el mismo que utilicé en el post de Scroll de imágenes en Flash.

var velocidad:Number = 10;

derecha_btn.onRollOver = function() {
	_root.onEnterFrame = function() {
		if(fotos_mc._x > -100.9) {
				fotos_mc._x -= velocidad;
		}
	}
}

derecha_btn.onRollOut = function() {
	delete _root.onEnterFrame;
}

izquierda_btn.onRollOver = function() {
	_root.onEnterFrame = function() {
		if(fotos_mc._x < 944.9) {
				fotos_mc._x += velocidad;
		}
	}
}

izquierda_btn.onRollOut = function() {
	delete _root.onEnterFrame;
}

/* Código de las fotos */
fotos_mc.foto1.onRelease = function() { getURL("javascript:muestraImagen('foto1.jpg', 'Descripción Foto #1');"); }
fotos_mc.foto2.onRelease = function() { getURL("javascript:muestraImagen('foto2.jpg', 'Descripción Foto #2');"); }
fotos_mc.foto3.onRelease = function() { getURL("javascript:muestraImagen('foto3.jpg', 'Descripción Foto #3');"); }
fotos_mc.foto4.onRelease = function() { getURL("javascript:muestraImagen('foto4.jpg', 'Descripción Foto #4');"); }
fotos_mc.foto5.onRelease = function() { getURL("javascript:muestraImagen('foto5.jpg', 'Descripción Foto #5');"); }
fotos_mc.foto6.onRelease = function() { getURL("javascript:muestraImagen('foto6.jpg', 'Descripción Foto #6');"); }
fotos_mc.foto7.onRelease = function() { getURL("javascript:muestraImagen('foto7.jpg', 'Descripción Foto #7');"); }

Lo importante de este código y en lo que te debes de fijar es en el código de los botones. Nuestra galería está formada por siete imágenes, cada una de estás imágenes es un MovieClip cuyos nombres de instancia van de foto1 a foto7. Estas fotos a su vez están dentro de un MovieClip con nombre de instancia fotos_mc.
Cada uno de los MovieClips que contienen las fotos llaman a la función en JavaScript muestraImagen, pasándole como parámetro el nombre de la imagen y su descripción.

ThickBox

El código de esta librería lo puedes bajar de aquí. Su característica principal es que está desarrollada sobre la librería jQuery, por lo que si estás realizando una aplicación con jQuery, no tendrás que importar tantos archivos *.js. Debido a lo anterior, deberás tener este archivo (jquery.js) antes de poder usar el ThickBox (no te preocupes, ese archivo lo puedes bajar de la misma página del ThickBox). Para poder hacer uso de las funciones del ThickBox y obtener los efectos deberás importar el archivo thickbox.js y thickbox.css a tu archivo HTML. Estos archivos solamente agregan 15kb a la librería jquery.js, por lo que no te preocupes de los tiempos de descarga que tedrá tu página.

<!-- CSS -->
<link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />

<!-- JavaScript -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/thickbox/jquery.js"></script>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>

Recuerda que las líneas del código anterior deberán ir entre los tags <head> y </head>. Además, dentro de estos tags deberá estar el código de nuestra función de JavaScript que se encarga de hacer la llamada a tb_show:

<script language="javascript">
	function muestraImagen(imagen, descripcion)
	{
		tb_show(descripcion, "fotos/" + imagen);
	}
</script>

Nuestra función muestraImagen recibe dos parámetros:

imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.

El código junto quedaría de la siguiente manera:

<head>
...
<!-- CSS -->
<link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />

<!-- JavaScript -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/thickbox/jquery.js"></script>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>

<script language="javascript">
	function muestraImagen(imagen, descripcion)
	{
		tb_show(descripcion, "fotos/" + imagen);
	}
</script>
...
</head>

Ahora nada mas nos falta embeber el archivo SWF dentro de nuestro HTML.

Para que la ventana secundaria se muestre arriba del documento de Flash, deberás ponerle el parámetro wmode como transparent:

<param name="wmode" value="transparent" />

Para evitar que tu documento se vea transparente no olvides ponerle un fondo a tu Flash.

La hoja de estilos del ThickBox (thickbox.css) nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, y sin la necesidad de meternos en el código de JavaScript; por lo que si deseas cambiar los colores, el tamaño de las fuentes, etc. deberás modificar este archivo. Ten en cuenta que no es necesario que tu página “se oscurezca” con un fondo negro, puedes cambiarlo a un fondo azul, verde, rojo, etc.

LightWindow

El código de esta librería lo puedes bajar de aquí. A diferencia del ThickBox, LightWindow requiere de la librería Prototype, Scriptaculous y de la librería Effects.

Al igual que el ThickBox, LightWindow incluye una hoja de estilos (lightwindow.css) que nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, sin la necesidad de meternos en el código de JavaScript.

Los archivos JavaScript y Hojas de estilos que debes incluir en tu archivo HTML son los siguientes:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />

<!-- JavaScript -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>

Y, por supuesto, deberemos incluir el código de nuestra función muestraImagen:

<script language="javascript">
	function muestraImagen(imagen, titulo, descripcion, autor)
	{
		myLightWindow.activateWindow({href: 'fotos/' + imagen, title: '2008 Acapulco, México', caption: titulo, author: 'Carla Macías'});
	}
</script>

En esta ocasión, nuestra función tendrá cuatro parámetros:

imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
titulo: un texto alusivo a la imagen que estamos mostrando
descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.
autor: autor o dueño de la imagen, página, etc. Esta información es opcional, solamente la mostramos para que veas el diseño de esta parte

Al final, nuestro código quedará de la siguiente manera:

<head>
...
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />

<!-- JavaScript -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>

<script language="javascript">
	function muestraImagen(imagen, titulo, descripcion, autor)
	{
		myLightWindow.activateWindow({href: 'fotos/' + imagen, title: '2008 Acapulco, México', caption: titulo, author: 'Carla Macías'});
	}
</script>
...
</head>

Hemos llegado al final del tutorial, espero te haya gustado y no dudes en dejar comentario.
A continuación, están las ligas para cada uno de los ejemplos y para bajar los archivos del ejercicio.