28 settembre 2010

Gestione dei testi con TLF e Testo classico Parte 1

di Marcello Ruta

Tool utilizzati: Flash CS5
Requisiti: Cononoscenze di Actionscript 3.0
Assets Finali: text_TLF-1.fla, text_TLF-2.fla, text_TLF-3.fla
Flash Player 10

Le novità introdotte con l’ultima release di Flash CS5 sono molteplici, una di queste novità riguarda i campi di testo, infatti, è stato introdotto il campo di testo TLF (Text Layout Framework) e una nuova modalità di incorporamento dei caratteri.

Il Text Layout Framework si poteva utilizzare anche con Flash CS4, solo che non era disponibile nel pannello Proprietà perché ancora presentava dei bugs, che poi sono stati eliminati con il rilascio della versione CS5 di Flash. Comunque il Testo Classico disponibile nella versione CS4 di Flash e anche disponibile in Flash CS5 con ulteriori migliorie, le migliorie riguardano il nuovo sistema per incorporamento dei font.

TIPS: Per utilizzare correttamente il testo TLF occorre impostare il proprio FLA su Actionscript 3.0 e Flashplayer 10

Cosa c’è da sapere sul Testo Classico (Classic Text)?

Che con il Testo Classico abbiamo a disposizione tre tipi di campo di testo: Statico, Dinamico e di Input (quelli controllabili con Actionscript sono gli ultimi due). Con il Testo Classico abbiamo a disposizione le seguenti opzioni: posizione e dimensione, carattere, paragrafo, opzioni e filtri.

Cosa c’è da sapere sul Text Layout Framework (TLF)?

Che rispetto al Testo Classico, offre un maggior controllo sul testo e che esso è messo in un contenitore. Infatti, il testo TLF supporta un'ampia gamma di funzioni di layout del testo e di attributi di formattazione. L'aspetto del testo sarà gestito dalla classe TextFlow, tutto ciò in base alla configurazione dell'oggetto; di default il testo sarà impostato tramite una proprietà della classe di configurazione chiamata textFlowInitialFormat. La classe TextLayoutFormat ci consente di impostare il tipo di font, il colore, l’allineamento, la grandezza del font, etc., e poi dire alla configurazione che il suo textFlowInitialFormat è cambiato. Quindi possiamo dire che la classe TextFlow avrà la responsabilità di gestire tutto il testo all'interno di un contenitore.

Migliorie:

Rispetto al testo classico, il testo TLF fornisce i seguenti miglioramenti:

  • Stili di carattere aggiuntivi, tra cui interlinea, legature, colore di evidenziazione, sottolineatura, testo barrato, maiuscole/minuscole, tipo di cifre e molto altro.
  • Stili di paragrafo aggiuntivi, tra cui il supporto multi-colonna con larghezza del margine centrale, opzioni di giustificazione dell'ultima riga, margini, rientri, spaziatura dei paragrafi e valori di spaziatura dei contenitori.
  • Controllo degli attributi del testo asiatico, tra cui Tate Chu Yoko, Mojikumi, Tipo Kinsoku Shori e modello di interlinea.
  • Possiamo applicare attributi come la rotazione 3D, gli effetti di colore e i metodi di fusione al testo TLF senza inserirlo in un simbolo di clip filmato.
  • Il testo può scorrere tra più contenitori di testo, che in questo caso si definiscono concatenati o collegati.
  • La possibilità di creare testo con direzione da destra a sinistra per l'arabo e l'ebraico.
  • Supporto per il testo bidirezionale, con la possibilità di inserire elementi di testo da sinistra a destra in un testo con direzione da destra a sinistra. Questa opzione è importante, ad esempio, quando occorre incorporare parole inglesi oppure numeri arabi in un testo scritto in arabo o in ebraico.

Per il testo TLF abbiamo i seguenti pannelli:

  • Posizione e visualizzazione 3D,
  • Carattere avanzato,
  • Contenitore e flusso,
  • Effetti sul colore,
  • Visualizzazione.

Per il testo TLF cambiano anche le opzioni per il tipo di campo di testo, infatti non esiste più il testo statico, invece abbiamo questi tre nuovi tipi:

  • Campo di testo di sola lettura, (read only)
  • Campo testo selezionabile, (selectable)
  • Campo di testo modificabile. (editable)

Possiamo dire che il campo di testo di sola lettura è assimilabile ad un campo di testo di tipo Statico, con in più la possibilità di assegnare un nome di istanza, mentre gli altri due si può dire che sono le due alternative al campo di testo dinamico classico.

TIPS: quando pubblichiamo un file SWF che utilizza il testo TLF, Flash crea un altro file con estensione SWZ nella stessa posizione del nostro file SWF. Questo file con estensione SWZ, può essere caricato sul server remoto, come si può ometterlo di caricarlo.

Dopo questa breve introduzione vediamo qualche esempio pratico.

Esercizio 1

- Creiamo un FLA chiamato textTLF-1.fla, e lo salviamo.
- Aggiungiamo un livello actions.

Il primo passaggio consisterà nell’effettuare l’import del package flashx.textLayout per manipolare il nostro campo di testo, ecco il codice necessario:

import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flash.display.Sprite;

Quindi creiamo un oggetto contanier di tipo sprite:

var container:Sprite = new Sprite();
container.x = 10;
container.y = 10;
addChild(container);

Dopodiché aggiungiamo una variabile di tipo stringa dove racchiudiamo il nostro markup, ecco il codice:

var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p><span>Hello, World, 
and say hello!!</span></p></TextFlow>";

A questo punto aggiungiamo una variabile di tipo TextFlow per gestire l’aspetto del nostro testo, ecco tutto il codice neccesario affinché il nostro testo sia visibile:

var flow:TextFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);
flow.flowComposer.addController(new ContainerController(container, 200, 40));
flow.flowComposer.updateAllControllers();

Esercizio 2

Adesso faremo un esempio leggermente più complesso, con flash ancora aperto creiamoci un altro FLA chiamato textTLF-2.fla.

- Ci creiamo un livello actions;
- Quindi eseguiamo l’import del package flashx.textLayout;
- A questo punto iniziamo a scrivere il nostro codice

import flashx.textLayout.container.*;
import flashx.textLayout.conversion.*;
import flashx.textLayout.elements.*;
import flash.display.*;
import flashx.textLayout.formats.*;
/**
 *
 * Definizione del blocco
 * delle variabili
 *
 **/
var strTitle:String = "";
var strText_1:String = "";
var strText_2:String = "";
var strText_3:String = "";

var formatTitle:TextLayoutFormat;
var formatTxt:TextLayoutFormat;
var flow:TextFlow;
var pText_1:ParagraphElement;
var spanText_1:SpanElement;
var pText_2:ParagraphElement;
var spanText_2:SpanElement;
var pText_3:ParagraphElement;
var spanText_3:SpanElement;
var pText_4:ParagraphElement;
var spanText_4:SpanElement;
var link:LinkElement;
var linkSpan:SpanElement;

var container:Sprite;

function init():void {container = new Sprite();
	container.x = 5;
	container.y = 5;
	addChild(container);
        onSetStringHandler();
	onSetTextFormatLayoutHandler();
	onSetTextFlowHandler();
	onSetTextParagraph();
	addFlowHandler();
}

init();

// ================================
// DEFINIZIONE DELLE STRINGHE DI TESTO
// ================================

function onSetStringHandler():void {strTitle = "Gestione dei testi con TLF e Testo classico";
	strText_1 = "Le novità introdotte con l’ultima release di Flash CS5 sono molteplici, una di queste novità riguarda i campi di testo.";
	strText_2 = "Cosa c’è da sapere sul Text Layout Framework (TLF)?";
	strText_3 = "Che rispetto al Testo Classico, ha un maggior controllo sul testo e che esso è messo in un contenitore. Infatti, il testo TLF supporta un'ampia gamma di funzioni di layout del testo e di attributi di formattazione. L'aspetto del testo sarà gestito dalla classe TextFlow, tutto ciò in base alla configurazione dell'oggetto, di default il testo sarà impostato tramite una proprietà della classe di configurazione chiamata textFlowInitialFormat. La classe TextLayoutFormat ci consente di impostare il tipo di font, il colore, l’allineamento, la grandezza del font, etc., e poi dire alla configurazione che il suo textFlowInitialFormat è cambiato. Quindi possiamo dire che la classe TextFlow avrà la responsabilità di gestire tutto il testo all'interno di un contenitore. ";
}

// =======================================
// DEFINIZIONE DELLA FORMATTAZIONE DEL TESTO
// =======================================

function onSetTextFormatLayoutHandler():void {

formatTitle = new TextLayoutFormat();
	formatTitle.color = 0x990099;
	formatTitle.fontSize = 15;
	formatTitle.fontWeight = FontWeight.BOLD;

formatTxt = new TextLayoutFormat();
	formatTxt.color = 0x666555;
	formatTxt.fontFamily = "Verdana, Helvetica, _sans";
	formatTxt.fontSize = 11;
}

// =======================================
// DEFINIZIONE DELLA DISPOSIZIONE DEL TESTO
// =======================================

function onSetTextFlowHandler():void {flow = new TextFlow();
	flow.columnCount = 2;// numero di colonne
	flow.columnGap = 15;// distanza tra le colonne
	flow.paragraphSpaceBefore = 0;
	flow.paragraphSpaceAfter = 15;// distanza tra paragrafi
	flow.lineBreak = LineBreak.TO_FIT;
	flow.columnWidth = 250;// larghezza della colonna
	flow.paddingBottom = 0;
	flow.paddingLeft = 0;
	flow.paddingRight = 0;
	flow.paddingTop = 0;
	flow.verticalAlign = VerticalAlign.TOP;}

// ===========================================
// DEFINIZIONE DEI PARAGRAFI E AGGIUNTA DI UN LINK
// ===========================================

function onSetTextParagraph():void {

pText_1 = new ParagraphElement();
	spanText_1 = new SpanElement();
	spanText_1.text = strTitle;
	pText_1.addChild(spanText_1);
	pText_1.format = formatTitle;
	flow.addChild(pText_1);

pText_2 = new ParagraphElement();
	spanText_2 = new SpanElement  ;
	spanText_2.text = strText_1;
	pText_2.addChild(spanText_2);
	pText_2.format = formatTxt;
	flow.addChild(pText_2);

pText_3 = new ParagraphElement();
	spanText_3 = new SpanElement();
	spanText_3.text = strText_2;
	pText_3.addChild(spanText_3);
	pText_3.format = formatTitle;
	flow.addChild(pText_3);

pText_4 = new ParagraphElement();
	spanText_4 = new SpanElement();
	spanText_4.text = strText_3;
	pText_4.addChild(spanText_4);
	pText_4.format = formatTxt;
	flow.addChild(pText_4);

link = new LinkElement();
	link.href = "http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/conversion/TextConverter.html?allClasses=1#includeExamplesSummary";
	link.target = "_blank";
	link.linkNormalFormat = {color:0x00CCCC,textDecoration:"underline"};
	link.linkActiveFormat = {color:0x0000CC,textDecoration:"underline"};
	link.linkHoverFormat = {color:0xCC0000,textDecoration:"underline"};

linkSpan = new SpanElement();
	linkSpan.text = "Consulta l'Help online di Adobe";
	link.addChild(linkSpan);
	pText_4.addChild(link);

}

function addFlowHandler():void {

flow.flowComposer.addController(new ContainerController(container, 550, 300));
	flow.flowComposer.updateAllControllers();
	var outString:String = TextConverter.export(flow,TextConverter.TEXT_LAYOUT_FORMAT,ConversionType.STRING_TYPE) as String;
}

Esercizio 3

L’ultimo esempio che vedremo riguarderà il caricamento esterno del contenuto, e la disposizione su una o più colonne mediante dei pulsanti.

Adesso creiamoci un altro FLA chiamato textTLF-3.fla, aggiungiamo un livello e lo rinominiamo in Button, poi rinominiamo il Livello 1 in actions ed iniziamo a scrivere il nostro codice.

import flash.events.*;
import flash.net.*;
import flash.display.*;
import flashx.textLayout.elements.*;
import flashx.textLayout.container.*;
import flashx.textLayout.conversion.*;

// ===============================
// Dichiarazione blocco variabili
// ===============================

var urlRequest:URLRequest;
var urlLoader:URLLoader;
var flow:TextFlow;
var pathFile:String = "text.txt";
var fileTextContent:String;
var container:Sprite;

// ===============================
// aggiungiamo il container alla Display List
// ===============================

container = new Sprite();
container.x = 5;
container.y = 45;
addChild(container);

flow = new TextFlow();

function init():void {
	
	urlRequest = new URLRequest(pathFile);
	urlLoader = new URLLoader();
	urlLoader.addEventListener(Event.COMPLETE, onCompleteHandler);
	urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onErrorHandler);
	urlLoader.load(urlRequest);
	
}

init();

// ===============================
// Carichiamo il contenuto del file text.txt
// ===============================

function onCompleteHandler(e:Event):void {
	
	fileTextContent = e.target.data;
	//trace(fileTextContent);
	e.target.removeEventListener(Event.COMPLETE, onCompleteHandler);
	setupText();
}

function onErrorHandler(e:IOErrorEvent):void {
	
	e.target.removeEventListener(IOErrorEvent.IO_ERROR, onErrorHandler);
	trace("Error read data!!");
	
}

// ==============================
// Popoliamo il campo di testo 
// ==============================

function setupText():void {
	
	flow = TextConverter.importToFlow(fileTextContent, TextConverter.TEXT_LAYOUT_FORMAT);
	flow.flowComposer.addController(new ContainerController(container, 540, stage.stageHeight-60));
	flow.flowComposer.updateAllControllers();
}

// ================================
// Pulsanti per disporre il testo su più colonne
// ================================

// 1) recuperiamo il nome del pulsante usando e.target.name
// 2) recuperiamo il valore dal nome del pulsante usando la funzione substr()

btn1.addEventListener(MouseEvent.CLICK, onClickHandlerClm1);
btn2.addEventListener(MouseEvent.CLICK, onClickHandlerClm2);
btn3.addEventListener(MouseEvent.CLICK, onClickHandlerClm3);

function onClickHandlerClm1(e:MouseEvent):void {
	
	var splitValue:String = e.target.name;
	var curVal:Number = Number(splitValue.substr(3, 3));
	//trace(curVal)
	flow.columnCount = curVal;
	flow.flowComposer.updateAllControllers();

}

function onClickHandlerClm2(e:MouseEvent):void {
	
	var splitValue:String = e.target.name;
	var curVal:Number = Number(splitValue.substr(3, 3));
	//trace(curVal)
	flow.columnCount = curVal;
	flow.flowComposer.updateAllControllers();
}

function onClickHandlerClm3(e:MouseEvent):void {
	
	var splitValue:String = e.target.name;
	var curVal:Number = Number(splitValue.substr(3, 3));
	//trace(curVal)
	flow.columnCount = curVal;
	flow.flowComposer.updateAllControllers();
}

A questo punto il tutorial è concluso, nel prossimo vedremo con qualche esercizio dimostrativo l’uso del testo classico e la formattazione via css.

Risorse:

http://help.adobe.com/it_IT/flash/cs/using/WSb03e830bd6f770ee-4b0db644124bbdb363d-8000.html

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/elements/TextFlow.html?allClasses=1

http://www.flashandmath.com/flashcs5/gettext/index.html

http://www.flashandmath.com/flashcs5/textcols/index.html

Testo TLF

Vota

Comments