STR: l'alternativa con Swish alla sIFR

Link copiato negli appunti

Nello sIFR: la nuova tipografia per il web abbiamo presentato la sIFR, un modo per incorporare qualsiasi font sostituendo il testo con un filmato Flash. Per verificare se fosse possibile o meno, ho provato a realizzare una tecnica molto simile con SwishMax e ho preparato la Swish Text Replacement. Entrambe consentono di incorporare determinati font in una pagina HTML grazie a filmati Flash. Rispetto alla sIFR, la STR presenta alcune limitazioni:

il filmato Flash prodotto dovrà avere dimensione prestabilita e nota, come il testo che rimpiazza;
il font del fimato sarà modificabile in colore e dimensione solo via Swishmax, e non risentirà della dimensione del testo che sostituisce;
gli elementi da rimpiazzare non potranno essere link, nè contenere tag al loro interno.

D'altra parte la STR si rivela più veloce della sIFR, presenta un codice Javascript più leggero e consente l'uso di pixel font. La STR ha, come la sIFR, il supporto multilinea, e si rivela comunque più versatile e pratica delle tecniche di Image Replacement. Inoltre, la STR ha in più la possibilità di aggiungere uno dei tanti effetti dinamici di cui dispone SwishMax (ben 230) sul testo rimpiazzato.

STR: come funziona

Anzitutto, vediamo l'esempio, che costruiremo passo passo nel corso dell'articolo. La STR si attiva nel caso in cui Javascript sia abilitato e il Flash Player (dalla versione 6) sia disponibile sul sitema dell'utente. Se i due requisiti sono soddisfatti, Javascript si occuperà quindi di nascondere il testo che vogliamo rimpiazzare, passandone il contenuto al filmato Flash realizzato con SwishMax che incorporara i font. Il filmato quindi verrà mostrato, eventualmente con gli effetti di transizione che avremo impostato.

Per configurare e usare la STR il lavoro è da fare soprattutto con SwishMax: è qui infatti che dovremo scegliere font, colore e dimensioni ed effetti del testo rimpiazzato. Potrete scaricare il pacchetto zip con l'esempio e seguire così passo passo il tutorial, in cui mostreremo alcuni screenshot del programma.

Preparare il filmato con SwishMax

Per preparare i vostri filmati Flash necessari per il Swish Text Replacement potrete aprire con Swishmax il file sorgente base.swi presente nello zip, che costituirà la base di partenza per realizzare i vostri filmati, seguendo così agevolmente i semplici passi che presenteremo di seguito.

Impostare le dimensioni del filmato

La prima cosa da fare, una volta aperto il file base.swi, è stabilire le dimensioni del filmato, selezionando la linguetta dimensioni sul pannello di destra. In sostanza vi basterà decidere larghezza e altezza del filmato Flash che conterrà il testo rimpiazzato. Le dimensioni potranno essere regolate anche in un secondo momento, dopo aver deciso il font. Ecco il primo screenshot.

Impostare le dimensioni del testo

Dovemo quindi impostare le dimensioni del testo uguali a quelle del filmato: faremo quindi un click sul testo di modo da selezionarlo per il ridimensionamento. Potremo farlo manualmente, posizionandoci nell'angolo in basso a destra, oppure spostarci sulla linguetta dimensioni del pannello sulla destra per regolarlo al pixel. Anche questo passo potrà essere affinato in un secondo momento. Ecco lo screenshot.

Modificare il font

A questo punto si arriva alla parte più divertente: dovremo decidere il font da usare, colore e dimensioni. Basterà spostarsi sulla linguetta testo per modificare le impostazioni. Da notare che se vorremo usare un pixel font dovremo selezionare l'opzione "pixel font (duro)". Il testo multilinea è già impostato di default nel file base.swi.

Per fare le prove, potremo anche cambiare il testo del filmato nella textarea in basso: tanto questo, come vedremo, è solo un segnaposto che verrà sostituito grazie a Javascript dal testo da rimpiazzare. Dopo aver impostato il testo, si potrà tornare ai due punti precedenti per settare con precisione dimensioni del filmato e del testo. Anche qui uno screenshot.

Tra le cose da evidenziare, c'è il fatto che con SwishMax potremo anche impstare l'allineamento del testo. Inoltre, per ottenere un filmato più leggero, è possibile incorporare nel filmato solo alcuni caratteri. Il file base.swi incorpora solo lettere, numeri e punteggiatura. Grazie al pannello testo potremo aggiungere altri caratteri al filmato.

Cambiare o eliminare l'effetto di transizione

Ora non ci resta che decidere se usare o meno un effetto di transizione sul testo, e se si quale. Facendo click con il tasto destro del mouse sulla linea temporale in alto potremo modificare o togliere l'effetto già impostato in base.swi. Potremo anche averne un'anteprima grazie alla voce "ripoduci effetto". Ecco lo screenshot.

Salvare ed esportare il filmato

A questo punto il nostro filmato è pronto per essere esportato: ci basterà andare sul pannello Esporta e settare le impostazioni (che in base.swi sono già settate). Ecco lo screenshot. Ora dal menu File salveremo il sorgente .swi con la voce salva con nome dandogli un nome conveniente.

Sempre dal menu File, potremo esportare il filmato in formato .swf totalmente compatibile con il Flash Player dalla versione 6 grazie alla voce Esporta. A questo punto il lavoro con SwishMax è completato, non ci resta che procedere con HTML, CSS e Javascript.

Preparare l'HTML e decidere gli elementi rimpiazzati

Rivediamo ora l'esempio. A questo punto, seguendo l'articolo dovreste aver preparato uno o più filmati Flash per applicare la STR. Ora le cose da fare sono nell'ordine:

preparare una o più pagine HTML su cui applicare la STR;
preparare il CSS relativo;
preparare il Javascript per applicare la sostituzione del testo;
linkare script e CSS per la STR nella pagina HTML.

In quanto ai primi due punti, una cosa da evidenziare è che gli elementi che verranno rimpiazzati dovranno essere il più simile possibile in dimensioni del font e colore a ciò che vorremo ottenere con la STR. C'è infatti un momento di transizione al caricamento della pagina in cui il testo normale viene reso visibile per poi essere rimpiazzato.

Inoltre c'è da notare che gli elementi da rimpiazzare potranno anche essere resi float o posizionati assolutamente, avere dimensioni esplicite (questo è molto consigliato) o margini. L'unica cosa che verrà persa durante il replacement è il padding. Ecco l'esempio in cui la STR non è ancora attiva.

Javascript per il replacement

Grazie a Javascript e ai filmati Flash realizzati, sarà possibile sostiuire elementi definiti da tag semplici, oppure individuati da classi o id, che non abbiano però altri tag al loro interno e non siano link. Il file str.js, di cui è possibile consultare il codice (che non andrà modificato), contiene la libreria di funzioni per poter usare la STR. Basterà intervenire sul file fornito nello zip di nome strApply.js che consente di definire quali elementi rimpiazzare e come, appoggiandosi alle funzioni della libreria. Ecco il codice di strApply.js per l'esempio:

window.onload=function(){

if(!STRDetect())
return;
//qui le istruzioni per il replacement
SwishReplace("h1","h1.swf","350","50","#EFEFEF");

SwishReplace("p#nota","float.swf","150","75","#EFEFEF");

SwishReplace("h2","movieposter.swf","350","30","#EFEFEF");

SwishReplace("address","pixel.swf","350","10","#EFEFEF");
}

In grassetto ho riportato le parti che potrete modificare per applicare la STR alle vostre pagine. La funzione centrale è SwishReplace che si occupa di sostituire il testo degli elementi che decideremo con il corrispondente filmato Flash. Ad ogni sua chiamata (ce n'è una per riga per un totale di quattro nel codice sopra) potremo specificare uno o più elementi definiti da un selettore CSS da rimpiazzare: questa riceve all'interno della parentesi, nell'ordine, cinque parametri tra virgolette che sono:

Selettore CSS: sono validi selettori di tipo, di classe e di id. Esempi validi sono h1, address, p.citazione, h3#titoletto. È anche ammesso il selettore discendente, con qualche limitazione: questo dovrà essere costituito esclusivamente da un selettore di id seguito da un selettore di tag, per esempio div#news h2 è accettato e rimpiazzerà tutti gli h2 contenuti nel div con id=news;
file swf del filmato, con eventuale percorso, da usare sugli elementi stabiliti al punto precedente;
larghezza in pixel del filmato;
altezza in pixel del filmato;
colore di sfondo del filmato.

Nel caso dell'esempio sono stati rimpiazzati il titolo principale h1, il paragrafo con id="nota" su cui è stato impostato in SwishMax un effetto di transizione in entrata, i titoli h2 e il tag address all'interno del footer, quest'ultimo con un pixel font.

Aggiungere nell'head il codice necessario

Modificato il codice Javascript di strApply.js per le vostre esigenze, basterà a questo punto sistemare il codice HTML della pagina per attivare la STR. Oltre ai due file Javascript, sono necessari anche due file CSS che non necessitano di modifiche e consentono, grazie a due classi aggiunte da Javascript, di ripristinare il testo normale per la stampa di pagine che adottano la STR. Nella sezione head della nostra pagina HTML aggiungeremo quindi le seguenti righe:

Bisognerà inoltre accertarsi che i quattro file str.js, strApply.js, strScreen.css e strPrint.css siano nella stessa cartella della pagina che usa la STR. Il nostro esempio è così ultimato.

Conclusioni

Termina qui la presentazione della STR, una tecnica facile da applicare che consente grazie a SwishMax di produrre filmati Flash per incorporare qualsiasi font in determinati elementi di una pagina HTML. La tecnica, rispetto alla sIFR da cui si è ispirata, presenta alcune limitazioni facilmente controllabili direttamente con SwishMax. Credo che tali limitazioni siano superabili con un po' di programmazione in SwishScript e Javascript, e non è da escludere un seguito a questo articolo in cui presenterò dei miglioramenti.

Il vantaggio significativo è la possibilità di applicare effetti dinamici sul testo rimpiazzato, ma il mio consiglio è di non abusarne e di applicarli su pochi elementi di pagina (uno è l'ideale).

Se non disponete di SwishMax, e volete provare la tecnica e/o il programma, ricordo che è possible scaricare una versione trial totalmente funzionante per 15 giorni dal sito italiano. Non ho provato, ma credo che il sorgente base.swi per la STR dovrebbe essere compatibile anche con Swish 2.

Codice HTML, CSS e javascript dell'esempio, più i filmati Flash realizzati e il sorgente SwishMax da usare come base di partenza sono disponibili per il download. Buon divertimento!

Indice lezioni