Ottimizzazione dei siti in Flash
con Flash Object
Traduzione
dell'articolo originale "FlashObject"
di Geoff Stearns a cura di
www.magnificaweb.it
15/03/06 FlashObject è un
piccolo file Javascript da usare per includere nelle vostre pagine del
contenuto Macromedia 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, è
ottimizzato per i motori di ricerca, degrada bene, può essere usato in
documenti validi HTML e XHTML 1.0*, ed è stato programmato avendo in
mente la compatibilità futura, in modo da funzionare anche negli anni
futuri.
Cosa c’è di nuovo in questa versione?
Per una lista completa delle novità, guardate il
FlashObject 1.3 blog post originale (in inglese).
Come funziona
Usare il
sorgente FlashObject è facile. Aggiungete il file javascript
flashobject.js, poi aggiungete poche righe di Javascript nella vostra pagina
per includere il vostro filmato Flash. Qui è riportato un esempio che mostra
la quantità minima di codice necessaria per aggiungere un filmato Flash:
<script type="text/javascript"
src="flashobject.js"></script>
<div id="flashcontent">
Questo testo è sostituito dal filmato Flash.
</div>
<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7",
"#336699");
fo.write("flashcontent");
</script>
Qui è riportato che cosa fa
il codice:
<div id="flashcontent">[...]</div>
Prepara un elemento HTML
che conterrà il filmato Flash. Il contenuto presente nell’elemento
contenitore (flashcontent nel nostro esempio) 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.
var fo = new FlashObject("movie.swf",
"mymovie", "200", "100", "7", "#336699");
Crea un nuovo FlashObject e passa i parametri richiesti:
• swf – Il percorso ed il
nome del vostro file swf.
• id – L’ID del vostro 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 vostro filmato Flash.
• height – L’altezza del vostro filmato Flash.
• version – La versione del player richiesta per riprodurre il vostro
filmato Flash. Questa può essere una stringa nel formato 'majorVersion.minorVersion.revision'.
Un esempio potrebbe essere: “6.0.65”. Oppure potete semplicemente richiedere
la versione maggiore, come “6”.
• background color – Questo è il valore esadecimale del colore dello sfondo
del vostro filmato Flash.
Parametri opzionali:
• useExpressInstall – Se
desiderate che gli utenti aggiornino il loro player usando l’opzione
ExpressInstall, usa ‘true’ per questo valore.
• quality – La qualità con la quale riprodurre il filmato Flash. Il default
è “high”.
• xiRedirectUrl –Se desiderate redirezionare gli utenti che completano
l’aggiornamento ExpressInstall, potete specificare un URL alternativo in
questo parametro.
• redirectUrl – Se desiderate redirezionare gli utenti che non hanno la
versione corretta del plugin, usate questo parametro inserendo un URL
alternativo.
• detectKey – Questo è l’URL che lo script FlashObject 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.
fo.write("flashcontent");
Dice allo script
FlashObject 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.
I dettagli
FlashObject funziona silenziosamente in background nel vostro documento HTML.
Per sviluppare pagine utilizzando FlashObject, dovreste iniziare con il
vostro contenuto alternativo (cioè quello non Flash). Fate in modo che le
vostre pagine funzionino correttamente senza i filmati Flash. Poi aggiungete
il piccolo 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 vedranno una
pagina HTML funzionante. Se offrire informazioni per un eventuale
aggiornamento del player dipende da voi. Se il contenuto alternativo è
sufficiente, potrebbe non esserci alcuna ragione di dire ai visitatori che
stanno perdendo il contenuto Flash.
FlashObject 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.
FlashObject rileva la
versione del player Flash in quei browsers dalla v.3 a quella attuale (e
oltre) se il browser usa l’archittettura dei plugin di Netscape (questo
comprende Firefox, Safari, Opera, Netscape, Mozilla, ecc.) e v.4 fino alla
versione attuale (e futura, teoricamente fino alla v.20) su Internet
Explorer (plugins basati su Active X).
FlashObject può rilevare le
versioni minori e le revisioni del player Flash, semplicemente passando la
stringa con il valore della versione che volete. Ad esempio per richiedere
la v.6.0 r65 (o 6,0,65,0):
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "6.0.65",
"#336699");
Il rilevamento del plugin da parte di FlashObject può essere aggirato. Se un
nuovo browser dovesse essere rilasciato o per qualche ragione il rilevamento
del plugin dovesse fallire sul sistema di qualche utente, potete aggiungere
un link che disabiliterà il rilevamento del plugin, e scriverà sempre il
contenuto Flash nella pagina. Per usare questo ‘bypass’ link, fate un
collegamento alla pagina con il vostro contenuto Flash, e includete una
variabile URL chiamata ‘detectflash’ ed impostatela a 'false.' Qui è
riportato un esempio di come risulterebbe un simile link:
<a href="mypage.html?detectflash=false">Bypass
link</a>
Esempi di FlashObject
Gli esempi sopra riportati mostrano le operazioni necessarie per il semplice
utilizzo di FlashObject, ma cosa è necessario fare per usare alcuni degli
altri parametri che il plugin Flash offre? FlashObject rende veramente
facile aggiungere qualsiasi parametro extra di cui abbiate bisogno. Gli
esempi sottostanti riportano alcuni dei differenti metodi che potrete
utilizzare per includere i vostri contenuti Flash.
Un semplice esempio per
aggiungere alcuni parametri extra
<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100%", "7",
"#336699");
fo.addParam("quality", "low");
fo.addParam("wmode", "transparent");
fo.addParam("salign", "t");
fo.write("flashcontent");
</script>
Nel sito macromedia.com è riportata la lista completa dei parametri
accettati e dei loro possibili valori.
Passare variabili ai
vostri filmati usando il parametro “FlashVars”:
Usare FlashVars è il modo più semplice per passare dei dati dalla vostra
pagina HTML al vostro filmato Flash, ma potete passare i dati solamente
quando la pagina si carica. Normalmente, voi aggiungereste 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.
FlashObject 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 fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7",
"#336699");
fo.addVariable("variabile1", "valore1");
fo.addVariable("variabile2", "valore2");
fo.addVariable("variabile3", "valore3");
fo.write("flashcontent");
</script>
Una volta fatto questo, tutte le variabili passate saranno immediatamente
disponibili all’interno del filmato Flash. Potrete accedere ad ogni
variabile semplicemente riferendovi alla timeline _root.
Lo script FlashObject è
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
Usando la funzione
getQueryParamValue() potete facilmente prendere i valori dall’URL e passarli
al vostro filmato Flash. Qui è riportato un esempio, considerando che l’URL
sia simile a quello riportato precedentemente:
<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7",
"#336699");
fo.addVariable("variabile1", getQueryParamValue("variabile1"));
fo.addVariable("variabile2", getQueryParamValue("variabile2"));
fo.write("flashcontent");
</script>
Inoltre la funzione getQueryParamValue() supporta la lettura di variabili
dalla location.hash, usata per collegarsi a timeline più interne di un
filmato Flash.
Usare Express Install
con FlashObject
FlashObject ha il pieno supporto per la funzionalità Flash Player Express
Install. Compreso con lo script FlashObject c’è un file actionscript che
funziona con FlashObject per effettuare l’aggiornamento del plugin Flash dal
vostro filmato. I vostri visitatori non dovranno più lasciare il vostro sito
per aggiornare il loro Flash player, e ad operazione ultimata, saranno
riportati nella pagina in cui è iniziato l’aggiornamento. Per utilizzare
l’opzione Express Install dovete includere il file expressinstall.as nel
vostro file .fla e all’inizio del vostro filmato effettuare un piccolo
controllo per vedere se l’utente deve aggiornare il proprio player:
#include "expressinstall.as"
// inizializza l’oggetto ExpressInstall
var ExpressInstall = new ExpressInstall();
// se l’utente deve aggiornare, mostra il pulsante 'start upgrade'
if (ExpressInstall.needsUpdate) {
// questo è facoltativo, potreste anche far partire l’aggiornamento
// automaticamente chiamando ExpressInstall.init() invece delle seguenti
linee
// aggiunge il messaggio per l’aggiornamento e lo centra
var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
upgradeMsg._x = Stage.width / 2;
upgradeMsg._y = Stage.height / 2;
// aggiunge il pulsante che farà partire l’aggiornamento ExpresInstall
upgradeMsg.upgradeBtn.onRelease = function() {
// il metodo ExpressInstall.init() fa iniziare l’aggiornamento
ExpressInstall.init();
}
// se expressinstall è stato lanciato, ferma la timeline.
stop();
}
E’ importante non mettere alcun contenuto nel primo fotogramma (o ovunque
avvenga il controllo ExpressInstall) e ricordare che per questa funzionalità
è richiesta la versione 7 del Flash Player (o più recente).
Per vedere un esempio di
questo codice, aprite il file source/fo_tester.fla contenuto nel file
zippato contenente FlashObject.
Se il vostro filmato Flash
è in una finestra popup, o preferite redirezionare l’utente ad una diversa
pagina dopo che l’aggiornamento Express Install è completato, potete usare
l’attributo xiRedirectUrl.
<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "8",
"#336699", true);
// deve essere l’URL assoluto alla pagina del vostro sito
fo.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html');
fo.write("flashcontent");
</script>
Download
FlashObject è rilasciato sotto la licenza MIT. Questo significa
(praticamente) che potete usarlo in qualsiasi situazione (anche in progetti
commerciali) senza alcuna restrizione.
Download FlashObject 1.3 – File zippato, include flashobject.js e degli
esempi html.
cliccate qui.
Perchè è meglio del
resto
Nel corso degli anni ci sono stati numerosi metodi per rilevare le versioni
dei player Flash e per inserire i filmati Flash nei documenti HTML. Questa
sezione riporta i metodi più famosi e ne rileva i possibili problemi.
1) Il metodo standard
fornito da Macromedia
Tutti dovrebbero conoscere il metodo di default di Macromedia che utilizza i
tag embed. Questo metodo consiste nel nell’uso di un tag Object con un tag
Embed al suo interno per evitare problemi di compatibilità. Questo è il
metodo più popolare per inserire i propri filmati Flash all’interno di un
documento HTML ed è la scelta di default quando pubblicate il vostro filmato
dal applicativo Macromedia Flash. Questa è anche la maniera più compatibile
per includere un filmato Flash, funzionando nella maggioranza dei browsers.
Qui è riportato un esempio del codice usato con questo metodo:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
Sebbene questo sia il modo più diffuso per includere i filmati Flash, ha
alcune controindicazioni.
• Non c’è rilevamento del
plugin Flash. – Senza rilevamento del plugin, gli utenti potrebbero non
vedere, in parte o tutto, il contenuto Flash. Se il plugin non è installato
sarà visulùalizzata su Internet Explorer la finestra di dialogo
‘Installazione ActiveX’ – una finestra che molti utenti ora temono a causa
dei numerosi virus e spyware – o lo strano ‘pezzo di puzzle’ sui browser
basati sul motore di Mozilla (ad esempio Firefox). Nessuno di questi sistemi
d’installazione sono semplici da usare, e solitamente non spiegano in
maniera accurata cosa sia necessario fare e perché.
• Il codice HTML e XHML non si valida. – Non esiste il tag embed in nessuna
versione di HTML e di XHTML. Comunque, siccome molti browsers interagiscono
con i tag object in maniera differente, il tag embed è necessario per
evitare problemi di compatibilità.
2) Uso del solo tag
Object / La tecnica del “Flash satay”
Questo metodo ha raggiunto una certa popolarità dopo essere apparso in un
articolo su A List Apart nel Novembre del 2002. Qui sono riportatati due
esempi uno per la tecnica che utilizza soltanto il tag Object ed uno per il
“Flash satay”:
'Uso del solo tag Object'
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
Flash satay
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>
• Problemi di accessibilità. – Utilizzando la tecnica del Flash Satay,
alcuni screen readers (come JAWS) ignoreranno il vostro contenuto Flash.
• Non c’è rilevamento del plugin Flash. – Stesso problema riportato per la
tecnica 1. Senza rilevamento del plugin, gli utenti potrebbero non vedere il
contenuto della pagina. Quando il player Flash incontra un filmato Flash
incluso in una pagina, proverà a riprodurlo qualsiasi sia la versione del
player installata. Così se il visitatore ha installato il plugin versione 6
ed incontra un filmato Flash versione 7, il plugin proverà ugualmente a
riprodurre il filmato potendo causare degli effetti inaspettati.
• Alcune tecniche “Flash satay” non riproducono il filmato Flash nel player.
– In questo caso sarebbe necessario l’utilizzo di un filmato swf contenitore
per caricare il vostro filmato. Questa situazione rende poco agevole il
passaggio di variabili attraverso parametri FlashVars e rende necessario il
mantenimento di un numero doppio di filmati Flash.
• Vecchi versioni di safari ignorano i tag param. – Fino alla versione 2.0
(su Tiger) o 1.3 (su Panther) e probabilmente 1.2.8 (prima di Panther)
Safari ignorerebbe il tag param. Questo significa che se proverete ad
impostare altre opzioni usando il tag param, come FlashVars o Align o Salign,
ecc. Safari non li vedrebbe
3) Rilevamento: La
tecnica del 'piccolo filmato Flash nella pagina index'
Questa tecnica consiste nel mettere un piccolo filmato Flash nella pagina
iniziale del vostro sito, e far controllare a quest’ultimo la variabile
$version nel player Flash e redirezionare l’utente ad una seconda pagina
contenente il vero filmato Flash, oppure ad una pagina dove effettuare
l’aggiornamento del player.
I problemi di questo metodo
sono:
• Non c’è il rilevamento del plugin nelle pagine interne del sito. – Se un
utente raggiunge direttamente una pagina interna, il controllo della
presenza del plugin Flash non è effettuato.
• Il codice HTML e XHMTL non è valido. – Il tag embed necessario per
inserire il filmato Flash nel documento HTML non è valido.
• Condizionerà in maniera negativa il posizionamento nei motori di ricerca.
– Con questa tecnica la pagina iniziale del vostro sito sarà semplicemente
una pagina vuota. Quando la gente troverà il vostro sito sui motori di
ricerca potrebbe vedere soltanto la scritta “Rilevamento del player Flash” o
addirittura nessuna descrizione. Questo è veramente uno spreco in termini di
visibilità per il vostro sito.
4) Il Macromedia Flash
Player Detection Kit
Macromedia ha realizzato un ottimo lavoro con il nuovo detection kit incluso
con Flash 8, ma ancora non è perfetto. Utilizza due differenti modi per
rilevare il plugin Flash:
1. Il classico "piccolo filmato Flash nella pagina iniziale del sito" -
(vedi sopra)
2. Javascript – Sì, esatto. Flash adesso include un rilevatore per il plugin
in Javascript. Sfortunatamente, non è semplice da usare, mischiando
Javascript, VBscript, e tutto il vostro HTML tutto dentro una ingola pagina.
Questa metodo continua ad avere molte delle controindicazioni delle altre
tecniche viste e non fa nulla per facilitare la vita degli sviluppatori
Flash/HTML. Inoltre anche questa tecnica non si valida come XHTML o HTML
(sempre che ci teniate a questo tipo di cose).
5) Utilizzo di
Javascript per rilevare il plugin e per inserire i filmati Flash
E’difficile criticare questo metodo, siccome varia da sito a sito. Comunque,
la maggior parte dei metodi di rilevamento del plugin fatti in Javascript
presentano i seguenti problemi:
• Rilevamento del plugin non affidabile. – Spesso il rilevamento del plugin
funziona soltanto con le versioni attuali, ed ha bisogno di essere
aggiornato manualmente ogni volta che una nuova versione del plugin è
rilasciata.
• Aggiunge più codice alle pagine. – Rendendo più difficile aggiornare o
cambiare i contenuti delle vostre pagine. Questo metodo potrebbe rendere più
difficile l’aggiunta di ulteriori filmati Flash.
• Una soluzione troppo complicata. – Molti script fatti per includere
filmati Flash possono crescere fino a grandi dimensioni o diventare
decisamente complicati. FlashObject invece è disegnato per essere semplice e
leggero.
FAQ
D.Ho sentito parlare dei problemi che Internet Explorer avrà nel mostrare
contenuti ActiveX a causa del brevetto EOLAS. FlashObject funzionerà?
R.La risposta è sì. FlashObject non avrà problemi con l’aggiornamento di
Internet Explorer che implementerà la richiesta di attivare con un click i
contenuti ActiveX caricati attraverso i tag HTML applet, embed e object. Per
approfondire questo argomento clicca qui.
D.Perchè il mio contenuto alternativo compare brevemente sullo schermo prima
che il filmato Flash sia caricato? (solo su Win/Internet Explorer)
R.Questo comportamento sembra legato al baco FOUC e non ha a che fare
direttamente con FlashObject. Può essere corretto aggiungendo un link ad
ogni foglio di stile nella sezione HEAD del vostro documento.
D.Come posso far funzionare FlashObject in Netscape 4.x?
R.Questo commento riporta alcuni esempi che possono essere usati per fan
funzionare FlashObject anche su Netscape 4.x..
D.Posso usare FlashObject nel mio Blog?
R.Sì, sono disponibili alcuni plugin per Wordpress e Textpattern.
D.Posso usare FlashObject con Dreamweaver o Golive?
R.Esite un’estensione per Dreamweaver disponibile nella CommunityMX. Al
momento non sono disponibili estensioni per Golive. Comunque è facile usare
FlashObject anche senza estensioni.
D.Questo articolo è disponibile anche in altre lingue?
R.E' disponibile la versione originale di Geoff Stearns in inglese di questo
articolo . Qui invece troverete parte di questa pagina tradotta in francese,
qui una traduzione in svedese ed una in finlandese.
D.Chi usa FlashObject?
R.FalshObject è usato in siti come The Library of Congress, windows.com,
skype.com, youtube.com, snapple.com e tantissimi altri. E’ incluso con Adobe
Photoshop (nella photo-gallery Flash). Anche il noto autore di libri Colin
Moock consiglia FlashObject come alternativa al Macromedia Detection kit.
Continuate ad avere problemi? Provate a leggere nei precedenti post (in
inglese) su FlashObject [1, 2, 3] (specialmente i commenti), dove gran parte
delle domande più frequenti sono state risposte.
Ringraziamenti
L'autore Geoff Stearns ringrazia Toby Boudreaux per i consigli e l'aiuto
profuso nel rendere FlashObject migliore.
|
