Sebbene l'argomento principale di discussione riguardo Flash CS5 sia stato l'ormai celebre packager per IPhone al centro della "battaglia" Adobe-Apple, l'ultima release del software di casa Adobe offre anche feature piuttosto interessanti, in particolare in questo articolo tratteremo le novità relative ai campi di testo, decisamente numerose sia grazie all'introduzione del Text Layout Framework sia grazie ad esempio alla nuova modalità di incorporamento dei caratteri.
Il Text Layout Framework in realtà era già disponibile in versione beta su Adobe Labs ed utilizzabile con Flash CS4, ma non era integrato nel pannello proprietà (come in Flash CS5), inoltre le performance non erano di buon livello. Questa edizione completa e integrata in Flash Pro, invece, risulta priva dei difetti precedenti e porta molti vantaggi.
C'è da dire che possiamo comunque sfruttare i "classici" campi di testo disponibili fino a Flash CS4, in questo caso si potrà beneficiare del nuovo sistema per incoroporare i font, ma non delle numerose novità disponibili con il Text Layout Framework.
Prima di esaminare queste novità ed il nuovo pannello proprietà dei campi di testo, ricordiamoci che per usufruire del Text Layout Framework è necessario che il FLA sia impostato per Actionscript 3 e Flash Player 10, per non incorrere in un errore selezionando il campo di testo di tipo Text Layout Framework.
La prima differenza con i sistemi precedenti è la scelta del tipo di testo: possiamo scegliere infatti tra "TLF Text", il testo gestito dal nuovo framework e "Classic Text", il consueto campo di testo usato fino a Flash CS4.
Classic Text
La scelta effettuata influenza l'aspetto delle altre opzioni del pannello proprietà. Per un testo di tipo classico avremo a disposizione le opzioni per:
- posizione e dimensione, (position and size)
- carattere, (character)
- paragrafo, (paragraph)
- opzioni, (option)
- filtri, (filters)
Inoltre le tipologie di campo di testo disponibili sono testo statico, testo dinamico e testo di input. Il testo statico di tipo classico non ha un nome di istanza, quindi si utilizza un campo di testo dinamico quando vogliamo gestire il testo tramite Actionscript.
Di fianco al tipo di campo di testo è disponibile il pulsante per l'orientamento del testo, si può scegliere tra orizzontale, verticale e verticale da destra a sinistra.
TLF Text
Decisamente più ricco il set di sottopannelli per i testi di tipo TLF, infatti abbiamo oltre alle opzioni già viste per il testo classico anche i pannelli:
- posizione e visualizzazione 3D, (3D position and view)
- carattere avanzato, (advanced charater)
- contenitore e flusso, (container and flow)
- effetti sul colore, (color effect)
- visualizzazione, (display)
Differenti sono anche le opzioni per il tipo di campo di testo: di fatto non esiste più il testo statico, ma abbiamo questi nuovi tipi:
- campo di testo di sola lettura, (read only)
- campo testo selezionabile, (selectable)
- campo di testo modificabile, (editable)
I primi due corrispondono in realtà a due alternative di testo dinamico classico, ma come si vede nell'immagine, anche il campo di testo di sola lettura può avere un nome di istanza, a differenza del "vecchio" testo statico.
Ultima variazione, anche se abbastanza piccola, è il fatto che il pulsante per l'orientamento del testo ha in questo caso solo le opzioni orizzontale e verticale.
Queste opzioni sono visibili quando creiamo il campo di testo o quando lo selezioniamo con l'apposito strumento. Il pannello viene ridotto, invece, quando modfichiamo il contenuto del campo tramite lo strumento Testo: in questo caso verranno mostrati solo i sottopannelli "carattere", "carattere avanzato", "paragrafo", "contenitore" e "flusso".
Questo comportamento non vale per i campi di testo di tipo classico, dove le opzioni sono le medesime sia che selezioniamo, sia che modifichiamo il testo.
Iniziando ad esaminare tutti i sottopannelli, troveremo, oltre alle differenze di numero a seconda del tipo di testi (TLF o Classic) alcune differenze anche nelle opzioni. Inoltre alcune impostazioni possono variare anche tra le tipologie di testo di una stessa categoria.
Posizione e dimensione
Forse il pannello più semplice, stabilisce la posizione orizzontale (x) e verticale (y) del campo di testo e relative dimensioni.
Questo pannello non presenta alcuna variazione e rimane identico per tutte le tipologie di campi di testo, sia classiche che del TLF.
Per una miglior leggibilità dei font è consigliabile usare coordinate e dimensioni intere: in questo modo il flash player sembra rappresentare con più precisione i testi.
Posizione e visualizzazione 3D
Questo pannello, esclusivo dei campi di testo del Text Layout Framework, permette di impostare la posizione e la visualizzazioe del campo di testo nelle tre dimensioni. Ovviamente le coordinate x e y corrisponderanno a quelle specificate nel pannello posizioni e dimensione, ma in più è possibile impostare la posizione sull'asse z.
Se il valore della posizione sull'asse z sarà diverso da zero vedremo avere effetto anche le opzioni per l'angolo di prospettiva e per il punto di fuga.
Nota: dopo aver modifichiamo la coordinata z, potremo cambiare le coordinate x e y solo utilizzando il pannello per la posizione 3D e non più il pannello posizione e dimensione, dove le opzioni saranno disattivate.
Carattere
Questo è il primo sottopannello disponibile per entrambe le tipologie di testo a presentare delle differenze significative. Iniziamo ad esaminare il pannello relativo a un campo di testo classico.
Analizzeremo in seguito le novità relative all'incorporamento dei caratteri (embed), che sono condivise con i testi di tipo TLF, a parte questa le opzioni sono piuttosto semplici; possiamo scegliere il font, lo stile, dimensioni e colore.
In aggiunta a queste impostazioni comuni, si possono impostare la spaziatura tra le lettere (letter spacing), il kerning (ovvero la spaziatura tre le coppie di caratteri) automatico oppure no, o il tipo di anti-aliasing che può selezionato tra 5:
| Opzione | Descrizione |
|---|---|
| Use device fonts | usa i font installati sulla macchina dell'utente, è consigliato usarla solo quando ci si limita all'utilizzo di font standard (Arial, Times new Roman, Verdana) solitamente installati su tutte le macchine |
| Bitmap text | poichè l'anti-aliasing applica una sorta si smussatura delle linee, non è solitamente adatto per i bitmap font (solitamente molto "quadrati"), in questo caso è utile sfruttare l'opzione Bitmap text che disattiva l'anti-aliasing |
| Anti-alias per l'animazione | adatto per i testi animati, rende più fluida l'animazione e in alcuni casi ne migliora anche la velocità d'esecuzione |
| Anti-alias per la leggibilità | rende il testo più leggibile, specialmente a piccole dimensioni |
| Anti-alias personalizzato | affine all'opzione per la leggibilità, ma in più permette di personalizzare alcuni parametri ed è consigliata per font non particolarmente conosciuti e per i quali le opzioni predefinite possono non dare ottimi risultati |
Abbiamo infine alcune opzioni rappresentate dai pulsanti in fondo al pannello che permettono, nell'ordine, di rendere o meno selezionabile il testo, di supportare i tag HTML nel campo di testo (solo per campi di testo dinamici o di input), e di mostrare bordo e sfondo del campo di testo (anche questa solo per campi di testo dinamici o di input).
Sempre in fondo al pannello, all'estrema destra, abbiamo i pulsanti per poter usare il superscript e subscript che permettono di disporre una riga (o un carattere) più in alto (superscript) o più in basso (subscript) rispetto all'impostazione di default, sono opzioni solitamente usate per le formule matematiche.
Passiamo ora a vedere la versione relativa ai campi di testo di tipo TLF.
Notiamo dall'immagine che alcune opzioni sono identiche a quanto visto per i testi classici, nello specifico non subiscono variazioni la scelta di font, stile, dimensioni e colore, così come la possibilità di incorporare i caratteri, l'opzione per il kerning automatico e la possibilità di inserire superscript e subscript.
Leggermente diversa è invece la scelta dell'antialising, in questo caso infatti le scelte si riducono a 3 (rispetto alle 5 del tipo "classic") e sono:
- Use device fonts
- Animation
- Readability
L'ultima opzione presente in tutte e due le tipologie di testo è il tracking, che però nel caso dei campi di testo classici si trova sotto la dicitura letter spacing, di fatto però hanno entrambe lo stesso scopo ovvero indicare la spaziatura tre le lettere. È tuttavia diversa l'unità di misura ed è in rapporto 1 a 100: per ottenere visivamente il medesimo risultato che con il letter spacing si ha con un valore di 5, il tracking del campo di testo TLF dev'essere impostato a 500.
Le opzioni aggiuntive rispetto ai testi classici sono quindi le seguenti:
| Opzione | Descrizione |
|---|---|
| Leading | spaziatura verticale tra le righe |
| Highlight | evidenzia il testo con un colore a piacere, simile all'evidenziatore di word |
| Rotation | ruota parole o singoli caratteri |
| Underline | sottolineatura del testo (utile per i font che non la prevedono di default) |
| Striketrough | barra il testo in modo simile al tag <strike> in HTML (es. |
Possiamo notare la "scomparsa" dei pulsanti relativi a testo selezionabile, testo HTML, bordo e sfondo. Queste opzioni sono state "riorganizzate": la selezionabilità o meno del testo viene stabilita dal tipo di campo che può essere di sola lettura (read only) oppure selezionabile (selectable), mentre per quanto riguarda l'HTML basta associare il testo via Actionscript tramite la proprietà htmlText (ora tutti i tipi di testo hanno un nome di istanza).
Infine, la possibilità di mostrare bordi e sfondo è stata migliorata e si trova ora nel sottopannello contenitore e flusso, che vedremo nella seconda parte dell'articolo.
Impostazioni avanzate per il carattere
Per i testi di tipo TLF abbiamo un sottopannello carattere avanzato (Advanced Character) in cui troviamo opzioni di utilizzo probabilmente non molto frequente.
Questo pannello è esclusivo dei testi di tipo TLF, con l'unica eccezione del parametro Link, disponibile anche per i campi di testo classici, in questo caso nel sottopannello Opzioni. Questo parametro permette di creare un collegamento ad una pagina Web, infatti l'opzione target permette di specificare in quale finestra aprire il link (_self, _blank, _parent, _top o custom che può essere usata ad esempio per i frame).
Si tratta comunque di un'opzione solitamente poco utilizzata dato che si preferisce creare degli appositi pulsanti o nel caso di link contenuti in testi dinamici si sfrutta l'HTML.
Opzioni di stile
Più interessanti sono invece i nuovi parametri che troviamo nella seconda parte del pannello, ma alcune di esse possono essere utilizzate solamente con font di tipo Open Type.
Analizzandole nell'ordine troviamo per prima l'opzione Case, che permette di specificare come usare le iniziali e le minuscole; i valori disponibili sono i seguenti:
| Opzione | Descrizione |
|---|---|
| Default | non viene applicata nessuna variazione al testo inserito |
| Uppercase | tutti i caratteri vengono convertiti in maiuscolo |
| Lowercase | tutti i caratteri vengono convertiti in minuscolo |
| Caps to Small Caps | tutte le iniziali vengono convertite all'uso dei glifi maiuscoli di tipo "small", perchè abbia effetto è necessario che il font usato abbia tali glifi |
| Lowercase to Small Caps | specifica che tutte le minuscole usino i glifi per le maiuscole di tipo "small", è necessario che il font usato abbia tali glifi perchè l'opzione abbia effetto |
Troviamo quindi l'opzione Digit case. Questa è relative ai caratteri numerici e può essere applicata solamente ai caratteri di tipo Open Type che supportino le due tipologie di caratteri numerici, è quindi un'opzione abbastanza di nicchia. Le scelte che si possono effettuare per questa opzione sono:
| Opzione | Descrizione |
|---|---|
| Default | l'opzione predefinita del font usato |
| Lining | utilizza numeri che hanno solitamente nel font spaziatura uniforme |
| Old style | utilizza numeri dallo stile più "classico", tuttavia pochi font hanno disponibilità di questi caratteri |
Legata all'opzione precedente è Digit width (larghezza cifre), anch'essa disponibile solo per font Open Type che abbiano i diversi stili di spaziatura e larghezza dei numeri, è possibile scegliere tra:
| Opzione | Descrizione |
|---|---|
| Default | l'opzione predefinita del font usato |
| Proportional | crea una spaziatura proporzionale tra i numeri aggiungendo solitamente un lieve margine bianco intorno al numero stesso. Non è adatto all'uso in tabelle e grafici in quanto questo tipo di figure non si allinea correttamente in verticale |
| Tabular | utilizza le figure tabulari che hanno la stessa larghezza e sono quindi particolarmente adatte per l'allineamento in verticale in tabelle, grafici e affini |
Stilisticamente interessante, ma comunque limitata nell'uso a seconda del font scelto per il proprio progetto, è l'opzione Ligatures (legature). Le legature sono particolari coppie di caratteri (ad esempio "fi" o "fl") che in alcuni font sono disponibili in alcune forme particolari. Le scelte disponibili per questa opzione sono:
| Opzione | Descrizione |
|---|---|
| Minimum | usa le legature minime |
| Common | utilizza le legature comuni o standard (valore di default) |
| Uncommon | utilizza le legature non comuni o "discrezionali" |
| Exotic | utilizza le legature esotiche o "storiche", disponibili in pochissimi font |
Abbiamo poi finalmente un'opzione utilizzabile con tutti i font, ovvero Break, che ci permette di indicare al nostro campo di testo quale comportamento adottare nell'andare a capo e quindi nell'eventuale "spezzamento" (appunto break) delle parole. Può essere usata ad esempio per evitare che una sigla vada a capo.
Le scelte disponibili sono le seguenti:
| Opzione | Descrizione |
|---|---|
| Auto | lascia che l'andare a capo venga regolato automaticamente in base alle impostazioni del font, è l'impostazione di default |
| All | tutti i caratteri selezionati vanno obbligatoriamente a capo |
| Any | ognuno dei caratteri selezionati può essere usato come interruzione di riga |
| No break | nessun carattere di quelli selezionati può andare a capo |
Baseline shift che è l'ultima opzione di questo "secondo gruppo" semplicemente sposta la linea del testo, è possibile spostarla sia positivamente (verso il basso) che negativamente (verso l'alto), può essere anche usata come alternativa maggiormente controllabile delle opzioni superscript e subscript.
Abbiamo poi un terzo "gruppo" che prevede un'unica opzione, Locale, che ha come valore una lingua. Questa impostazione ha effetto sui font Open Type e in particolare su alcuni glifi, anche quest'ultima comunque è di uso poco comune dato che richiede che il font scelto abbia alcuni glifi particolari.
Si può dire che ad eccezione di Case, break e baseline shift, l'uso delle altre opzioni sia decisamente occasionale.
Paragrafo
Tornando invece a opzioni di utilizzo decisamente più comune, passiamo al sottopannello Paragrafo che principalmente contiene le opzioni di allineamento del testo. Per quanto riguarda il caso di un campo di testo classico, le opzioni sono abbastanza semplici.
Vediamo per prima cosa la scelta del Formato, dove possiamo scegliere l'allineamento a sinistra, al centro, a destra oppure giustificato.
Nel secondo gruppo di opzioni troviamo invece alcuni parametri che ci consentono di impostare spaziature, margini e comportamento del campo di testo.
Per la spaziatura possiamo impostare la distanza del testo dal bordo sinistro e l'interlinea (la distanza tra le righe), similarmente possiamo impostare il margine sinistro e destro rispetto alla casella di testo, come un padding in HTML.
L'ultima opzione è quella relativa al comportamento, dove possiamo scegliere tra:
| Auto | Descrizione |
|---|---|
| Single line | il testo non va a capo ma rimane su un'unica linea |
| Multiline | il testo va a capo e se necessario spezza le parole |
| Multiline no wrap | il testo va a capo ma non spezza le parole, quindi se necessario manda a capo l'intera parola |
Nel caso di un campo di testo di tipo input, potremo scegliere l'ulteriore alternativa Password.
Passando al sottopannello paragrafo dei testi del Text Layout Framework possiamo notare come prima cosa la mancanza dell'opzione Behavior:
Si potrebbe pensare che sia dovuto al fatto che le scelte dell'opzione Break vista poco fa svolgano la stessa opzione, ma non è del tutto esatto: l'opzione per il comportamento del campo di testo è stata spostata nel sottopannello Contenitore e flusso che come vedremo a breve incorpora la maggior parte delle opzioni "sottratte" agli altri sottopannelli (come le già citate opzioni di bordo e sfondo), in alcuni casi anche con alcune migliorie.
Il paragrafo per i testi TLF
Per quanto riguarda il paragrafo dei campi di testo TLF abbiamo quindi solo opzioni di allineamento e spaziatura, ma in questo caso le possibilità sono leggermente più ampie di quanto visto per i testi classici; ad esempio per l'allineamento non abbiamo più un singolo "giustifica" ma ben 4 possibilità, ovvero giustifica con l'ultima linea allineata a sinistra, giustifica con l'ultima linea allineata al centro, giustifica con l'ultima linea allineata a destra, giustifica tutto.
L'aspetto finale del campo di testo sarà influenzato, oltre che da queste opzioni, anche dal valore scelto per Text justify che consente di giustificare basandosi sulle parole (Word spacing) o sulle singole lettere (Letter spacing). Tale valore non ha invece effetto se scegliamo uno degli allineamenti (sinistra, centro o destra) che non prevedono la giustificazione.
Nel secondo gruppo di opzioni troviamo anche in questo caso i margini (del tutto affini a quanto visto per i campi di testo classici) e l'indentazione (affine allo "spacing" visto poco fa), per quanto riguarda invece la spaziatura tra le righe abbiamo già visto che per i campi di tipo TLF è stata spostata nella sezione Carattere.
L'opzione Spacing dei campi di tipo TLF è diversa da quella vista per i campi classici, infatti non stabilisce la distanza del testo dal margine del campo di testo, ma lo spazio sopra e sotto al paragrafo.
Contenitore e flusso
Passiamo allora al pannello contenitore e flusso, esclusivo dei campi di testo di tipo TLF e che include anche una delle novità più interessanti del framework, ovvero la possibilità di dividere il testo su più colonne.
Vediamo che come abbiamo accennato nel paragrafo precedente le opzioni per il comportamento sono state spostate in questo pannello e sono esattamente le stesse che per i campi classici si trovano nel sottopannello paragrafo.
Quasi tutte nuove invece tutte le altre opzioni rappresentate da questo pannello!
La prima che possiamo vedere è l'opzione Max chars, impostabile solo per i campi di testo di tipo Editable poichè imposta il numero massimo di caratteri che l'utente può inserire.
Troviamo poi quattro pulsanti che ci permettono di scegliere l'allineamento verticale del testo all'interno del suo contenitore: allineato in alto, allineato al centro, allineato in basso oppure giustificato (verticalmente); per quest'ultima opzione è necessario che il testo sia multilinea e con almeno due righe di testo, mentre le prime tre opzioni funzionano anche con testi a linea singola.
Proseguendo troviamo l'opzione Columns (colonne), appunto una delle principali novità del Text Layout Framework: basta cambiare il valore di questo parametro e il nostro testo verrà automaticamente disposto sul numero di colonne da noi scelto, il tutto all'interno del campo di testo che abbiamo creato; possiamo inoltre scegliere la spaziatura tra le colonne.
Questa opzione va bene quando vogliamo disporre il testo su colonne ravvicinate, mentre per disposizioni più complesse è decisamente consigliabile sfruttare i campi di testo collegati, anche questa è una nuova feature del text layout framework che analizzemo in seguito.
Il terzo gruppo di opzioni è relativo al padding, possiamo impostare separatamente ogni direzione (destra, sinistra, sopra, sotto) oppure forzare i valori ad essere uguali tra loro usando il tasto a forma di lucchetto. Il padding, a differenza del margine e delle spaziature viste poco fa che possono essere impostate per ogni singolo paragrafo, agisce su tutto il campo di testo.
Troviamo poi due campi da cui possiamo scegliere il colore rispettivamente di bordi e sfondo del campo di testo; queste opzioni sono un miglioramento rispetto al mostra bordo che per i campi di testo classici è disponibile nel sottopannello del carattere, infatti mentre per il campo di testo classico il bordo è nero e lo sfondo bianco di default, in questo caso possiamo scegliere qualsiasi colore in base alle nostre esigenze.
Ultima opzione di questo pannello è 1st line offset che consente di impostare l'altezza della prima linea del campo di testo, è possibile impostare un valore personalizzato (scegliendo pt dalla lista) oppure scegliere tra Auto, Ascent (allineato in alto) e Line height (viene lasciata una linea vuota prima del testo).
Le 'Opzioni' per i campi Classic Text
Questo è l'unico sottopannello disponibile per i campi di testo di tipo classic e non per quelli di tipo TLF, ma semplicemente perché le opzioni disponibili qui esistono anche per i campi TLF in altre sezioni.
Le voci del pannello cambiano a seconda del tipo di campo di testo: per i campi di testo statici offre solo le opzioni link e target, simili a quelli visti nella gestione avanzata dei caratteri del TLF; per i campi di testo dinamici abbiamo anche la possibilità di associare una variabile al campo di testo, ma solo in caso di progetti Actionscript 2 è infatti un metodo obsoleto per popolare il campo di testo via Actionscript.
Per i campi di testo di tipo input infine abbiamo ancora una volta il campo variabile e l'opzione Max chars (nel caso dei campi TLF abbiamo visto che tale opzione è nel sottopannello contenitore e flusso).
Effetti colore e Visualizzazione
Mettiamo insieme e trattiamo rapidamente questi due sottopannelli, esclusivi dei campi di testo TLF. Molto semplicemente rendono possibile applicare direttamente ai testi quelli che sono gli effetti di colore e le modalità di fusione che fino a Flash CS4 si potevano applicare solo ai movieclip.
È quindi possibile applicare direttamente ad un campo di testo TLF effetti come trasparenza o luminosità, associargli eventualmente una modalità di fusione, ed eventualmente sfruttare l'opzione cache as bitmap (utile solitamente per animazioni particolarmente complesse).
Filtri
L'ultimo sottopannello del pannello Proprietà, ancora una volta disponibile per entrambe le tipologie di testi, è il pannello Filtri.
Si tratta dello stesso pannello che si può utilizzare per i movieclip, inoltre sono disponibili gli stessi filtri per tutte e due le tipologie di testo.
Campi di testo collegati
Dopo aver concluso questa panoramica su tutti i pannelli disponibili nel pannello Proprietà per i campi di testo di tipo Classic e TLF, passiamo ora ad analizzare una ulteriore novità introdotta in Flash CS5, esclusiva per i campi di testo di tipo TLF: la possibilità di collegare tra loro i campi di testo.
Questa nuova feature apre nuove prospettive per i layout in flash e rende anche più flessibile l'utilizzo di contenuti testuali dinamici.
Sebbene sia sempre stato possibile disporre a proprio piacimento i campi di testo sullo stage, non sempre inserire e gestire i contenuti era semplice, soprattutto nel caso di testi dinamici soggetti a possibili aggiornamenti: pensiamo ad esempio ad una struttura su più colonne come la seguente:
Con i testi di tipo Classic, anche usando testi statici, l'operazione di inserimento risulta scomoda in quanto è necessario inserire un testo separato per ogni campo, peraltro della giusta lunghezza (altrimenti il campo di testo viene ridimensionato in base al testo incollato). Ancora peggiore è le situazione nel caso di testi dinamici, magari inseriti dagli utenti, per i quali difficilmente possiamo prevedere le dimensioni.
Abbiamo quindi 3 colonne di testo separate tra loro, in cui frammentare il testo inserito dall'utente. Abbiamo due possibilità: fare in modo che l'utente inserisca i tre testi separatamente o eseguire una divisione dinamica del testo, basandoci ad esempio sul numero di caratteri per ogni colonna.
Entrambe le soluzioni presentano alcuni svantaggi: nel primo caso l'utente deve compilare più campi e separare precisamente i contenuti che vuole inserire, mentre nel secondo caso dobbiamo fare attenzione a non tagliare le parole e le colonne potrebbero risultare non omogenee.
Tre colonne in un campo di testo
Vediamo come il Text Layout Framework ci semplifica la vita: come prima ipotesi si potrebbe impostare un campo di testo con 3 colonne dalle proprietà di 'contenitore e flusso', ma in realtà il risultato sarebbe leggermente diverso da quello nella figura precedente, come possiamo vedere:
Ora abbiamo il testo su tre colonne ed è, come volevamo, un solo "flusso", per cui eseguendo un copia e incolla, modificando il testo, selezionandolo o caricandolo via Actionscript verrebbe disposto correttamente senza la necessità di avere testi divisi o di separare il contenuto via Actionscript. L'unico limite è quello di avere un solo campo di testo con sfondo e bordo, mentre nell'immagineprecedente si trattava di 3 colonne distinte, ognuna col suo sfondo e bordo.
Collegare i campi di testo
Per replicare questa situazione dobbiamo quindi creare comunque i tre diversi campi di testo, sfruttando però la possibilità offerta dal TLF di collegare fra loro più campi di testo: avremo visivamente lo stesso risultato visto con i campi separati, in più manterremo il vantaggio di poter utilizzare un unico testo senza ulteriori elaborazioni.
Esaminiamo la rappresentazione di un campo di testo TLF, quando è selezionato, e le differenze rispetto al tipo classico:
Il campo TLF presenta due "quadratini" in più, uno in alto a sinistra e uno in basso a destra. Chi ha dimestichezza con programmi di impaginazione come InDesign probabilmente avrà già visto questi simboli, che rendono possibile creare o collegare dei campi di testo.
Il quadrato a sinistra permette di creare un campo di testo "precedente" all'attuale, mentre quello a destra crea un campo di testo "seguente" a quello attuale. L'operazione è molto semplice, cliccando su uno dei due quadratini l'icona del mouse cambierà aspetto, basterà a questo punto cliccare nel punto in cui vogliamo creare il nuovo campo di testo e automaticamente verrà creato un nuovo campo di tipo TLF, con le stesse dimensioni di quello da cui abbiamo eseguito il collegamento e che sarà collegato ad esso. Visivamente sullo stage avremo un risultato di questo tipo:
Abbiamo dimensioni identiche tra i due campi e la freccia che segnala il collegamento.
È possibile collegare anche campi di testo già presenti sullo stage, ciò può essere utile quando abbiamo bisogno di di campi di diverse dimensioni, possiamo infatti crearli prima e poi collegarli in un secondo momento.
L'operazione è simile alla precedente: clicchiamo su uno dei due quadratini ai lati del campo TLF e poi sul campo di testo che vogliamo collegare. In questo caso il cursore del mouse assumerà la forma di due anelli di catena congiunti.
È possibile in ogni momento anche scollegare i campi, cliccando due volte sul quadratino del testo che vogliamo "sganciare".
Testo in eccesso
C'è un ulteriore tipo di indicazione visiva che i campi di testo di tipo TLF offrono, molto utile proprio per testi magari particolarmente lunghi e che necessitano di più campi. Quando un testo è più lungo del suo contenitore, il quadratino sul lato destro diventa rosso con un simbolo +, che indica la presenza di altro testo oltre a quello visibile nel campo.
Questo non può accadere invece con i campi di tipo Classic: quando incolliamo un testo al loro interno questi vengono adattati al contenuto, per cui con tali campi l'unica possibilità per cui il testo può essere in eccesso è nel caso in cui venga associato via Actionscript.
I campi di testo TLF ci permettono di creare più facilmente effetti come testi scrollabili, oltre ad offrirci un miglior aspetto, soprattutto in fase di progettazione.
Se volgliamo aggiungere dei campi in modo da distribuire il testo in più contenitori il metodo è lo stesso descritto in precedenza, basterà clicare sul quadratino (in questo caso rosso) e creare le nuove cornici, oppure collegare dei campi già esistenti.
Potremo creare (o collegare) campi fino alla scomparsa del quadratino rosso, saremo così sicuri che tutto il testo è ora visibile.
Cambiare le posizioni
Sia prima che dopo il collegamento i campi di testo possono essere posizionati o ridimensionati assolutamente a piacere: basta selezionare anche un solo campo di tipo TLF per vedere gli altri campi ad esso collegati, il ché rende molto semplice individuare i vari flussi e la relativa sequenza.
Tutti i campi sono di fatto più contenitori di uno stesso flusso, possiamo quindi agire sul testo come se fosse uno solo, quindi possiamo aggiungere, modificare o rimuovere delle parti e vedere automaticamente adattata la disposizione del testo negli altri contenutori.
Possiamo effettuare operazioni come "seleziona tutto" in uno dei campi del flusso e automaticamente selezionare l'intero testo anche se è disposto in più campi, cosa impossibile fino a Flash CS4.
Ovviamente è possibile effettuare anche delle selezioni parziali, selezionando per esempio alcune parole del primo contenitore e altre del secondo. Non è possibile selezionare parti di testo separate, quindi anche la selezione divisa tra più contenitori deve comunque essere del testo in sequenza.
Tale possibilità di selezione consente di applicare variazioni di stile (grassetto, colore, font, dimensione e quant'altro) solo ad alcune parti, mantenendo comunque inalterati i collegamenti tra i campi, il testo infatti viene disposto automaticamente riflettendo le modifiche effettuate in uno qualsiasi dei contenitori.
La possibilità di eseguire la selezione su più campi di testo collegati permane anche nell'SWF esportato, è quindi possibile consentire all'utente di eseguire la copia di determinati contenuti anche se disposti in più campi di testo.
Esempio di SWF con testo selezionabile su più campi
Non solo: anche nel caso di campi di testo di tipo editable i collegamenti vengono mantenuti; nell'SWF seguente è infatti possibile manipolare il testo e tutti i campi verranno aggiornati in modo conseguente alle modifiche.
Esempio di SWF con testo modificabile disposto su più campi
Questa novità migliora di molto le possibilità di impaginazione e di interazione offerte da Flash, che finora era decisamente limitato nella gestione dei testi.
Nuova modalità di incorporamento dei caratteri
L'ultima novità che analizziamo in questo articolo è la nuova modalità di incorporamento dei caratteri, molto più comoda e performante di quella disponibile fino a Flash CS4. La novità è condivisa da entrambe le tipologie di testi, non si tratta infatti di un'esclusiva del Text Layout Framework, ed applicabile peraltro anche ai progetti Actionscript 2 creati con Flash CS5.
Fino a Flash CS4, il pannello incorporamento caratteri (Embed) permetteva di includere solo il carattere del campo di testo attualmente selezionato, e aveva questo aspetto:
Era necessario specificare il set di caratteri da importare, il font preso in considerazione era quello del campo di testo attualmente selezionato. Ciò comportava principalmente la scomodità di avere un campo di testo per ogni font che da incorporare nel filmato.
Quindi, per importare i due font dell'esempio precendete (Verdana ed Eurostile) di cui il primo con diversi stili (regolare, grassetto e corsivo) avremmo creato 4 campi di testo, ognuno con un font, e impostato uno per uno gli incorporamenti.
Nelle situazioni che richiedevano l'uso di diversi font in campi dinamici con possibili variazioni di stile regolate da fonti esterne (database, xml o altro), una tecnica frequente era quella di creare diversi campi di testo vuoti e posizionati fuori dallo stage, ognuno con incorporato un determinato font.
Con Flash CS5 il pannello per incorporare i caratteri è cambiato piuttosto radicalmente e facilita l'incorporamento di più caratteri o di più stili di uno stesso font.
Benchè a prima vista il pannello sia molto diverso rispetto al precedente, la funzionalità è in realtà pressochè la medesima. Migliora l'usabilità sia in fase di incorporamento sia nelle eventuali fasi successive di controllo o riepilogo.
Possiamo subito notare come nella parte destra del pannello, la sezione Character ranges sia pressochè identica a quanto era disponibile fino a Flash CS4.
Una differenza è però data dal fatto che, come possiamo vedere nella parte alta a destra del pannello, ora è possibile scegliere quale famiglia di font e quale stile incorporare, possiamo inoltre associare un nome al font.
Family e Style mostrate all'apertura del pannello sono quelle relative al campo di testo selezionato al momento in cui è stato aperto il pannello, ma come detto mentre in Flash CS4 era obbligatorio incorporare il font del campo selezionato, in questo caso è possibile anche sceglierne un altro.
Nel lato sinistro del pannello abbiamo un'altra novità, ovvero la possibilità di aggiungere o ri muovere direttamente uno o più font dall'incorporamento, senza quindi la necessità di spostarci tra i vari campi di testo. Questo è possibile grazie ai tasti + e - disponibili nella parte in alto, mentre appena al di sotto dei due tasti abbiamo l'elenco dei font incorporati fino a quel momento.
Tale lista raggruppa i font in maniera molto intuitiva, per esempio se abbiamo incorporato le varianti grassetto, corsivo e regular del Verdana le troveremo entrambe sotto la medesima voce.
Nell'esempio precedente dei campi di testo collegati come detto erano presenti i font Verdana (nelle varianti regular, grassetto e corsivo) ed Eurostile (solo nella variante regular), ecco come appare la lista dei font per quel file:
Altra opzione aggiuntiva è la scheda Actionscript del pannello, che permette di esportare il font in maniera da poterlo utilizzare via Actionscript (per esempio per formattare i campi di testo sfruttando i CSS)
Conclusioni
Non siamo al livello di alcune funzionalità offerte dai programmi di impaginazione come ad esempio la possibilità di disporre automaticamente un testo intorno a un'immagine sfruttando anche trasparenze e percorsi di ritaglio, ma dopo numerose versioni in cui i testi erano stati un po' "lasciati da parte" vedere introdotte novità relative non solo al supporto delle lingue ma anche a un miglior utilizzo dei campi di testo lascia ben sperare per ulteriori sviluppi futuri e apre nuove possibilità agli utenti Flash, che possono finalmente utilizzare alcune funzionalità di cui in molti progetti si poteva avvertire la mancanza.
