sovrapposizione di html con flash

Non so quanto folle sia questa idea, vedo che è abbastanza usata in senso inverso rispetto al titolo del post, ovvero sovrapposizione di flash ad un contenuto html, per fini pubblicitari. Quando aprendo una pagina, ci si vede comparire un messaggio pubblicitario animato col bottoncino chiudi o similare, molto probabilmente abbiamo un contenuto flash sovrapposto ad un div con contenuto html. La logica è abbastanza semplice, si lavora sui posizionamenti assoluti dei div, sugli z-order e sull'attributo wmode dei tag di embedding settato su transparent.




A me è capitato invece di fare la scelta inversa. Devo dire che ci ho pensato su un bel pò, qualche dubbio è rimasto, ma alla fine ho seguito quella strada.

Praticamente dovevo realizzare un sito compatto con alcune parti animate, come ad esempio il menu, un motivo floreale, immagini in dissolvenza, e, centralmente e in parte in modo sovrapposto alle parti flash, il contenuto delle singole pagine.

Siccome la parte flash non era circoscrivibile in una zone separata dal resto, come ad esempio su di una colonna, ma faceva da motivo dominante di sfondo con elementi cliccabili come il menu, e siccome per qualche motivo ancora non ben compreso :) il cliente non lo voleva tutto in flash, ho provato a sovrapporre il contenuto html, fra l'altro parliamo di un sito dinamico con pannello di amministrazione, a quello flash.

Credo che l'unico vero vantaggio di una tecnica costruttiva di questo tipo sia quello di poter disporre delle potenzialità di flash da un lato, e di poter mettere a disposizione dei motori di ricerca codice sorgente con del testo html indicizzabile dall'altro.

Anche rispetto ad alcune soluzioni Ajax che permettono di caricare testo senza dover ricaricare le pagine, abbiamo il vantaggio appunto di rendere visibile nel codice sorgente della pagina del testo html.


Vediamo in dettaglio un esempio concreto di sovrapposizione:


Creiamo una pagina html e settiamo lo stile:



< style >

body{

margin:0;
padding:0;
background:#000;
color:#FFFFFF;
}


#bgFlash{
width:948px;
height:658px;
z-index:10;
position:relative;
margin-left:-474px;
margin-top:5px;
text-align:center;
top:0;
left:50%;
}


#htmlContent{
position:absolute;
margin:0;
z-index:20;
width:200px;
height:300px;
visibility:hidden;
top:50px;
}

*html #htmlContent{
margin:0 0 0 -474px;
}

*:first-child+html #htmlContent{
margin: 0 0 0 -474px;
}







Il div che conterrà flash, #bgFlash, ha posizionamento relativo e z-index inferiore al div che contiene l'html, #htmlContent. Quest'ultimo ha un posizionamento assoluto


Nel corpo della pagina inseriremo:


1 - Il div che contiene flash "< div id="bgFlash" >"
2 - Il contenuto flash al suo interno
3 - Nidificato all'interno del div "bgFlash" inseriamo il div #htmlContent con il contenuto html
4 - chiudiamo i due div :)

< body >
< div id="bgFlash" >
//contenuto flash
< div id="htmlContent" >
Contenuto html
< /div >
< /div >


Qui potete trovare un esempio di sovrapposizione fra flash e html


Le variazioni sul tema possono essere interessanti. Ad esempio si può prevedere, come nel link riportato, che il contenuto html sia disposto in un div con la proprietà visibility settata su hidden, e richiamare poi da flash un javascript che lo renda visibile, magari sincronizzando la sua entrata con l'animazione di ingresso della pagina, oppure si può prevedere di non sviluppare, in determinate sezioni, il contenuto html facendo tutto nell'interfaccia flash (esempio per una fotogallery o simile)... e via discorrendo.



Continua...