Layer e trasparenza

A partire dalla relase del Flash Player 6, Version 6.0r79, Internet Explorer non è più il solo browser a poter sfruttare il parametro di trasparenza del codice di incorporamento del filmato, parametro che rende possibile la sovrapposizione di oggetti html ad un filmato in flash e viceversa.
Attualmente, infatti, è supportato anche dai seguenti browser:

Windows Internet Explorer
Windows Netscape 7.0
Windows AOL
Windows Mozilla 1.0
Mac OS X IE 5.1
Mac OS X IE 5.2
Mac OS X Netscape 7.0
Mac OS X AOL
Mac OS X Mozilla 1.0
Mac OS X CompuServe

Html su flash

Consideriamo il caso di un popup menu in html. Abbiamo un'immagine, alla quale è associata una mappa, che permette la creazione di sottomenu inseriti all'interno di layer html. Il menu è stato creato con Fireworks, mentre il filmato in Flash è un semplice rettangolo con delle scritte: il colore grigio non è quello di fondo, ma quello di un rettangolo posizionato nel layer più in basso.
Il codice html si presenta così:

Abbiamo l'immagine, e sotto di questa il filmato: il posizionamento è dovuto esclusivamente al <br />.

Il risultato è questo: esempio 1

Come si può vedere, passando sui pulsanti del menu html, vengono aperti i sottomenu, ma questi rimangono sotto il filmato, nonostante siano in un layer con uno z-index superiore.

Aggiungendo invece i parametri per la trasparenza:

questo è quello che otteniamo: esempio 2

Adesso il menu appare sopra il filmato, e sopra il rettangolo grigio che, ripeto, non è il colore di fondo, ma una forma libera nell'ultimo layer flash (a dire, fondo trasparente non significa necessariamente vedere la pagina html attraverso il filmato)
Naturalmente, chi usa un browser che non supporta il wmode, continua a non vedere il menu.

Flash su html

Consideriamo ora il caso opposto, quello di un menu in flash (riprodotto in modo da essere identico a quello in html del Fireworks) che si sovrappone ad una immagine. Ora, mentre l'ingombro originale del menu in javascript è solo l'immagine (i sottomenu vengono a parte), l'ingombro del filmato deve comprendere anche lo spazio di apertura dei sottomenu.

Più chiaramente, se il menu chiuso è alto 20 pixel, mentre quando è aperto è alto 100, il filmato dovrà essere alto 100 pixel, altrimenti i sottomenu non verranno visualizzati. Posizionando quindi filmato flash e immagine uno sopra l'altro con il semplice <br>, questo è quello che otteniamo: esempio 3

Il codice html è del tipo:

Chiaramente, così non va bene. Infatti c'è una zona grigia del filmato (che questa volta non è un rettangolo colorato, ma semplicemente il fondo del filmato stesso), sotto i pulsanti principali del menu, che deve per forza sovrapporsi all'immagine. Il metodo è l'utilizzo dei layer html (conviene guardare attentamente il codice delle pagine), e la struttura è questa:

I layer in html ripropongono lo stesso effetto dei layer in Photoshop, o nel flash stesso. In html, per stabilire l'ordine di impilamento (quale layer è più alto, e quindi quale contenuto si vede sopra quello degli altri), si usa lo z-index: maggiore il valore dello z-index, superiore l'ordine di impilamento. Creiamo quindi i due layer, e spostiamo leggermente in basso (20 pixel) quello con l'immagine.

Nel caso appena descritto, l'immagine dovrebbe posizionarsi sopra la parte grigia del filmato, così come ci eravamo proposti. Quindi, filmato nel layer in basso, e immagine nel layer in alto: esempio 4

Niente da fare: il filmato in Flash, nonostante sia in un layer inferiore, si posiziona sopra l'immagine. Proviamo allora a settarne il codice di incorporamento con i parametri per lo sfondo trasparente: esempio 5

Sembrerebbe tutto a posto, a prima vista. L'immagine copre la parte grigia del filmato, e quindi riproduce la situazione del menu in html. Ma al rollOver sui pulsanti, i sottomenu restano nascosti.
Questo succede perchè l'immagine ha ora, grazie al wmode del filmato, l'effettiva preminenza che gli spetta, e copre giustamente il filmato: tutto, il filmato.

Quindi, l'approcio è giusto, ma sbagliato il metodo. Invertiamo l'ordine degli oggetti, e mettiamo il filmato nel layer superiore:

Come è prevedibile ( esempio 6 ), il filmato, che già si sovrapponeva all'immagine quando stava nel layer sotto, fa la stessa cosa anche quando si trova nel layer sopra. Ma settando il wmode con transparent, riusciamo ad ottenere quello che volevamo: esempio 7

Adesso l'immagine si sovrappone al fondo del filmato, che è trasparente, mentre i sottomenu, sfruttando il posizionamento nel layer superiore, si sovrappongono all'immagine. I pulsanti principali sono fuori dall'immagine, perchè nel codice html, il layer di quest'ultima è 20 pixel più in basso.

Questo sistema è funzionale, ma necessita anche di eventuali accorgimenti accessori. Per la chiusura dei sottomenu, ad esempio, ho utilizzato l'hitTest: una volta aperto, uscendo dal movieclip questo si chiude. Con il wmode transparent, invece, questa chiamata non funziona: infatti, una volta aperto un sottomenu, questo si chiude solo passando ad un altro pulsante (si può risolvere con un getTimer(), ma il senso è che il filmato non si accorge che il puntatore non è più sul sottomenu quando si sposta sull'immagine).

Senza il wmode

In alcuni casi particolari, non serve il wmode e non servono i layer per sovrapporre un oggetto html ad un filmato. Ad esempio, nel caso di un comunissimo select: esempio 8

Il select si sovrappone al filmato in qualunque browser, Explorer e Netscape, e rimane una mosca bianca nel campo della compatibilità.

Immagini e testo

Nel caso di immagini e di testi, invece, abbiamo necessariamente bisogno dei layer e del wmode. In questo caso: esempio 9, abbiamo l'immagine in un layer sopra il filmato. Per vedere l'immagine in primo piano, dobbiamo settare il fondo del filmato come trasparente: esempio 10

Stessa cosa appunto per il testo. Il layer è quello sopra, ma abbiamo bisogno del wmode: esempio 11