Oscurecer página con ThickBox y LightWindow desde Flash

Publicado por Carla Macías
10 Agosto, 2008

FlashEn 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.

Texto Plano
Actionscript:
  1. var velocidad:Number = 10;
  2.  
  3. derecha_btn.onRollOver = function() {
  4.     _root.onEnterFrame = function() {
  5.         if(fotos_mc._x> -100.9) {
  6.                 fotos_mc._x -= velocidad;
  7.         }
  8.     }
  9. }
  10.  
  11. derecha_btn.onRollOut = function() {
  12.     delete _root.onEnterFrame;
  13. }
  14.  
  15. izquierda_btn.onRollOver = function() {
  16.     _root.onEnterFrame = function() {
  17.         if(fotos_mc._x <944.9) {
  18.                 fotos_mc._x += velocidad;
  19.         }
  20.     }
  21. }
  22.  
  23. izquierda_btn.onRollOut = function() {
  24.     delete _root.onEnterFrame;
  25. }
  26.  
  27. /* Código de las fotos */
  28. fotos_mc.foto1.onRelease = function() { getURL("javascript:muestraImagen('foto1.jpg', 'Descripción Foto #1');"); }
  29. fotos_mc.foto2.onRelease = function() { getURL("javascript:muestraImagen('foto2.jpg', 'Descripción Foto #2');"); }
  30. fotos_mc.foto3.onRelease = function() { getURL("javascript:muestraImagen('foto3.jpg', 'Descripción Foto #3');"); }
  31. fotos_mc.foto4.onRelease = function() { getURL("javascript:muestraImagen('foto4.jpg', 'Descripción Foto #4');"); }
  32. fotos_mc.foto5.onRelease = function() { getURL("javascript:muestraImagen('foto5.jpg', 'Descripción Foto #5');"); }
  33. fotos_mc.foto6.onRelease = function() { getURL("javascript:muestraImagen('foto6.jpg', 'Descripción Foto #6');"); }
  34. 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.

Texto Plano
HTML:
  1. <!-- CSS -->
  2. <link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />
  3.  
  4. <!-- JavaScript -->
  5. <script type="text/javascript" src="js/swfobject.js"></script>
  6. <script type="text/javascript" src="js/thickbox/jquery.js"></script>
  7. <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:

Texto Plano
JavaScript:
  1. <script language="javascript">
  2.     function muestraImagen(imagen, descripcion)
  3.     {
  4.         tb_show(descripcion, "fotos/" + imagen);
  5.     }
  6. </script>

Nuestra función muestraImagen recibe dos parámetros:

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

Texto Plano
HTML:
  2. ...
  3. <!-- CSS -->
  4. <link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />
  5.  
  6. <!-- JavaScript -->
  7. <script type="text/javascript" src="js/swfobject.js"></script>
  8. <script type="text/javascript" src="js/thickbox/jquery.js"></script>
  9. <script type="text/javascript" src="js/thickbox/thickbox.js"></script>
  10.  
  11. <script language="javascript">
  12.     function muestraImagen(imagen, descripcion)
  13.     {
  14.         tb_show(descripcion, "fotos/" + imagen);
  15.     }
  16. </script>
  17. ...
  18. </head>

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

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

Texto Plano
HTML:
  1. <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:

Texto Plano
HTML:
  1. <!-- CSS -->
  2. <link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
  3. <link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />
  4.  
  5. <!-- JavaScript -->
  6. <script type="text/javascript" src="js/swfobject.js"></script>
  7. <script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
  8. <script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
  9. <script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>

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

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

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

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

Texto Plano
HTML:
  2. ...
  3. <!-- CSS -->
  4. <link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
  5. <link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />
  6.  
  7. <!-- JavaScript -->
  8. <script type="text/javascript" src="js/swfobject.js"></script>
  9. <script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
  10. <script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
  11. <script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>
  12.  
  13. <script language="javascript">
  14.     function muestraImagen(imagen, titulo, descripcion, autor)
  15.     {
  16.         myLightWindow.activateWindow({href: 'fotos/' + imagen, title: '2008 Acapulco, México', caption: titulo, author: 'Carla Macías'});
  17.     }
  18. </script>
  19. ...
  20. </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.

Ver Ejemplo Ver Ejemplo Descargar Archivo

Tags: , ,
Flash

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por Carla Macías el Septiembre 25, 2008 @ 11:29 am

Hola Alejandro,

Mi versión de Mozilla Firefox es la 3.0.1 y no tengo ningún problema. ¿No te funciona en local o en las ligas de las demos que están en este tutorial?

Saludos.

  Comentario por alejandro el Septiembre 25, 2008 @ 10:54 am

muy bueno el tuto, lo chequee en el opera y funciona bien en el safari tambien en el explorer todavia no pude pero en el mozila no funciona? o sera mi version de mozila es la version 3
muchas gracias gran aporte!!1

  Comentario por Carla Macías el Septiembre 17, 2008 @ 4:53 pm

Gracias por tu comentario, Lux, y qué gusto que mi blog te sea de utilidad.

Saludos.

  Comentario por lux el Septiembre 17, 2008 @ 4:19 pm

Muchas gracias Carla.

Hace un poco lo acababa de solucionar invocando directamente a LightWindow desde flash:

foto1.onRelease = function() {
getURL("javascript: myLightWindow.activateWindow({href: 'prueba.swf', title: '', params: 'lightwindow_type=media,lightwindow_width=760,lightwindow_height=385' });");
}

Me quedo con tu solución y muchas gracias de nuevo. Interesante site, te acabo de agregar al Reader.

Saludos desde Madrid (España)

  Comentario por Carla Macías el Septiembre 17, 2008 @ 12:39 pm

Hola Lux,

Es posible usando el LightWindow. Lo que tendrás que hacer es especificar el tamaño del SWF dentro de la función de JavaScript (desconozco por qué no determina el tamaño de forma automática). Si todos tus SWFs tienen el mismo tamaño:

Texto Plano
JAVASCRIPT:
  1. function muestraImagen(archivo, titulo, descripcion, autor)
  2. {
  3.     myLightWindow.activateWindow({href: 'fotos/' + archivo, title: '2008 Acapulco, México', caption: titulo, author: autor, width: 600, height: 300});
  4. }

Si tienen distintos tamaños puedes pasar estos valores desde el archivo de Flash a la función de JavaScript.

Texto Plano
JAVASCRIPT:
  1. function muestraImagen(archivo, titulo, descripcion, autor, ancho, largo)
  2. {
  3.     myLightWindow.activateWindow({href: 'fotos/' + archivo, title: '2008 Acapulco, México', caption: titulo, author: autor, width: ancho, height: largo});
  4. }

Texto Plano
Actionscript:
  1. fotos_mc.foto1.onRelease = function() {
  2.     getURL("javascript:muestraImagen('foto7.jpg', 'Título', 'Descripción Foto #7', 'Código Metrópoli', '600', '300');");
  3. }

Saludos.

  Comentario por lux el Septiembre 17, 2008 @ 10:54 am

Excelente post, muy útil. Solo una duda, es posible que en vez de jpgs, se carguen un swfs en la ventana modal. Creo que tiene algo que ver con el parámetro type: media, pero no doy con ello.
Gracias.

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)