Carga una imagen (.jpg, .png) o película de flash (.swf), situandolo en el centro de la pantalla y por el encima del resto de objetos de la película. En un nivel inferior, dibuja una capa semitransparente, desviando totalmente la atención hacia el objeto que se quiere destacar.
Sintaxis
my_ThickBox.loadThickBox (URL: String, my_MovieClip: Sting);
Parámetros:
URL: URL absoluto o relativo del archivo SWF o JPEG que se va a cargar
MovieClip: Clip de película vinculado que se utiliza como animación de precarga (opcional)
Ejemplos
En el siguiente ejemplo, se carga una ampliación y se asigna un clip de película vinculado en la biblioteca con identificador ‘loader_mc’
-
var my_ThickBox: ThickBox = new ThickBox ();
-
my_movieClip_btn.onRelease = function () {
-
my_ThickBox.loadThickBox ('images/big/img01.jpg', 'loader_mc');
-
};
Los enlaces de abajo, muestran dos ejemplos prácticos:
Carga de imágenes
Carga de películas .swf
Requisitos para publicación
Debido al uso del objeto Stage, es imprescindible escribir las siguientes líneas en el primer fotograma de la película:
-
Stage.scaleMode = 'noScale';
-
Stage.align = 'TL';
Publicación de una película que utiliza la clase ThickBox:
Selecciona menú – Configuración de publicación (ctrl+Mayus. F12) y en la pestaña HTML, marca los siguientes valores:
Dimensiones: Porcentaje
Escala: Sin escala.
Descarga Thickbox
Thickbox se ha descargado 1,239 veces.
(9 votos, promedio: 4.89 sobre 5)
Loading ...
hola!!
los felicito por la pagina ya que he apredindo muchas cosas nuevas.
mi duda es con respecto al "thickbox" ,por que el swf o archvo no se queda en el centro de la pagina.
yo intente cargar el archvo demiante el "load movie"
al principio todo bien pero cuando se abre el archivo que contiene al thickbox se va a la izquierda superior.
espero puedan sacarme de la duda.
gracias y suerte
Hola Juan Antonio,
no entiendo tu pregunta, ¿que cargas con loadMovie? ¿la película que utiliza la clase?
Explicame un poco mas por favor.
saludos.
hola toni,
tengo 2 archivos galeria1 y galeria2,
lo que hice es, por medio de un clip de pelicula mande llamar a galeria2 (la que contiene el thickbox),la carga la hace bien y todo funciona sin promeblas.pero cuando lo publico html. se crentra al principio (galria1)pero al pasar a (galeria2) se mueve a la izquierda superior.apesar que el codigo fuente le indica al archivo que se centre en la pantalla.
el loadmovie lo uso para hacer la carga de archivos mas rapida,asi solo los mando llamar a un clip de pelicula
todos los archivos swf. donde se cargan(asi me evito hacer varios archivos html.)
saludos.
Hay varios motivos por lo que puede pasar lo que me dices:
1.Stage.align = 'TL'; cambialo por Stage.align = '';
2.El clip de película donde cargas galeria2.swf ¿lo tienes centrado en el escenario?
3. Quizá esté fallando la configuración de publicación de HTML.
Mejor pasame los archivos, tambien puede ser algo que no he previsto, si lo veo,podré hallar facilmente la solución.
Puedes enviarmelos al correo que hay en la sección de contacto.
saludos
Hola, es lo que estaba buscando pero me falla algo, pregunto para saber si es posible
Quisiera no poder cargar imagenes ni peliculas, quisiera poder cargar un texto, por ejemplo poder poner un iframe y llamar a un html donde tengo el contenido
podria ser? como se haría?
gracias!
Hola Malder,
la etiquetas HTML admitidas por flash player son bastante limitadas, pero se puede. Para ello, tienes que escribir el código HTML en un archivo con extensión .txt y cargarlo con la clase LoadVars().
Te dejo un enlace que te será muy útil:
Etiquetas HTML incorporadas admitidas por Flash Player
Saludos
uff si que son pocas, entonces para este ejemplo de thickbox no podria hacer que hacer un archivo html en vez de un swf o imagen?
lo que estoy haciendo es un mapa en el que al hacer click en una ciudad te salga una ventana con unos datos, entonces no quiero un popup normal quiero algo mas curradillo y que quede mejor, del tipo a este tip que habeis puesto entiendes.
Creo que te vendrá muy bien esto:
dynamicwindow
saludos
Hola que tal?
Me parecio muy, muy, muy util esta herramienta que haz publicado, ese tipo de popup me encanta, hace tiempo estaba buscando algo asi para mi pagina, descargue el archivo e intente acoplarlo a mi .fla pero no pude de verdad que nose que es lo que pasa, cuando exporto la pelicula me sale este error, podrias ayudarme?
**Error** Símbolo=button2, capa=actions, fotograma=1:Línea 1: No se pudo cargar la clase o interfaz 'ButtonClass'.
stop();
Hola Carlos,
¿estás seguro que el error lo provoca la clase thickBox? Creo que ese error viene de otro sitio. ¿Como haces para usar la clase?
saludos
Hola,
bueno nose si sea la marena mas adecuada para hacerlo, agarre y abri el galery.fla del archivo y pase todos los archivos que salen alli, los simbols, loader etc a la biblioteca de mi .fla pegue el actionscript en el primer fotograma, hice lo de las propiedades de publicacion, pero en este caso lo que vendria siendo el boton, lo cree yo, puse un texto y lo converti en movieclip y le coloque el mismo nombre de instancia osea img1, al parecer todo se veia bien, pero al exportar me da el error, y cuanco pruebo la pelicula el fulano boton no hace ni siquiera la accion de hover, es que bueno en tu post no me explica muy bien como agarrar y utilizarlo en una pelicula ya creada, nose creo que yo que el post pudiera ser mas orientado para implementarlos en nuestras webs, je, bueno nose digo yo.
creo
Vamos a ver, ejemplo de utilización supersencillo. Ingredientes:
2 imagenes ( una pequeña y su equivalente en grande)
Modo de empleo:
1. crear un nuevo objeto thickBox, para ello, en el primer fotograma de la pelicula escribirás:
2. En una capa nueva, importa la imágen peqeña.
3. Conviertes la imagen pequeña en un clip de película y como nombre de instancia de pones imagen_mc
4. Asignas eventos de botón (punto 5) al clip de película que contiene la imagen; al hacer clic, se abre la ventana thickBox.
5. Este código, lo pones en el primer fotograma de tu película o en el fotograma donde esté el clip de película que contiene la imágen.
Eso es todo, de todas maneras, mirate los ejemplos y las indicaciones sobre publicación que hay en el post.
saludos
Ok
muchas gracias por responder tan atentamente, voy a intentarlo a ver que fue lo que paso que no funcionaba, ahora una pregunta, veo en el archivo de descarga un file llamado Thickbox que es un action script de flash, que hago con eso?
Ese archivo contiene la clase y tienes que ponerlo en la misma carpeta del .fla.
saludos
Hey amigo un par preguntitas a ver si comienzo con buen pie de nuevo,
- Esa utilidad es solo valida a partir de Flash 8 ? ( es que trabajo en FlashMx 2004 , pero estos intentos los he hecho con la Version 8 )
- es muy necesario hacer los cambios en las propiedades de publicacion ? ( Dimensiones: Porcentaje / Escala: Sin escala )
MX 2004 ya corre con actionsScript 2, pero la clase thickBox utiliza la clase Tween que si es exclusiva de flash 8.
El cambio en las propiedades de publicación, es necesario para que la clase funcione correctamente.
Se podría hacer una versión para 2004, el problema, es que seguramente tu tienes mas urgencia que yo tiempo. Si puedo la modificaré.
saludos
Hey soy yo otra vez, jeje disculpa la molestia pero ya avance, logre que abra la imagen, peeerro, ok la carga, pero despues de abrirla sigue estando el aro ese que sale girando (loader no?) sigue dando vueltas sobre la imagen, y cuando le doy click encima para que desaparezca no se quita, porque?
Pues ni idea, mejor enviame el .fla y le daré un vistazo.
hola que tal? nose si me recuerdas, de dudas anteriores con este tema,
ya logre incorporar los archivos y codigos a mi fla y lograr exportarlo sin que me salga ningun error como te decia antes, ahora lo que pasa es que cuando abro la pelicula y doy click al "boton", ok se carga la imagen pero aun despues que aparece sigue dando vueltas el "circulito" del loader, y le doy click para que se cierre como deberia pasar y no pasa nada, sigue dando vueltas el loader,
sabes porque pasa eso?
Hola Carlos,
pensé que ya lo tendría resuelto. Enviame un .fla para que vea donde está el fallo, en principio si no has modificado la clase no se porque te ocurre. La única forma de esncontrar el erro es viendo tu code.
saludos
Hola, muy bueno el tutorial, pero cuando abro el html en firefox la capa negra con alfa del fondo no ocupa todo la pantalla, ni el swf se ve centrado. Alguien tiene idea porqué puede ser?
saludos.
Hola Cristian,
Asegurate de haber configurado correctamente los parámetros de publicación:
Publicación de una película que utiliza la clase ThickBox:
Selecciona menú – Configuración de publicación (ctrl Mayus. F12) y en la pestaña HTML, marca los siguientes valores:
Dimensiones: Porcentaje
Escala: Sin escala.
Saludos
Hola toni.
Eres fuente de inspiracion para los que empecamos en esto.
Querria saber como podemos añadir un comentario de texto a cada imagen. He estado dandole vueltas pero me lio.
Si conoces una manera sencilla seria de gran ayuda.
Por cierto. ¿Se podria hacer la version 2.0 que en vez de tener que añadir cada imagen en el swf lo cogiera de un archivo .xml? Seria la ****tia.
AH!
y otra cosa, me he fijado que lo que hace el flash es leer el ancho y el alto de la pantalla en vez de la ventana del navegador. Se podria hacer que lo que leyese fuese el tamaño de la ventana (como hace lightbox). No se, tu eres el experto
Hola Dani,
se puede hacer todo lo que me comentas, dejame ver si saco un momento y lo hago. En cuanto al tamaño, cuando ejecutas la película en un navegador, las medidas son las del navegador (fijate en el ejemplo)
Un saludo.
Gracias Toni.
Es curioso pero a mi en el ejemplo no me hace caso. Toma la medida del navegador pero cuando esta a tamaño completo. Si hago la ventana más pequeña se descruada (ya que toma esa medida). Quiza sea porque uso Firefox? Tambien lo he probado en Safari(trabajo con mac en el curro).
En casa lo probare con mi pcp a ver que tal.
De todas maneras gracias por tu atencion y servicio. A ver si cojo nivel y puedo echarte yo una mano XD
Yo tambien uso Firefox, pero con PC, podría ser un problema de compatibilidad con mac, veré algún compañero que trabaje con mac, a ver si encuentra solución.
Toni: genial el tuto. pero tengo el siguiente problema.
al ejecutar el .swf desde un boton por Ej.
var cb:ClipBox = new ClipBox ();
my_btn2.onRelease = function () {
cb.loadClipBox('trabajos.swf','loader_mc');
};
este se abre bien, el loader funciona correctamente. pero cuando se abre la pantalla completa esta es un botón que ocupa toda la pantalla, menos el fondo que es un negro con un alhpa, lo que quiero lograr es que ese botón sea pequeño para poder interactuar en esa sección que se llama servicios.swf
espero que me puedas ayudar por que estoy mareado.
Muchas Gracias,
Juan
Hola Juan,
Como medida de urgencia,puedes arreglarlo eliminando la siguiente línea de la clase:
Solo que tendrás que poner un botón en el flash que cargas para cerrarlo. Se podría modificar la clase para que incluyera un botón más pequeño (lo apunto como deberes).
Un saludo.
ya intente poner un boton pero probe de cerrar el .swf y no puedo, puedes ayudarme con eso!!
Gracias.
Juan voy a intentar sacar tiempo para incluir el botón en la clase, será lo mejor.
Si quieres, puedes poner en tu botón:
Y se descarga el .SWF, el problema, es que queda la pantalla oscura de la clase. Si no tienes mucha prisa, en la siguiente versión lo soluciono poniendo el botón en la propia clase.
saludos
Toni gracias por tu ayuda pero como bien dijiste me queda el fondo. como hago para que salga el swf y el fondo. No se me ocurre nada!!!
Gracias por tu tiempo.
Saludos
Hola Juan como te comento anteriormente, voy a cambiar la clase para que incluya el botón, paciencia.
saludos
Hola!
Lo primero mil gracias por publicar este material. Es todo un lujo.
He probado la clase pero, al igual que Carlos R, al clickear el boton me aparece la precarga y la imagen correctamente pero a la hora de cerrar la imagen sigue sin funcionar, ademas de permanecer el loader activo. Lo curioso es que al hacer click sobre la imagen el fondo degradado se hace transparente, lo que indica que si reconoce el clip y el cargador, pero no ejecuta el unLoadMovie.
Si encontraste la solución para Carlos R, podrías publicarla? quizás ahí encuentre yo la solución a mi problema.
Mil gracias de nuevo
Un Saludo
:)
Bueno, lo primero que me gustaria aclarar, es que la clase funciona correctamente, pero no se ajusta a vuestras necesidades.
Voy a modifcar la clase y la voy a publicar en el blog, sereis notificados de ello via e-mail.
saludos
Una duda
¿se pueden poner tantas imagenes como quiera en el la misma galeria?
Hola Ismael,
Por supuesto, puedes poner todas las que quieras.
saludos
Toni, muy bueno, pero tengo un problema.
He puesto este efecto junto con el de Fondo de pantalla completa (que tienes en el blog) y el tema es que cuando me opaca el fondo me queda siempre alineado a la izq arriba y el área opacada es la real y no el resize que le hice al fondo, como lo puedo arreglar???
Gracias.-
Hola no se si a esta altura alguien me respondera, pero bueno ahi va:
Estoy usando thickbox en un proyecto el cual son una serie de galerias de fotos, mediante xml creo dinamicamente una barra mc_thumbnails en un clip vacio que a su vez contiene cada thumb, estos thumbs llaman a thickbox y le pasan el valor del xml.
Hasta aqui ningun problema, funciona.
El problema es que tanto mi barra de thumbnails como thickbox usan getNextHighestDeep (o como se escriba), entonces la barra de thumbs sigue "digamos activa" y si lanzan mas thickbox sin cerrar el actual se solapan y no se borran.
A ver si me podeis ayudar.
Muy buen trabajo Toni, y la reforma de la web tiene un excelente aspecto y velocidad.
Gracias
ola,
have you try to use your component noticias com thickbox?
saludos
Leandro Lemos
Tony, a mi me sucede lo mismo... carga y muestra la imagen en grande, pero luego al hacer click no se va... lo mismo para la animacion del preloader. Revise la Clase y por lo que veo no actuan los removeMovieClip.
Si hiciste una mejora, please enviamela por mail.
Saludos y gracias
Pues a mi me funciona MUY MUY MUY bien
no tuve problemas de ninguna clase para usarlo
y eso q soy practicamente novato
neofito del AS
jejeje
Escuchen,
probando descubri algo extraño pero cierto. Al principio duplique el .fla original y todo OK, pero luego, cuando pasaba el AS a mi movie, sucedia lo que escribi en el comentario anterior. Ahora bien, fui pasando las cosas desde MI movie a la copia de la galeria de Tony, y lo que descubri es que deja de funcionar al pasar un mc que tiene adentro el componente de scroll UIScrollBar.
Raro, pero asi es... si paso el mc sin wel componente adentro, todo bien... espero les sirva de ayuda.
Saludos
No sé si os puede interesar, pero he creado un .fla que hace este mismo efecto, pero con poca programación. Lo he hecho así porque no tengo Flash 8, así que tenía que hacerlo de otra manera con Flash MX 2004.
El resultado es similar, aunque yo no he metido precarga en las imágenes.
Lo he hecho jugando con movieclips en distintas capas, para conseguir el cuadrado blanco, el fondo oscuro, etc.
Supongo que será mucho más laborioso y peor que el aquí expuesto, pero es una alternativa para los que no tengáis el Flash 8. Además, siempre podéis cogerlo y modificar todo lo que queráis, para mejorarlo.
Un saludo.
Veo que a muchos le ha pasado el mismo inconveniente que a mi, que permanece el loader y la imagen no se va al darle click,
porque las cosas buenas son tan complicadas????
ahhh, no me voy a quedar tranquilo hasta que lo pueda usar!!
El problema,es que he hecho muchas pruebas, pero a mi no me pasa. Si alguien fuera tan amabable de enviarme sus archivos para ver donde está el fallo.
Gracias
Carlos R, leíste mi comentarios anteriores... pude solucionarlo, el tema era que dejaba de funcionar al poner el la misma pelicula el componente UIScrollBar.. fijate si vos estas usando ese componente en tu movie.
Ojo, si te dejo de funcionar e intestas sacarlo sigue sin funcionar...tenes que sacarlo ANTES de compilar con el ThickBox
Vaya, hice todo tipo de pruebas, excepto usar componentes. Acabo de ver que en efecto, cuando la película cargada en el thickbox contiene un componente su coportamiento es extraño.
Hola que tal? si acabo de leer el comentario, pero no entiendo como hacer eso, no lo tienes asi directo el fla para usarlo? o bueno nose si sera muy tedioso explicar un pelin mas detallado como corregir el fallo, gracias
Hola como les va? Bueno primero Toni gracias por tu pag, gracias a after-hours me anime a aprender flash (antes hacia las paginas solo con dreamweaver y/o php) ahora solo con flash
me fui al extremo, bueno primero que el thickbox esta genial, y lo utilice en esta pagina, (miren galeria) anda perfecto, a mi me pasaba lo mismo, no cerraba cuando hacia click en la imagen, pero probe lo que dijo Leo y se soluciono, el swf que contiene el thickbox, no tiene que tener NINGUN componente, yo tenia solamente el loader, lo borre de la libreria y me anda a la perfeccion, asique la solucion mas rapida es borrar todos los componentes.
Un saludo
Juampi
pd: gracias toni por tu dedicacion y por el blog
Ah! una cosa mas, si ponen una imagen que no se encuentra en la carpeta, tampoco les va a cerrar, asique asegurense de tener todas las imagenes
que creo que nadie se las va a olvidar pero por las dudas.
Saludos
Juampi
Hola Juampi, lástima que no pusiste la página para ver la galeria
En cuanto al fallo de los componentes, todavia no miré que pueda ser, pero el otro fallo (cuando no existe la imagen) es sencillo, asi que lo arreglo en brebe.
Saludos y gracias.
Hola toni, jeje la pagina se abre cuando clickean en Juampi, pero aca va http://www.adrianberra.com.ar
se la hise a un amigo que es musico compositor solista =)
de paso escuchenlo que les va a gustar =)
Una pregunta, si saben, me gustaria que la imagen que se abre (siempre usando thickbox sin ninguna modificacion ni nada) si se puede clickear con el boton derecho y poder copiarla, o guardarla.
Saludos
Juampi
Hola Toni , increible este action thickbox me funciono de maravilla, pero tengo una duda ,si acaso se pudiera hacer con varias imagenes, pero ir avanzado en el mismo thickbox, algo parecido al lightbox para html y java, avanzado o retrocediendo en orden las imagenes..se puede hacer o no?
de antemano muchas gracias toni
Hola! Esta muy bueno el thickbox, ahora mi pregunta...han tratado de que en ves de image_mc tenga comportamiento de boton, el comportamiento lo tenga dentro de el swf player (en este caso flash.swf). Yo he estado jugando con eso pero no me munciona el commando que le puse al closed button en el flash.swf. Este fue el actionscript que le puse a mi button on(release) {
fscommand ("quit");
}
Para que cerrara el image_mc pero no me esta funcionando. Alguien me podria ayudar en esto?
Gracias
Le cambie el actionscript a mi button por este:
Actionscript:
1.
this._parent.unloadMovie()
Pero toda via sigo ciendo el white box y el alpha gris. Veo que alguien le paso lo mismo que ami...Tienes una nueva version con este efecto?
espero tu contestacion
vanessa
hola, como les va, tambien he utilizado el thickbox muy bueno el tutorial, y funciona muy bien para mostrar imagenes, pero tengo una duda, como puedo hacer para que el image_mc no ocupe todo el mc si no que sea un botón que me permita regresar al raiz para seguir navegando?... yo intente sacar el codigo image_mc.onRelease = destroy; y claro puedo navegar en el interior de la pelicula pero como puedo crear un btn que la cierre? porfavor ayuda, gracias
Hola nazzai, lo que pides, está pendiente de una modificación. Hasta entonces, puedes consultar en el foro a ver si alguien lo intentó.
Gracias por tu interés.
Un saludo.
hola!
quería saber si alguien ya encontró la solución a la carga con swf y poder hacer algo en esos swf
he intentado sin exito modificar la clase pero se sigue manteniendo el fondo.
:(
Saludos
www.laatlantida.eu/prueba/index.html
aqui tienes una prueba mirala a ver www.laatlantida.eu/prueba/index.html
user y clave admin
hola toni, el thickbox es una pasada, gracias
El problema que me da es que si centro la pelicula en la pantalla mediante css (firefox) si las fotos son más grandes que la película se cortán (solo se ve lo que aparece sobre el área de película)
#container {padding:0px; position: absolute; width: 760px; top: 50%; margin-top: -225px; left: 50%; margin-left: -380px;}
¿te ha surgido este problema?
Gracias
hola el thickbox funciona pero cuando inserto el swf en una tabla en dreamweaver solo muestra esta magia del tamaño del swf no el tamaño de escritorio la gracia es q toda la ventana del navegador se ponga tenue con la imagen y eso no funciona como se puede mejorar eso
Lo siento One,
pero lo que pides, es imposible, no obstante, hay herramientas escritas en javascript que te permiten hacer lo que quieres, busca en google thikbox.
saludos
vale toni habra q sumergirse en el mundo del codigo
cualñquier cosilla q sepas no dudes en agregarla te pasaste
excelentes recursos los que compartes toni, dejame felicitarte por esa gran labor.
Referente al tema,hay alguna manera de centrar la muestra de la foto ampliada? logre cargar la pelicula de la galeria en un movieclip con scroll, todo funciona muy bien, pero la pelicula principal tiene por defecto el Stage.scaleMode = 'noScale'; y la alineacion en el centro absoluto, lo cual hace que se carge las fotos ampliadas al lado derecho y un poco hacia abajo.
Hay alguna manera de que todo quede centrado?
Desde ya muchas en lo que mep uedan colaborar.
Hola,
Intente usar el thickbox con componentes y me paso el mismo problema.
Para los que quieran cargar el swf y poner un botón intenten que el swf cargado bloquee el _root, _lockroot=true, y así se puedan utilizar las funciones del mc padre.
Saludos,
Hola!!
Me estoy volviendo loco para solucionar un problema que también planteaba juan antonio. Pues bien, mi pagina web (mi stage) tiene unas medidas de 972x550, sin escala y en porcentage.
En el frame 64 he puesto un botón que acciona el ThickBox. Cuando aparece dicho botón, mi stage se coloca en la esquina superior izquierda (y el clipbox se habre centrado correctamente) pero evidentemente esto no me interesa.
Si cambio o quito el parametro Stage.align = 'TL'; entonces mi stage se mantiene en el centro (donde yo quiero) pero el ThickBox se abre en la esquina inferior derecha (Obviamente, tampoco me intesera).
Es como si el ThickBox estuviera vinculado al stage por la esquina superior izquierda.
POR FAVOR si alguien me puede ayuda les estaré eternamente agradecido es URGENTE!!