venerdì 19 ottobre 2007

SWF Object

SWFObject è un piccolo file JavaScript da usare per includere nelle pagine web del contenuto Adobe Flash. Lo script può rilevare il plugin Flash in tutti i più diffusi browsers (sia su Mac e PC) ed è disegnato per facilitare al massimo l’inserimento di contenuti Flash.
Inoltre, cosa abbastanza importante, favorisce la validazione di codice HTML e XHTML 1.0*, ed è stato programmato avendo in mente la compatibilità futura, in modo da funzionare anche negli anni futuri. Nel codice di ZOOPPA, SWFObject è implementato in homepage e nelle pagine di dettaglio video e video-brief.

Come funzia?

Prima di tutto va creato un elemento html che incorpori l'oggetto, per esempio un div id="flashplayer". Il contenuto presente nell’elemento contenitore sarà rimpiazzato dal contenuto Flash, così che gli utenti con il plugin Flash installato non vedranno mai il contenuto presente in questo elemento. Questa caratteristica ha il vantaggio aggiuntivo di permettere ai motori di ricerca di indicizzare il testo rimpiazzato dal filmato Flash ;)

E poi creiamo direttamente l'oggetto:
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey])

  • swf – Il percorso ed il nome del file swf.
  • id – L’ID dell' oggetto o embed tag. L’embed tag avrà questo valore impostato come nome per i file che sfrutteranno l’opzione swliveconnect.
  • width – La larghezza del filmato Flash.
  • height – L’altezza del filmato Flash.
  • version – La versione del player richiesta per riprodurre il filmato Flash. Questa può essere una stringa nel formato 'majorVersion.minorVersion.revision'. Un esempio potrebbe essere: “6.0.65”. Oppure si può semplicemente richiedere la versione maggiore, come “6”.
  • background color – Questo è il valore esadecimale del colore dello sfondo del filmato Flash.
Argomenti opzionali:

  • quality – La qualità con la quale riprodurre il filmato Flash. Il default è “high”.
  • xiRedirectUrl –Se si desidera redirezionare gli utenti che completano l’aggiornamento ExpressInstall, si può specificare un URL alternativo in questo parametro.
  • redirectUrl – Se desideriamo redirezionare gli utenti che non hanno la versione corretta del plugin, usiamo questo parametro inserendo un URL alternativo.
  • detectKey – Questo è l’URL che lo script SWFObject cercherà quando il rilevamento è bypassato. Il default è ‘detectflash’. Esempio: per aggirare il rilevamento del plugin Flash e semplicemente scrivere il filmato Flash nella pagina, potete aggiungere ?detectflash=false all’URL del documento contenente il filmato Flash.

Mentre so.write("flashplayer"); dice allo script SWFObject di scrivere il contenuto Flash nella pagina (se la versione corretta del plugin è installata nel sistema dell’utente) rimpiazzando il contenuto all’interno dell’elemento contenitore.

Per sviluppare pagine utilizzando SWFObject, bisognerebbe iniziare con il contenuto alternativo (cioè quello non Flash). Facciamo in modo quindi che le pagine funzionino correttamente senza i filmati Flash! Poi aggiungiamo il codice Javascript che sostituisce il contenuto alternativo con i filmati Flash. Questo assicura che il contenuto alternativo sarà indicizzato dai motori di ricerca, e che gli utenti senza il plugin Flash (cosa paradossale ormai per carità) vedranno una pagina HTML funzionante. Se il contenuto alternativo è sufficiente, potrebbe non esserci alcuna ragione di dire ai visitatori che stanno perdendo il contenuto Flash.

SWFObject funziona in tutti i più recenti browsers, compresi, su PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, e Opera. Su Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, e Opera 7.5+, e dovrebbe continuare a funzionare correttamente anche in futuro.


ESEMPI
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");

</script>



Nel sito Adobe è riportata una lista completa dei parametri accettati da SwfObject

LINK

Passare variabili ai filmati usando il parametro “FlashVars”:

Usare FlashVars è il modo più semplice per passare dei dati dalla pagina html al filmato Flash, ma potete passare i dati solamente quando la pagina si carica. Normalmente, si aggiungerebbe un parametro chiamato FlashVars e poi i valori, passando coppie di stringhe del tipo NomeVariabile/ValoreVariabile, come in questo esempio: variabile1=valore1&variabile2=valore2& variabile3=valore3 e così via. SWFObject rende questa operazione più facile permettendo di aggiungere un numero a piacere di variabili in maniera simile a come si aggiungono i parametri aggiuntivi. L’esempio sottostante mostra come passare dei valori al filmato Flash usando questo metodo:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variabile1", getQueryParamValue("variabile1"));
so.addVariable("variabile2", getQueryParamValue("variabile2"));
so.write("flashcontent");

</script>



SWFObject è dotato anche di una funzione extra che permette di impostare i valori delle variabili direttamente dall’URL. Un possibile esempio potrebbe essere un URL simile a questo:

http://www.example.com/page.html?variabile1=valore1& variabile2=valore2

Inoltre la funzione getQueryParamValue() supporta la lettura di variabili dalla location.hash, usata per collegarsi a timeline più interne di un filmato Flash.


Saludos amigos

2 commenti:

manumasterone ha detto...

ciao samuele,
grazie della tua guida che ho trovato utile nell'imparare l'uso di swf object ma riscontro dei problemi... ovvero io uso drupal 5.3 ed ho creato un swf con all'interno una gallery video in xml...
ora succede che una volta inserito l'swf con swf object il file si vede solo su i.e. 7.0 e non su firefox...
non solo su i.e. si vede ma in maniera sballata, ovvero rimane bloccato.. se provo un altro normalissimo swf con una semplice animazione, in firefox non si vede uguale, ma in i.e. funziona tutto bene....

secondo te da cosa dipende, cosa dovrei fare :(

grazie in anticipo

manumasterone ha detto...

ciao samuele,
grazie della tua guida che ho trovato utile nell'imparare l'uso di swf object ma riscontro dei problemi... ovvero io uso drupal 5.3 ed ho creato un swf con all'interno una gallery video in xml...
ora succede che una volta inserito l'swf con swf object il file si vede solo su i.e. 7.0 e non su firefox...
non solo su i.e. si vede ma in maniera sballata, ovvero rimane bloccato.. se provo un altro normalissimo swf con una semplice animazione, in firefox non si vede uguale, ma in i.e. funziona tutto bene....

secondo te da cosa dipende, cosa dovrei fare :(

grazie in anticipo