Crysfel’s Blog
Flash y el z-index
Tuesday, August 28, 2007, 11:56:44 am
CSS, Desarrollo, xhtml
El problema
Recientemente me tope con este problema, el cual ocurre cuando tienes una animación flash (swf) incrustado en el sitio, luego, al querer poner una capa absoluta que esté sobre la animación flash, simplemente el flash siempre queda sobre cualquier otro elemento, inclusive si a la capa le pones un zindex de 100 o 1000.
La solución a este problema es sencilla, pero primero hay que explicar un poco del funcionamiento del reproductor de flash.
Los diferentes modos
A partir de la versión 6 del reproductor, Macromedia (ahora Adobe) introdujo lo que se le conoce como el wmode, este parámetro le dice al reproductor de que forma pintar el contenido de la película, existen tres modos.
Window es el modo por default, utilizando este modo el reproductor optimiza el dibujado, lamentablemente con este modo seleccionado la animación siempre esta sobre todos los demás objetos del sitio.
Opaque permite el manejo de la propiedad z-index, pasando el control del dibujado al explorador, de esta manera es posible poner elementos sobre las animación flash.
Transparent permite poner transparente el fondo de la película, y a su vez nos permite manipular la pila del orden, se recomienda utilizar el modo anterior a este si no es necesario poner transparencia al fondo de la animación.
La solución
Con esto en mente el código para insertar una película flash que pueda ser manipulada en la pila del orden quedaria de la siguiente manera.
<param name="allowScriptAccess" value="sameDomain" />
<param name="wmode" value="transparent" />
<param name="movie" value="wp-content/themes/pulso/images/banner.swf" />
<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
<embed wmode="transparent" src="wp-content/themes/pulso/images/banner.swf" quality="high" bgcolor="#ffffff" width="800" height="150" name="banner" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Es importante mencionar que únicamente se le agrega este parámetro al codigo generado por flash.
Y dentro de la etiqueta <embed> se le agrega esta propiedad
Con esto es suficiente para solucionar este pequeño y molestoso bug.
Referencia
http://kb.adobe.com/selfservice…sliceId=2
18 Respuestas para este tema
tog000
Thursday, September 6, 2007, 12:05 pm
Oh joven crysfel! que placer encontrar su sitio.
El metodo que describiste funciona muy bien en Safari e Firefox en windows, pero en linux, no hay forma alguna de solucionarlo.
Suerte
Diego
Monday, September 17, 2007, 8:33 pm
Este del flash no lo sabia para nada!!!, muchas gracias!!!!
acegogo
Monday, April 21, 2008, 5:43 am
MUCHISIMAS GRACIAS, POR FIN UN SITIO DONDE LO EXPLICA CON CLARIDAD Y SIN MIL ROYOS
+REP!!!
Dav
Wednesday, June 4, 2008, 2:10 pm
chido, ha sido de gran ayuda.
saludos
Dealing with Flash’s “Z-Index” | leonardoPicado.com's blog
Friday, August 22, 2008, 12:40 pm
[…] http://www.crysfel.com/index.php/2007/08/28/flash-y-el-z-index/ […]
kometo
Saturday, August 30, 2008, 12:58 pm
muchisisisisisma gracias kompa me fue util un 1000000000000 %
deberas mil gracias!
saludos desde colombia
Vistor
Thursday, September 25, 2008, 2:22 pm
Cumpa genial me ha sido de gran utilidad.
Sindy
Wednesday, November 12, 2008, 4:18 pm
tu post me salvo el dia
buen tip
Rosy
Monday, November 17, 2008, 3:05 pm
Gracias por tu ayuda logre hacer que el menu se ponga arriba de la animación
Juan Manuel
Wednesday, December 3, 2008, 7:35 am
Excelente amigo gracias por su dato me funciono a la perfeccion.
Gilberto Urdaneta
Sunday, March 15, 2009, 9:30 pm
Para ser bueno en algo debes aprender todo sobre ese algo, eso mi hermano, es, lo que lo hace a usted bueno en esto.
Mil gracias por este tips
Dario21
Wednesday, May 6, 2009, 4:55 am
Muy bueno. Me ha servido perfectamente para poner un div sobre un flash que era lo que quería…
en parte.
El problema ahora es la captura de eventos. Si wmode = transparent, el onclick sobre el div responde, pero si es opaque no.
Por supuesto, en mi caso tengo que hacerlo opaque, pero bueno
Dario21
Wednesday, May 6, 2009, 4:57 am
Añadido:
Si el div tiene fondo o contenido (un color de fondo, texto, etc) si captura el onclick, aunque sólo sobre ese contenido, en ningún otro sitio. Cuando quieres un div transparente sobre el flash…
David Cardona
Tuesday, May 26, 2009, 12:01 pm
De verdad vale la pena darle muchas gracias por este artículo, llevaba 4 horas cambiando y cambiando cosas, con este post en 3 minutos solucione el problema.
De verdad muchas gracias
rapcylix
Thursday, June 11, 2009, 4:59 pm
No me funciono??
rapcylix
Thursday, June 11, 2009, 5:00 pm
Con el navegador firefox en ubuntu???
richard_site
Thursday, June 25, 2009, 6:30 pm
Me salvó con firefox, bien documentado, gracias.
–
http://www.richardsite.com.mx
MATIAS
Thursday, July 2, 2009, 6:36 pm
no funciona, hice todo paso a paso, no se que pasa ni con IE ni con FIREFOX