Flash por debajo de los menús

Esta es una duda con la que todavía me topo muchas veces a pesar de estar bien documentada. El caso es que muchas veces cuando tenemos algún contenido en flash, como un video, banner interactivo, menú, etc. y queremos que otro contenido en html se expanda sobre él nos encontramos con que no importa qué hagamos el flash siempre se ve encimado y tapa lo que queremos que se muestre.

Para comprender lo que está pasando necesitamos tener en cuenta que los plugins siempre se ejecutan independiente de la página a menos que le digamos otra cosa. A pesar de que nosotros lo vemos como parte de la página lo que el navegador hace es crear una ventana encima de nuestra página pero que no es parte de ella, y le pasa el control al plugin de flash o lo que sea para dibujar ahí todo lo que quiera. Es como poner una pintura en un cuadro sobre la pared.

Lo que nosotros queremos hace es que raye las paredes en vez de poner este cuadro encima. Para lograr esto flash reconoce una variable que se llama wmode. Esta variable puede tener los valores transparent, opaque o window. Si no le indicamos nada wmode toma el valor window y éste es el que causa que flash se ejecute en su propia ventana independiente.

O sea que la solución que buscamos es poner wmode en transparent u opaque. La diferencia entre estos dos es que transparent te permitirá tener áreas transparentes en el flash, que permitirán que se vea el fondo de la página. Por ejemplo, puedes dibujar una dona con un hoyo por el que se vea lo que está abajo en la página html. El modo opaque no se transparenta hasta la página, sino que la cubre (pero le puedes poner cosas encima).

Aunque Adobe recomienda el uso de transparent, este método ocupa más capacidad de procesamiento y puede hacer más lento tu flash en algunas computadoras. Es mejor ponerlo en opaque, hacer pruebas y si algo no funciona bien entonces cambiarlo a transparent.

Para cambiar el valor de wmode simplemente tienes que indicarlo en el <object> y <embed> que estés usando para llamara a tu película:

<object bla bla ... >
...
<param name="wmode" value="opaque" />
...
<embed bla bla ... wmode="opaque" ... />
</object>

¡Y ya!