Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Embed di filmati Flash con Flashembed

di: Filippo Buratti 12 Ottobre 2009

Flashembed è un comodo plugin Javascript per incorporare dei contenuti Flash in una pagina HTML: per le funzionalità offerte e la compatibilità su tutti i browser può rappresentare di fatto una valida alternativa al collaudato SWFobject. Vediamo subito le caratteristiche principali di Flashembed, che costituiscono anche i suoi punti di forza:

innanzitutto la semplicità di utilizzo, con una modalità di implementazione veramente user-friendly;
le molteplici possibilità di configurazione, attraverso degli oggetti (hash) contenenti varie opzioni e i relativi valori assegnati;
le ridotte dimensioni: il peso è infatti all'incirca di 9 kb (solo 5 kb per la versione compressa);
l'integrazione con JQuery: Flashembed è uno script che può tranquillamente operare in modalità standalone, ma è possibile utilizzare i selettori di jQuery per un più rapido accesso agli elementi della pagina.

Installazione di base

Per incominciare ad utilizzare Flashembed è necessario includere nell'head della nostra pagina lo script, prelevabile dalla pagina di download, dove sono anche disponibili altri plugin dell'interessante pacchetto JQuery Tools. La seconda cosa da fare è inserire nel body del documento HTML un elemento contenitore vuoto in cui il nostro script andrà ad iniettare il codice necessario per l'embed del filmato Flash. Per questo scopo possiamo utilizzare un div, che deve essere referenziato attraverso l'assegnazione di un attributo id.

Da ultimo è necessario invocare Flashembed attraverso la funzione omonima, specificando due parametri:

l'id identificativo del div contenitore
l'indirizzo (relativo o assoluto) del file swf

Questo è tutto! Vediamo l'esempio e il codice utilizzato, veramente minimale:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flashembed - Esempio 1 - installazione di base </title>

<script type="text/javascript" src="js/flashembed-1.0.4.js"></script>

<style type="text/css">
body { text-align:center; }
#clock { width:300px; height:300px; margin:0 auto; }
</style>

</head>
<body>

<h1>Installazione di base</h1>

<!-- inseriamo il div che fa da contenitore -->
<div id="clock"></div>

<!-- assegnamo il filmato flash al contenitore -->
<script>
flashembed("clock", "swf/clock.swf");
</script>

</body>
</html>

Per impostazione predefinita, l'oggetto Flash è collocato all'interno del contenitore specificato in modo che la sua width ed height siano al 100%. Questo significa che è possibile controllare le dimensioni del filmato Flash impostando le dimensioni del contenitore direttamente con i CSS.

Pagina successiva

Pagine: