Flash ha sempre fornito diverse modalità per inserire i testi, per ottimizzare lo spazio e importare font. In questo articolo esaminiamo le funzionalità più importanti per la gestione dei testi con Flash CS4. In questo articolo vedremo, in primo luogo, le varie modalità con cui è possibile inserire il testo nei nostri filmati. In secondo luogo presenteremo lo strumento di correzione ortografica e qualche trucco per generare un efficace testo animato.
Iniziamo con il definire le tre diverse tipologie di testo che possiamo utilizzare in Flash CS4:
| Tipologia di testo | Descrizione |
|---|---|
| Testo Statico | Utilizzato per inserire del testo che non cambia dinamicamente, come etichette, descrizioni, tooltip. Può servire anche per creare animazioni complesse |
| Testo Dinamico | Ci permette di aggiornare dinamicamente i contenuti. Ad esempio ci consente di mostrare la valutazione di espressioni matematiche, di query al database etc. Un esempio può essere quello del calcolo del totale in un carrello e-commerce |
| Testo di Input | È la classica textbox che ci permette di immagazzinare dati inseriti dall'utente, in un form. Ad esempio i campi Utente e Password di un area riservata. |
Il testo statico: gli elementi comuni
Prima di passare alle diverse fattispecie, esaminiamo gli elementi comuni a tutti i tipi di testo, che sono poi quelli caratteristici del testo statico: vediamo come inserirlo nei documenti e le diverse opzioni di formattazione. Per avere un riferimento comune possiamo impostare l'area di lavoro utilizzando il menu Fondamentali > ripristina Fondamentali.
Per inserire del testo nei nostri documenti, selezioniamo lo strumento Testo dalla barra degli strumenti nella colonna di destra 
o più semplicemente premiamo la lettera T sulla tastiera.
Tralasciamo per il momento il pannello delle Proprietà, abilitato con la selezione dello strumento, e concentriamoci sull'inserimento del testo nello Stage.
Clicchiamo una volta nel punto in cui vogliamo inserire il testo e vedremo attiva la casella di testo con il cursore lampeggiante ed un cerchietto in alto a destra, iniziando a scrivere qualcosa, vedremo la casella espandersi automaticamente in orizzontale.
Premendo Invio andremo ovviamente a capo e, una volta giunti all'altra estremità della casella, questa continuerà ad espandersi per contenere tutto il testo.
Possiamo in ogni momento stringere ed allargare la casella di testo agendo sel cerchietto in alto a destra; provando a stringere la casella vedremo il testo disporsi su più righe ed il cerchio diventare un quadrato, questo sta ad indicare che adesso la casella di testo ha una larghezza fissa, ed ogni volta che arriveremo a fine rigo, il testo in automatico andrà a capo, senza più espandere la casella stessa.
Cliccando invece due volte sul quadratino, la casella tornerà alle dimensioni originali, con il testo disposto su due righe e nuovamente espandibile.
Possiamo ridimensionare la casella di testo anche con lo Strumento Freccia (v) 
selezionato, trascinando uno dei quattro quadratini blu negli angoli.
Un altro metodo per poter delimitare più precisamente l'area coperta dal testo e la sua posizione nel documento, è quello di trascinare la casella al momento di iniziare a scrivere, in modo da impostare da subito una larghezza precisa. In questo modo vedremo la casella disposta lungo un rigo ed impostata col quadratino finale, quindi con larghezza fissa.
Le proprietà del testo
Una volta inserita la casella di testo, esaminiamone le proprietà. Selezioniamo la casella di testo sullo stage e vedremo tutte le opzioni che è possibile impostare dal Pannello delle Proprietà, che nella versione CS4 di Flash è posto sulla colonna di destra:
La prima sezione contiene il menu a tendina che ci permette di scegliere il tipo di testo da utilizzare: Statico, Dinamico o Input. Anche dopo aver creato del testo Statico, come nel nostro esempio, possiamo modificare la tipologia in qualsiasi momento.
Abbiamo poi alcune sezioni espandibili. Ne esaminiamo più accuratamente il contenuto nei prossimi paragrafi.
La sezione Posizione e dimensioni
I parametri x e y servono a definire la posizione precisa della casella di testo nel documento e L ci fornisce un altro modo per impostarne la larghezza. Questi controlli possono essere utilizzati interattivamente, cliccando e trascinando col mouse direttamente sui valori numerici.
La sezione Carattere
La prima parte ci permette di controllare l'aspetto del font come in un tipico word processor: Famiglia, Stile, Dimensione, Spaziatura tra lettere e Colore. Queste ultime caratteristiche sono abbastanza autoesplicative, l'unica cosa da notare è che nel menu Famiglia troviamo i tipi di carattere installati sul nostro computer. Vedremo come più avanti come poterli importare nel filmato.
Continuando, troviamo l'opzione Crenatura automatica, che ci permette di utilizzare le impostazioni di Flash CS4 per la spaziatura tra coppie di lettere, proviamo a scrivere ad esempio VA e selezioniamo le due lettere e spuntiamo l'opzione per osservare gli effetti della modifica. Possiamo impostare la crenatura anche per tutta la casella di testo.
Antialiasing
Questo menu ci permette di impostare la smussatura dei caratteri. Nella versione CS4 questa caratteristica è stata migliorata. Abbiamo a disposizione diverse scelte:
| Campo | Descrizione |
|---|---|
| Usa caratteri dispositivo | Con questa opzione Flash utilizza i caratteri installati nel computer che visualizzerà il nostro file swf, quindi non incorporerà nessun font, con il risultato di avere un file più leggero. Scegliendo questa opzione è consigliato utilizzare famiglie di font molto comuni in modo che siano facilmente presenti della macchina dell'utente. |
| Testo bitmap (senza antialiasing) | Il testo non viene smussato e viene reso come un'immagine, con il risultato di avere bordi frastagliati e spigoli netti, in più, essendo i caratteri incorporati nel documento, avremo il file swf più pesante. Per una migliore leggibilità, non utilizzare dimensioni troppo piccole. |
| Antialiasing per animazione | Vengono applicate le impostazioni migliori per rendere l'animazione del testo più fluida. Anche in questo caso vengono incorporati i caratteri, quindi, se da un lato saremo sicuri che l'utente vedrà esattamente il testo così come noi l'abbiamo impostato, dall'altro avremo un file swf più pesante. Per una migliore leggibilità, anche in questo caso, non utilizzare dimensioni troppo piccole. |
| Antialiasing per leggibilità | Consigliato per scrivere con carattere dalle dimensioni piccole, anche questo metodo di rendering incorpora i profili dei font nel file swf da pubblicare, quindi avremo un documento più pesante. |
| Antialiasing personalizzato | Quest'ultima opzione ci permette di impostare manualmente i valori di smussatura del nostro testo. Selezionando questo metodo, avremo due paramentri da poter impostare: Spessore e Precisione che, rispettivamente, renderanno il testo più/meno evidente e dai bordi più/meno netti. |
| Valore | Testo |
Di seguito vediamo alcune immagini con impostazioni diverse:
Altre opzioni
Ultime opzioni di questa sezione sono la possibilità di rendere il testo selezionabile una
volta pubblicato il file e le impostazioni di Apice e Pedice.
La sezione Paragrafo
Oltre alle impostazioni tipiche e di facile utilizzo come la formattazione (destra, centro, sinistra e giustificato), l'interlinea, i margini ed il rientro, in questa sezione abbiamo l'opzione che ci permette di disporre il testo in verticale.
Cliccando sull'icona Orientamento avremo a disposizione tre metodi di scrittura: orizzontale, verticale da sinistra a destra, verticale da destra a sinistra. Una volta selezionata una distribuzione verticale, avremo un'ulteriore opzione, data dal pulsante Ruota, che ci permette appunto di ruotare le singole lettere o le parole.
La sezione Opzioni, creare un link
Questa piccola sezione ci permette di associare un collegamento Web direttamente ai nostri campi di testo, in questo modo faremo diventare il nostro testo un vero e proprio link (o un pulsante).
Scriviamo un indirizzo (es. http://www.html.it) oppure un semplice asterisco (*) nel campo Collegamento. Saranno abilitate anche le opzioni di Destinazione (_blank, _parent, _self e _top.
Questo campo può essere sfruttato anche per creare collegamenti ad indirizzi di posta elettronica, in questo caso scriviamo nella forma mailto:info@html.it in modo da far aprire il client di posta elettronica dell'utente.
Filtri
Quest'ultima sezione, più performante in Flash CS4, ci permette di impostare diverse opzioni grafiche al nostro testo. Questi Filtri sono:
- Ombra esterna
- Sfocatura
- Bagliore
- Smussatura
- Bagliore con gradiente
- Smussatura con gradiente
- Regola colore
Per aggiungere uno di questi filtri, procediamo come segue:
- selezioniamo la casella di testo sullo stage e clicchiamo sulla prima icona in basso a sinistra della sezione
Filtri - Dal menu a comparsa clicchiamo su
Ombra esterna - nel pannellino di controllo saranno presenti adesso le opzioni per impostare le nostre preferenze per questo effetto
Grazie alle icone che troviamo sul pannello in basso, possiamo rimuovere i filtri, salvare e copiare negli appunti, in modo da riutilizzare impostazioni particolari.
Possiamo ora esaminare il Testo Dinamico e di Input soffermandoci solamente sulle differenze col testo statico.
Testo Dinamico
Premiamo t sulla tastiera e dal Pannello delle Proprietà scegliamo Testo Dinamico. Con lo strumento attivo, trasciniamo sullo Stage per creare la casella di testo; come possiamo notare, col testo Dinamico non siamo vincolati alla sola larghezza, ma possiamo impostare interattivamente anche l'altezza che andrà a coprire il nostro testo.
Deselezionando la casella, notiamo che questa non scompare come farebbe il testo Statico, ma rimane attiva sullo stage, delimitata dal bordo tratteggiato, questo perchè essendo "dinamica" può essere utilizzata per mostrare dati esterni, quindi può anche essere vuota inizialmente.
Per controllare il contenuto via ActionScript è necessario associare un nome istanza ad ogni casella, è la prima opzione nel pannello delle Proprietà.
Tra le nuove opzioni abbiamo anche la possibilità di far interpretare alla casella di testo dinamica, semplici tag HTML 
ed impostare un bordo ed uno sfondo 
in modo da farla visualizzare anche quando è vuota.
Nella sezione Antialiasing, se scegliamo un rendering diverso da Usa caratteri dispositivo, Flash CS4 ci avverte che è necessario incorporare i caratteri; facciamo le nostre scelte dalla lista dei caratteri disponibili, considerando il fatto che più glifi inseriamo, più pesante sarà il nostro file swf.
Se ad esempio ci interessa mostrare solo numeri, possiamo inserire 0123456789 nella casella Includi questi caratteri, lasciando deselezionato il resto.
Altra opzione selezionabile è data dalla scelta del Comportamento: Riga Singola, Multiriga o Multiriga senza a capo nella sezione Paragrafo
Testo di Input
Terminiamo lo studio delle opzioni analizzando le uniche due differenze per il testo di Input, per poi riassumere il tutto con un esempio pratico nella seconda parte dell'articolo.
Ricordando che il testo di Input è utilizzato per permettere all'utente di inserire dati, vediamo l'opzione che è data appunto dal numero massimo di caratteri consentiti e la possibilità di impostare il Comportamento in Password, in modo che i caratteri inseriti saranno visibili sottoforma dei tipici asterischi *****.
Esempio pratico
Viste tutte le opzioni e studiati tutti i metodi di impostazione, facciamo un esempio pratico in cui utilizzeremo etichette di testo Statico, un campo Input ed una casella Dinamica per visualizzare il messaggio di benvenuto tramite del semplice codice ActionScript 3.0 associato ad un pulsante.
Creiamo nello stage due campi di testo; uno di input, col nome istanza nameVar ed un campo dinamico, nome istanza risultato; creiamo anche due etichette di testo statico per i due campi, scrivendo Nome e Messaggio. Dalla libreria comune dei pulsanti (Finestra > Librerie Comuni > Pulsanti) trasciniamo un qualsiasi pulsante sullo stage a cui assegneremo il nome istanza calcola.
In un nuovo livello, all'interno del prima fotogramma vuoto incolliamo il seguente codice ActionScript 3.0
import flash.events.MouseEvent;
calcola.addEventListener(MouseEvent.CLICK, saluti);
function saluti(e:MouseEvent):void {
risultato.appendText("Ciao " + nameVar.text );
}
Senza soffermarci su spiegazioni tecniche per codice usato, lo script, sfruttando le caratteristiche del campo di testo di Input, permetterà all'utente di inserire i dati e, sfruttando il campo di testo Dinamico, permetterà di visualizzare un messaggio finale concatenando i dati inseriti dall'utente.
Correzione Ortografica e Dizionari
Una funzione poco nota e poco utilizzata è la correzione ortografica direttamente in Flash CS4. Se dobbiamo inserire molto testo nei nostri file swf, questa funzione può tornare molto utile. Vediamo qualche opzione e come utilizzare questi funzioni.
Prima di tutto andiamo sulle impostazioni richiamando la finestra dal menu Testo > Imposta controllo Ortografico; da questa scheda possiamo impostare dove verrà effettuato il controllo (stage, nomi livelli, nel codice actionscript e così via). Possiamo anche selezionare le lingue per il controllo ortografico spuntando le voci dal menu Dizionari.
Facciamo una piccola prova pratica. Cambiamo il testo dell'etichetta che abbiamo ancora sullo stage, da Messaggio a Mesaggio (senza una 's') e lanciamo il controllo dal menu Testo > Controllo Ortografico. Flash CS4 evidenzia subito l'errore fornendoci dei suggerimenti per cambiare la parola errata. Se la parola fosse corretta ma non riconosciuta da Flash, possiamo aggiungerla al dizionario corrente cliccando su Aggiungi a dizionario.
L'animazione del testo
Concludiamo questo articolo creando una veloce animazione con il testo statico.
Scriviamo qualcosa sullo stage (per l'esempio useremo la parola animazione) e impostiamo l'opzione Antialiasing per animazione. Col testo ancora selezionato, convertiamolo in un simbolo di clip filmato.
Con due click sulla parola entriamo nell'editing del clip e, col testo selezionato, clicchiamo sulla tastiera la combinazione CTRL+B, (scorciatoia per Elabora > Dividi), in modo da separare tutte le lettere. Adesso col tasto destro scegliamo la voce Distribuisci sui Livelli; alla fine di queste operazioni avremo tutte le singole lettere in ogni livello separato, ma con la parola ancora in posizione corretta sullo stage
A questo punto procediamo con l'animazione vera e propria. Con i fotogrammi nei livelli ancora selezionati, scegliamo seleziona tutto col tasto destro del mouse sui livelli stessi; sempre col tasto destro andiamo su Crea Interpolazione di Movimento.
Impostiamo adesso un fotogramma chiave all'ultimo frame. Per fare ciò andiamo al fotogramma 30, selezioniamo tutte le lettere sullo stage e spostiamole leggermente anche con un click sulle frecce direzionali della tastiera; adesso facciamo in modo che le singole lettere compaiano una dopo l'altra.
L'effetto si ottiene facilmente grazie al nuovo metodo di interpolazione di Flash CS4 che ci consente di trascinare con un semplice movimento tutto lo span di tempo delle nostre animazioni direttamente nei livelli. Per finire selezioniamo al frame 75, tutta una colonna di frame vuoti e premiamo F5:
Provando l'animazione, vedremo le lettere comparire una dopo l'altra.
Inseriamo ora un movimento ed una trasparenza in modo che le nostre lettere arrivino da un lato dello schermo con una trasparenza graduale. Per non dovere impostare il movimento e la trasparenza per ogni singola lettere, portiamoci sulla scena principale e lavoriamo direttamente sul clip filmato che le contiene.
Sull'unico fotogramma dell'unico livello scegliamo col tasto destro Crea Interpolazione di Movimento e, con l'ultimo frame selezionato, spostiamo leggermente il clip per impostare anche un fotogramma chiave. Portiamoci sul primo fotogramma e dallo stage spostiamo il clip lungo il lato in cui volgiamo che parta l'animazione
Impostati il punto iniziale e finale dell'animazione, non ci resta che impostare la trasparenza: selezioniamo il clip sullo stage nel primo fotogramma e dal Pannello delle Proprietà > Effetto colore > Stile Alfa, inseriamo il valore 0%, andiamo sull'ultimo fotogramma, selezioniamo il clip ed inseriamo il valore 100%.
Volendo affinare ancora il movimento possiamo inserire un Andamento con un valore positivo per rallentare l'ingresso (e selezionare il percorso di animazione per convertirlo in curva, trascinando col mouse), oppure estendere o comprimere l'animazione agendo sull'interpolazione stessa.
Ecco il risultato finale:
