Tecniche di Text Replacement in Flash

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l’uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l’accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Gli strumenti che useremo

Prima di procedere vediamo di cosa abbiamo bisogno per utilizzare questa tecnica.

  • Adobe Flash per la creazione del filmato che prenderà il posto del nostro titolo
  • La libreria SWFObject per l’inserimento – dinamico – del filmato (Unobtrusive)
  • La libreria prototype.js per automatizzare il tutto; io userò negli esempi il nuovo loader di Google AJAX Library API ma se volete potete includere prototype.js per conto vostro separatamente

A parte Flash, gli altri strumenti sono sostituibili da funzioni personali o altre soluzioni.

Il filmato Flash

Immaginiamo di voler realizzare un titolo con un Font particolare, cosa che rende i CSS inutili in quanto il problema è che tale Font potrebbe non essere installato sulla macchina dell’end-user e quindi non visualizzato dall’utente finale:

Apriamo Flash e creiamo un filmato con una dimensione simile a quella del titolo che vogliamo sostituire. Come vedremo non è importante la dimensione che imposteremo in design-time, questa potrà essere modificata successivamente senza alterare la resa del testo. Inseriamo un oggetto Testo:

Cliccate su “Incorpora” e selezionate:

Nel primo fotogramma inseriamo questo semplice e disarmante codice:

1
2
3
4
5
// funziona a qualsiasi dimensione
stage.scaleMode  = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// preleva il parametro content passato da Javascript
label.htmlText = (this.loaderInfo.parameters.content == null)?'Errore':this.loaderInfo.parameters.content;

Compiliamo pure il nostro filmato (textreplacement.swf) e passiamo quindi dalla marcatura HTML, usandone una già vista, così da massimizzare la compatibilià:

1
<h1 id="titolo_uno"><span>Titolo uno</span></h1>

Nella sezione head del codice inseriamo:

1
2
3
4
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
   swfobject.embedSWF("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: 'Titolo uno'});
</script>

Il TAG h1 viene sostituito dal nostro filmato textreplacement.swf, con il parametro content che contiene la stringa del titolo. In una situazione più articolata, quindi con più titoli, questa soluzione diventa sconveniente, nonostante sia sempre più “avvincente” della mera sostituzione tramite i CSS: clicca qui per esempio (notare che il testo è selezionabile).

Il titolo due ha un contenuto HTML ed è reso dal motore Flash; scritta in rosso:

1
swfobject.embedSWF("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Titolo <font color="#ff0000">due</font>'});

Per ogni titolo presente nella pagina, infatti, bisogna inserire una riga Javascript che indichi a SWFObject l’id e il contenuto del titolo da trattare. Utilizzando prototype.js ed inserendo una classe per intercettare i titoli da sostituire, possiamo scrivere una semplice funzione in grado di sostituire tutti i titoli nella pagina con il contenuto Flash, prelevando il parametro content direttamente dall’HTML: clicca qui per esempio.

1
2
3
<h1 id="titolo_uno" class="text-replacement"><span>Titolo uno</span></h1>
<h1 id="titolo_due" class="text-replacement"><span>Titolo due</span></h1>
<h1 id="titolo_tre" class="text-replacement"><span>Sono il Titolo Tre un po' più complicato</span></h1>
1
2
3
4
5
6
7
8
9
google.setOnLoadCallback(
    function() {
        $$('h1.text-replacement').each(
            function(element) {
                swfobject.embedSWF("textreplacement.swf", element.id, "544", "50", "9.0.0", null, {content: element.innerHTML}); 
            }
        );
    }
);

In questo caso ho usato google.setOnLoadCallback() in quanto uso Google AJAX Library API per caricare prototype.js. Vengono quindi intercettati tutti i TAG h1 con classe impostata a text-replacement. A quel punto viene chiamato SWFObject per inserire sull’elemento trovato (element.id) il nostro filmato Flash. Notare che viene usato element.innerHTML per prelevare il contenuto testuale da passare al filmato Flash. Così facendo si passa in realtà il TAG span ma questo non è un probelma avendo impostato in campo testo nel filmato Flash come HTML.

Flash, poi, permette tutta una serie di effetti (runtime) che rendono questa tecnica davvero “simpatica”: clicca qui per esempio.

Quello che ho presentato è ovviamente un semplice esempio! Tuttavia il codice Javascript e le taggature HTML possono essere migliorate e rendere questa tecnica davvero spettacolare. Si possono inserire titoli in animazione o sfondi grafici, oltre ad usare semplicemente Font non utilizzabili tramite CSS. Con le opportune modifiche si possono passare ulteriori parametri al nostro filmato Flash, rendendolo ancora più dinamico: dimensione del Font, posizione del testo, azioni da eseguire al click, etc… È inoltre possibile creare un set di filmati per le diverse tipologie di titoli da sostituire, garantendo comunque un notevole risparmio in termini di download-time!

4 commenti a: “Tecniche di Text Replacement in Flash”

  1. 13 gen, 2009 simo:

    Ciao! non sono riuscita a replicare questa tecnica, chissà in quale errore incappo! ad essere sincera non sono riuscita a visualizzare neanche il tuo esempio.

    Grazie e ciao!
    Simona

    RispondiQuota
  2. 13 gen, 2009 Giovambattista Fazioli:

    @simo: prova adesso! Gli esempi non caricavano la libreria SWFObject usata per inserire il filmato Flash. Esattamente in cosa sei “incappata” ? :D

    RispondiQuota
  3. 13 gen, 2009 simo:

    Continuo a non visualizzare l’swf al posto dei titoli nel tuo esempio! Per quanto riguarda il mio “esercizio”, non so cosa sto sbagliando: ho fatto una prova pedestre e non capisco dove si incarta. Per oggi il mio tutoring on line è terminato, se riesco a venirne a capo ti faccio sapere! ciao

    RispondiQuota
  4. 13 gen, 2009 Giovambattista Fazioli:

    @simo: gli esempi probabilmenti li vedi male per una questione di cache… se pulisci tutto e riprovi dovrebbe andare tutto a posto: anche perchè io li vedo bene :D
    Per l’intoppo fammi avere qualche tuo codice, così vediamo di risolvere la questione.
    Saluti
    GF

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA