Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 40 di 44
  • livello principiante
Indice lezioni

Sovrapposizione di layer

Sovrapposizione di oggetti html ad un filmato Flash, e viceversa
Sovrapposizione di oggetti html ad un filmato Flash, e viceversa
Link copiato negli appunti

SCOPO

Sovrapporre oggetti html ad un filmato Flash

STRUMENTI

Tag object/embed | Tag wmode

METODO

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ì:

<img name="menu" src="menu.gif" usemap="#m_menu" alt="">
<map name="m_menu">[...]</map>
<br>
<object>[codice di incorporamento del filmato]</object>

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

visualizza l'esempio

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:

<object

classid="[...]" codebase=[...]

width="300" height="150">

<param name=movie value="filmato.swf">

<param name=quality value=high>

<param name=bgcolor value=#CCCCCC>

<param name=wmode value=transparent>

<embed

src="filmato.swf"

width="300"

height="150"

bgcolor=#CCCCCC

wmode=transparent

quality=high

type="[...]" pluginspage="[...]">

</embed>

</object>

visualizza l'esempio

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:

visualizza l'esempio

Il codice html è del tipo:

<object>[...]</object>
<br>
<img src="immagine.gif">

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:

<div
id="Layer1"
style="position:absolute; width:300; height:150; z-index:1">
[codice di incorporamento del filmato]
</div>
<div
id="Layer2"
style="position:absolute; width:300; height:150; z-index:2">
[codice di incorporamento dell'immagine]
</div>

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:

visualizza l'esempio

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:

visualizza l'esempio

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'approccio è giusto, ma sbagliato il metodo. Invertiamo l'ordine degli oggetti, e mettiamo il filmato nel layer superiore:

<div

id="Layer1"

style="position:absolute; width:300; height:150; z-index:1">

[codice di incorporamento del filmato]

</div>

<div

id="Layer2"

style="position:absolute; width:300; height:150; z-index:2">

[codice di incorporamento dell'immagine]

</div>

Come è prevedibile,

visualizza l'esempio

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:

visualizza l'esempio

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:

visualizza l'esempio

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, abbiamo l'immagine in un layer sopra il filmato:

visualizza l'esempio

Per vedere l'immagine in primo piano, dobbiamo settare il fondo del filmato come trasparente:

visualizza l'esempio

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

visualizza l'esempio

FILES

Visualizza gli esempi:
01

02

03

04

05

06

07

08

09

10

11

menu

movie

scarica l'esempio

Ti consigliamo anche