Ci siamo già occupati in un precedente articolo di questo blog di come inserire un filmato Flash in una pagina XHTML senza usare il tag embed, che impedisce la validazione rispetto a XHTML 1.0 Transitional, adottando lo script SWFObject.
Il vantaggio aggiuntivo di questa soluzione, oltre alla convalida della pagina, è che è possibile inserire un testo alternativo al filmato stesso: se l’utente non dispone del plugin Flash Player e/o ha Javascript disattivato, verrà visualizzato appunto questo contenuto. In questo modo a) è possibile avvertirlo della necessità di installare il plugin, b) si può inserire un testo riepilogativo dei contenuti di pagina a beneficio dei motori di ricerca.
Riepiloghiamo sinteticamente come procedere tramite il metodo di pubblicazione dinamica di SWFObject:
a) scarichiamo lo script dalla pagina http://code.google.com/p/swfobject/ e lo copiamo in una cartella del nostro sito, ad esempio /js;
b) creiamo nel nostro foglio di stile un box destinato a contenere il filmato Flash;
c) inseriamo il seguente codice nella sezione head della pagina:
<script type=“text/javascript” src=“js/swfobject.js”></script>
<script type=“text/javascript”>
swfobject.embedSWF(“swf/filmato.swf”, “box”, “400″, “300″, “9.0.0″);
</script>
dove “box” è il nome del div contenitore, 400×300 sono le dimensioni del filmato e del div #box e 9.0.0 è la versione minima di Flash Player richiesta per eseguire correttamente il filmato.
d) nella sezione body della pagina inseriremo il contenuto alternativo:
<body>
<div id=”box”>
<!– Qui il contenuto alternativo –>
<p>Per visualizzare correttamente questa pagina, dovete avere il plugin Flash Player versione 9 o successiva installato nel vostro PC</p>
<p>…</p>
</div>
Per inserire un filmato a tutta pagina, è sufficiente indicare “100%””100%” nell dimensioni, sia nel sopra riportato codice di SWFObject sia nelle proprietà del box contenitore.
Talvolta però possiamo avere bisogno di inserire il filmato al 100%, ottenendone cioè un ridimensionamento in funzione della viewport dell’utente, lasciando un margine nella pagina (ad esempio quando il filmato ha un bordo colorato e non si vuole che aderisca al confine della pagina).
Come procedere? Non è ovviamente sufficiente impostare un padding al selettore <body> perché l’interpretazione del box model da parte di tutti i browser più recenti farebbe sì che tale padding fosse aggiunto al 100% di dimensione del contenitore, estendendolo oltre lo spazio disponibile della pagina e provocando la comparsa delle barre di scorrimento.
Ragionando sempre in termini percentuali, procederemo così nel foglio di stile:
#box{
/* Contenitore per il filmato Flash. La sua pubblicazione avviene tramite SWFObject; le dimensioni del filmato sono impostate a 98% in altezza per consentire di inserire un margine superiore e quindi inferiore. Per fare questo, si applica il posizionamento relativo con un offset superiore dell’1% che, di fatto, centra verticalmente il contenitore poiche’ per differenza anche il margine inferiore sara’ pari all’1%. */
height: 98%;
width: 100%;
position: relative; /* Permette di impostare l’offset superiore */
top: 1%; /* (100% – 98%)/2 */
overflow: hidden;
}
ed il codice relativo a SWFObject nella pagina XHTML diventerà analogamente:
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(“swf/filmato.swf”, “box”, “98%”, “98%”, “9.0.0”);
</script>
In questo modo, a qualsiasi risoluzione video dell’utente il filmato verrà ridimensionato a tutta pagina lasciando però dei margini sul lato corto dello schermo, cioè quello verticale.