Ed iniziamo con questo articolo una serie di guide e di tips & tricks per eventuali webmasters alle prime armi che passassero da queste parti. Onestamente non so bene neanche io come (e se) si svilupperà la cosa. Ma come sempre l’importante è iniziare no?
L’idea mi è venuta grazie ad una domanda posta da un utente sul forum di MegaLab.it. Vedendo come operazioni apparentemente molto semplici possano sembrare dei problemi insormontabili ad un neofita mi ha spinto a cominciare questa nuova “rubrica”.
Ed adesso andiamo al tema di oggi: “Come creare in modo semplice e veloce una pagina web in cui un filmato flash farà da cornice alla nostra pagina vera e propria”.
Il trucchetto si rivela utile soprattutto per chi il Flash non lo conosce proprio al meglio, visto che la soluzione migliore sarebbe sviluppare tutto direttamente con questo programma sfruttandone le pressochè illimitate possibilità.
Per realizzare il nostro progetto ci limiteremo dunque al solo uso di codice (x)HTML e CSS e, in particolare, alle specifiche XHTML 1.0 Strict e CSS 2.1 così da garantire un’ottima compatibilità cross-browser e cross-platform (nonostante quell’ XHTML 1.0 Strict possa far pensare diversamente qualche profano 😉 ).
Per ottenere l’effetto desiderato, ovvero avere due livelli sovrapposti in vario modo esattamente come siamo abituati a vedere in programmi di grafica come Photoshop, la specifica CSS2 infatti ci mette a disposizione la proprietà z-index.
Tutto quello che dobbiamo fare è quindi creare due box posizionati assolutamente ed ai quali attribuire dei valori diversi per lo z-index (maggiore per quello che deve essere visualizzato sopra). Tuttavia questo non è ancora sufficiente in quanto limitandovi ad inserire il vostro file .swf tramite il codice standard (in genere fornito dalla routine di esportazione stessa) noterete che invece di fare da sfondo al livello superiore verrà visualizzato in primo piano coprendo la vostra pagina.
Questo comportamento, apparentemente inspiegabile, è in realtà normale in quanto, affinchè il plugin flash del vostro browser posizioni e visualizzi il filmato nel modo desiderato, è necessario che aggiungiate al codice fornito per il suo inserimento (ammesso che si tratti di codice XHTML valido) la seguente stringa:
<param name="wmode" value="transparent">
ottenendo quindi un codice di questo tipo:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="movie.swf" /><embed type="application/x-shockwave-flash" width="100" height="100" src="movie.swf" wmode="transparent"></embed></object>
A questo punto avrete ottenuto l’effetto desiderato senza dovervi scervellare a gestire il tutto tramite il ben più complicato Flash. Comodo no? 😉
Ed ecco infine il codice completo di una pagina di esempio in cui un filmato preso da YouTube farà da sfondo al testo:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Test1 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
#box1 { background: #ffffff; width: 450px; position: absolute; top: 120px; left: 30px; z-index: 1; }
#box2 { background: #f3f3f3; width: 300px; position: absolute; top: 160px; left: 90px; z-index: 2; }
-->
</style></head>
<body>
<div id="box1">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/dZWl-SOC5jQ" /><embed type="application/x-shockwave-flash" width="100" height="100" src="http://www.youtube.com/v/dZWl-SOC5jQ" wmode="transparent"></embed></object></div>
<div id="box2">Come volevasi dimostrare questo testo viene visualizzato sopra il filmato</div>
</body>
</html>
Atracus
/ 20 Marzo 2008Grazie mille. Cercavo giusto un modo per fare una cosa del genere ma con Flash era impossibile riuscirci 😥
Continua così ti prego 🙂
Engelium
/ 22 Marzo 2008Grazie. Sono contento che l’articolo ti sia servito. Probabilmente ne seguiranno altri simili in futuro ma non ci metterei la mano sul fuoco 😛
ciao
gialloporpora
/ 23 Marzo 2008Ti dirò, a me certe richieste che fanno su Megalab in Area Webmaster fanno ridere un pochino :-P, poi a quelle serie non so rispondere 😛
Ciao
Sandro
Mimì
/ 4 Maggio 2008Grazie mille!
Stavo proprio impazzendo per riuscire a creare questo effetto con il solo Flash. 😳
Engelium
/ 4 Maggio 2008Beh grazie ma ti dico la verità… in realtà realizzare la cosa in Flash non è così difficile come può sembrare… magari un giorno di questi scrivo una guida in proposito visto che pare la cosa interessi a molti 😕