Supporto volontario e collaborativo per Joomla!® in italiano

Inserire una animazione Flash in Joomla 1.5

Personalizzazioni Joomla

Spesso ci capita di dover inserire un contenuto flash all'interno del nostro sito creato tramite joomla. Vediamo come è possibile farlo attraverso differenti metodi.
Una delle situazioni più frequenti è quella di inserire un banner flash come "testata" nell'header del sito, ovvero una parte animata che spesso comprende il logo e anima il sito per renderlo graficamente più accattivante. La prima idea che ci viene in mente è quella di sostituire l'immagine statica dell'header (la testata in genere) del template con un filmato .swf (flash) appositamente creato per quel sito.

Ci accorgiamo subito però che se il codice che abbiamo inserito nel file del template non è adeguato, una volta pubblicato il sito, non vedremo probabilmente comparire quel filmato flash.

Perchè?

Questo dipende dal codice che abbiamo scritto per inserire il filmato flash. Qui vi propongo uno stralcio di codice per inserire un elemento flash (.swf) all'interno del vostro template.

Aprite il file index.php contenuto nella cartella del vostro template ed individuate la posizione in cui volete inserire il contenuto flash. Ecco un esempio del codice che dovete inserire nella posizione in cui volete che compaia il filmato flash:

 

 

 

<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="978" height="80">
<param name="width" value="978" />
<param name="height" value="80" />
<param name="src" value="templates/nometemplate/images/logo.swf" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" width="978" height="80"
src="/templates/nometemplate/images/logo.swf" quality="high">
</embed>
</object>

Dovete prestare ora attenzione ad alcune cose.

  • width e height li dovete assegnare voi in base alle dimensioni del vostro filmato flash.

  • title: inserite il nome (senza estensione) del vostro file flash

  • value: è il percorso da attribuire al file flash che avrete caricato sul vostro sito. Per esempio se il file si trova in templates/nometemplate/images/ allora assegnerete come valore "templates/nometemplate/images/logo.swf" sempre che il filmato flash si chiami "logo.swf"...

  • width e height, di nuovo li dovete assegnare voi in base alle dimensioni del vostro filmato flash.

  • gli altri parametri potete personalizzarli voi secondo le vostre esigenze (quality, background color, etc...)

La procedura che ho appena descritto consente di inserire un elemento flash direttamente all'interno del codice. Questo in genere si fa quando si sviluppa un template e quindi quando pensiamo di rendere il componente flash parte integrande della grafica del sito che stiamo sviluppando.

Esistono però altre circostanze nelle quali vogliamo inserire un elemento flash (per esempio un banner pubblicitario etc...) che non richiedono necessariamente di mettere mano direttamente al codice. Questo possiamo farlo utilizzando degli appositi moduli come per esempio "A Special Ad" (mod_a_special_ad.zip) che consente di inserire vari tipi di contenuti all'interno del box: html, flash, javascript ecc...

In questo modo possiamo pubblicare il modulo nella posizione che vogliamo e coerentemente con il codice che abbiamo inserito nel box del modulo vedremo apparire il nostro filmato flash!

Altra necessità è quella di inserire un elemento flash all'interno dei contenuti (articoli, etc...), questo è semplicemente risolvibile utilizzando il Tiny MCE 2.0 Editor già contenuto in Joomla 1.5, oppure se preferite installando un editor come JCE Editor (o altri), che consente l'inserimento diretto di oggetti flash senza dover inserire codice all'interno dell'articolo.

Prima di tutto dobbiamo impostare i filtri come indicato qui: http://wiki.joomla.it/index.php?title=FAQ_Joomla_1.5.8#Filtraggio_del_contenuto_degli_articoli, questo perchè in Joomla! 1.5.8 è stata impostata come predefinita una opzione di filtraggio per coloro che non hanno selezionato alcuna opzione nel parametro Opzioni filtro. Il valore predefinito applicato per coloro che non hanno selezionato alcuna opzione è il filtraggio con "black list" per ragioni di sicurezza contro possibili XSS. A causa di questa modifica, potresti notare problemi nel salvataggio di un video di Youtube, o nell'inserimento di altri oggetti Javascript o Flash all'interno degli articoli, anche se possiedi permessi di Superamministratore. (da: wiki.joomla.it)

A questo punto tramite l'editor Tiny MCE 2.0 dovete cliccare sull'icona "inserisci/modifica media" (precedentemente dovrete aver caricato il vostro file .swf in una cartella del sito) e settare i parametri ed il percorso del file correttamente ed il gioco è fatto!

Il modo più efficace per aggiungere elementi Flash alla pagina è però sicuramente mediante l'uso di SWFObject. Questo mirabile file JavaScript ospitato sul Google Code, e disponibile anche in versione gzipped tramite la CDN delle Google AJAX Libraries API, offre una modalità uniforme, cross-browser ed HTML/XHTML-compliant, per incorporare uno (o più) oggetti Flash nella pagina. Un altro vantaggio non indifferente è il fatto che SWFObject (almeno quando usato tramite le Google AJAX Libraries API) permette di caricare in modalità deferred gli oggetti Flash; vale a dire, che il caricamento dell'oggetto Flash non blocca quello degli altri contenuti della pagina.

MagnificaWeb offre una guida completa (referenziata tra l'altro nella documentazione ufficiale) su questo tool; fondamentalmente, però, una volta creata un'istanza di swfobject, occorre invocarne il metodo

embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)

che ha cinque parametri obbligatori e quattro opzionali. Troverete una spiegazione dettagliata del significato di ognuno di questi parametri nella guida di MagnificaWeb; basti sapere, comunque, che swfUrl è l'indirizzo (assoluto o relativo) dell'oggetto Flash da incorporare; width ed height la larghezza e l'altezza dell'oggetto; version la versione minima del plugin Flash installato nel browser necessaria per visualizzare l'oggetto; mentre gli ultimi tre parametri, autoesplicativi, si riferiscono alle variabili dell'object Flash, che è bene specificare tramite una sequenza (racchiusa tra parentesi graffe) di coppie nome:valore. Per quanto riguarda, infine, il parametro id, esso fa riferimento ad un div della pagina che contiene dell'HTML da visualizzare se nel browser non è installato il plugin Flash; solitamente, insomma, qualcosa come "Non hai il Flash Player; clicca qui per scaricarlo".

E' possibile vedere all'opera SWFObject a questo indirizzo. Sono sicuro che i bravi visitatori di Joomla.it non avranno difficoltà ad individuare (e studiare) il relativo codice nel sorgente della pagina :)

Scritto da deltafidesign

CommentaCommenta questo articolo sul forum