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
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
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
Se vuoi aggiornamenti su TextFlowPro, testo in colonne inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i
seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
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 […]
Come creare un’applicazione per la gestione di un negozio di commercio elettronico con il framework PHP Laravel. Una guida completa che, partendo dalla configurazione di un ambiente di sviluppo basato su Laravel, descrive nel dettaglio tutti i passaggi necessari per pubblicare un e-commerce con cui promuovere e vendere i propri prodotti online