TextFlowPro, testo in colonne

Analizzeremo le possibilità offerte dalla libreria TextFlowPro che, sebbene embrionale, mostra già alcune feature interessanti. Unica pecca notevole è la mancanza di documentazione, ma grazie agli esempi proposti dall’autore è

Recentemente si è parlato del Text Layout Framework, tecnologia che permette di sfruttare maggiormente i campi di testo in Flash. Esiste però una classe, creata da Grant Skinner, che offre opzioni interessanti ed è utilizzabile anche con il Flash Player 9, inoltre è molto più leggera del Text Layout Framework.

Scopo e feature della classe

Lo scopo di questa classe, come si può intuire anche dal nome (TextFlow letteralmente sta per “flusso di testo”), è quello di organizzare il testo, potendolo disporre in più campi, così da creare delle composizioni composte da più colonne o anche visualizzazioni un po’ particolari.

Un esempio di disposizione del testo

Installazione della classe

Per prima cosa scarichiamo la versione più recente delle classi; nel file ZIP troveremo la cartella com (contenente le classi) e due file di esempio d’uso della libreria completi di sorgenti.

Trattandosi di classi, sarà sufficiente estrarre il contenuto del file in una cartella a nostro piacere, dopo di che potremo salvare il nostro FLA nella stessa directory in cui abbiamo posizionato la cartella com, o in alternativa settare quest’ultima tra i percorsi di classe del nostro FLA.

Disporre un testo su più colonne

L’esempio più semplice è la disposizione di un testo su più colonne, mantenendo il flusso di testo come avviene normalmente nei software di impaginazione:

Disposizione del testo su più colonne

A prima vista potrebbe sembrare un risultato facile da ottenere anche con i normali campi di testo, semplicemente inserendo tre campi multilinea; se proviamo però a modificare il testo, noteremo come questo sia in grado di passare automaticamente tra le colonne. Non è un risultato otteninibile coi classici campi di testo di Flash, a meno di non utilizzare massicciamente Actionscript: in questo caso, invece, bastano pochissime righe di codice, a tutto il resto pensa automaticamente la classe TextFlowPro.

Per ottenere tale risultato disponiamo tre campi di testo di input multilinea e diamo loro nome istanza testo1, testo2 e testo3. Ora inseriamo l’intero testo all’interno della prima colonna; risulterà tagliato dato che le tre colonne al momento non sono collegate.

Apriamo quindi il pannello Azioni e inseriamo questo codice:

// importiamo la classe
import com.gskinner.text.TextFlowPro;
// disponiamo il testo nei tre campi
var tf:TextFlowPro = new TextFlowPro([testo1,testo2,testo3]);

Con queste sole due righe abbiamo ottenuto il risultato voluto. Nel caso volessimo aggiungere una colonna, basterà creare un nuovo campo di testo, dargli nome istanza testo4 e cambiare la seconda riga di codice:

var tf:TextFlowPro = new TextFlowPro([testo1,testo2,testo3,testo4]);

Con il codice usato, se proviamo a selezionare il testo, notiamo che c’è un problema: la selezione all’interno di una stessa colonna funziona correttamente, ma non avviene il passaggio da una colonna all’altra. A questo si può facilmente ovviare aggiungendo il seguente codice:

tf.alwaysShowSelection = true;

È utile che questo campo sia opzionale, poiché, in alcune situazioni, potremmo preferire una selezione che non passi attraverso i vari campi di testo, ma che permetta di modificare una sola colonna per volta.

Rendere più dinamico il flusso di testo

Finora abbiamo visto esempi dove potevamo cambiare il testo, ma non i campi di testo che lo contenevano; è invece possibile ridimensionare anche i contenitori e ottenere una perfetta ridisposizione. Ciò si rivela utile per pannelli e interfacce, dato che ci permette di ampliare o ridurre lo spazio occupato da un elemento in maniera molto semplice e mantenendo comunque coerenti i contenuti.

Disposizione del testo al ridimensionamento delle colonne

Anche in questo caso, nonostante l’effetto visivo sia decisamente ottimo, bastano poche righe di codice, grazie soprattutto al comando reflow della classe TextFlowPro: ques’ultimo “aggiorna” il testo, per cui una volta modificata l’altezza dei campi di testo basterà chiamare questo comando perché il tutto si adatti alle nuove colonne.

La comparsa dell’indicazione “more” è invece regolabile sfruttando il comando getOverflow: questa istruzione della classe ci permette di ricavare il testo che eventualmente rimane “al di fuori” dell’area visibile nei campi di testo, ne consegue che se ci sono più di 0 caratteri in overflow non tutto il testo è attualmente visibile.

import com.gskinner.text.TextFlowPro;
var tf:TextFlowPro = new TextFlowPro([testo1,testo2,testo3]);
tf.alwaysShowSelection = true;

// listener per la barra di ampliamento/riduzione colonne
dragBar.addEventListener(MouseEvent.MOUSE_DOWN, handleDown, false, 0, true);
dragBar.useHandCursor = true;

function handleDown(evt:MouseEvent):void {
  // al movimento, sposta la barra
  stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMove, false, 0, true);
  // al rilascio, smette di muovere la barra
  stage.addEventListener(MouseEvent.MOUSE_UP, handleUp, false, 0, true);
}

// funzione per lo spostamento della barra
function handleMove(evt:MouseEvent):void {
  // posiziono la barra
  dragBar.y = Math.min(390,Math.max(testo1.y+100,mouseY));
  // aggiorno il testo
  update();
}

// funzione per il rilascio della barra
function handleUp(evt:MouseEvent):void {
  // smette di muovere la barra
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleMove);
  // rimuove il listener del MouseUp
  stage.removeEventListener(MouseEvent.MOUSE_UP, handleUp);
}

// funzione di aggiornamento del testo
function update():void {
  // ridimensiona i campi di testo
  testo1.height = testo2.height = testo3.height = dragBar.y-testo1.y-5;
  // posiziona il “more”
  more.y = testo3.height+testo3.y;
  // ridispone il testo
  tf.reflow();
  // se l’overflow del testo è superiore a 0, mostra “more”, altrimenti no
  more.visible = tf.getOverflow().length > 0;
}

Disposizione avanzata

Figura 1. La forma che useremo nel nostro filmato Stella

Per prima cosa importiamo l’immagine all’interno del nostro file Flash, quindi convertiamola in MovieClip. A questo punto creeremo internamente al movieclip alcuni campi di testo, in modo da seguire la forma della stella. Il numero di campi di testo, e la loro disposizione, sono a piacere, nell’esempio sono stati usati 5 campi di testo.

Figura 2. I campi di testo creati nella stella Stella

Disponiamo ora alcune stelle sullo stage, dando loro nome istanza da stella1 a stella4. Come ultima operazione, prima del codice, creiamo un campo di testo dinamico con nome istanza contenuto e scriviamo al suo interno il testo che vogliamo mostrare nelle stelle, posizioniamo quindi questo campo di testo fuori dallo stage.

Inseriamo il seguente codice:

// importiamo la classe
import com.gskinner.text.TextFlowPro;
// creiamo l’array dei campi
var campi:Array = [];
// per ogni stella presente
for (var i:int=1; i<=4; i++) {
  // ricaviamo il movieclip della stella
  var stella:MovieClip = getChildByName(“stella”+i) as MovieClip;
  // aggiungiamo i 5 campi di testo presenti nella stella all’array
  campi.push(stella.testo1,stella.testo2,stella.testo3,stella.testo4,stella.testo5);
}
// impostiamo il flusso di testo
var tf:TextFlowPro = new TextFlowPro(campi,contenuto.text);
// impostiamo le linee iniziali e finali del campo di testo a zero
tf.orphans = tf.widows = 0;
// aggiorniamo il testo
tf.reflow();

Il testo viene ricavato dinamicamente da un campo di testo (contenuto.text), a differenza dell’esempio precedente dove il testo era stato inserito nel primo campo di testo della sequenza.

Disposizione del testo all’interno di forme

Comandi della classe

Non esiste una documentazione ufficiale della classe, tuttavia ecco un breve riassunto dei comandi attualmente supportati:

  • var campi:Array = [camp1,campo2,campo3]
  • var textFlow:TextFlowPro = new TextFlowPro(campi,testo) // creazione del flusso di testo
  • reflow: aggiorna il flusso del testo
  • setSelectio(inizio,fine): imposta la sezione sui caratteri tra inizio e fine
  • clearSelection(): annulla la selezione
  • getOverflow(): restituisce il testo in eccesso
  • alwaysShowSelection : imposta se mostrare o meno la selezione attraverso le colonne
  • type: stabilisce il tipo di campi di testo
  • text: stabilisce il contenuto del flusso
  • selectionBeginIndex: inizio della selezione
  • selectionEndIndex: fine della selezione
  • tabIndex : stabilisce l’oridne del flusso quando si usa il tasto TAB
  • textFields: array dei campi che compongono il flusso
  • orphans: numero minimo di linee all’inizio di un campo di testo
  • windows: numero minimo di linee alla fine di un campo di testo

I Video di HTML.it

Applicazioni mobile in HTML5, migliora lo scenario

Valerio Di Donato si dice ottimista rispetto alla crescita di HTML5 come tecnologia per lo sviluppo di applicazioni mobile e […]