Web Design  »  Articoli  »  Web design 

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.

Altri articoli

Altre guide

Altre newsletter