Fogli di stile con Actionscript 3

Inserito il 18-06-2009

Gestire i testi con CSS in AS3 non è più difficile che farlo in AS2, ovviamente cambiando le dinamiche del codice, che come al solito in caso di caricamenti esterni, in AS3, usufruirà della classe URLLoader. Per spiegare come agire in questo caso specifico, vediamo di semplificare con un esempio.

Poniamo di voler caricare questo testo dentro un textfield nel nostro fla:

<span class='size'>Lorem ipsum dolor sit amet,<img class='img' src='image.jpg' width='160' height='120'> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class='bold'>Ut enim ad minim veniam</span>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class='italic'>Duis aute irure</span> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class='bold'><span class='italic'>Excepteur sint occaecat</span></span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Come possiamo vedere abbiamo già impostato nel testo le classi css da utilizzare per una determinata visualizzazione di parti del testo e di conseguenza impostiamo il css esterno in questo modo:

.size {
	font-size: 12px;
	font-family: Arial;
	text-align: justify;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.img {
	margin: 0;
	padding: 0;
}

A questo punto abbiamo entrambi gli elementi che ci servono per creare la nostra area di testo su flash, su cui passiamo a scrivere il codice per la visualizzazione su un TextField.

// creo un textfield e gli assegno le proprietà che mi interessano, tra cui anche un nuovo foglio di stile per la proprietà styleSheet e lo attacco allo stage
var field:TextField = new TextField();
field.styleSheet = new StyleSheet();
field.width = 320;
field.height = 200;
field.multiline = true;
field.wordWrap = true;
field.x = field.y = 10;
addChild (field);
// creo un urlloader che userò sia per caricare il foglio di stile esterno che per caricare il testo html
var loader:URLLoader = new URLLoader(new URLRequest("style.css"));
// aggiungo un ascoltatore per l'evento "COMPLETE", che avvii la funzione loadCSS quando viene caricato il css
loader.addEventListener (Event.COMPLETE, loadCSS);
function loadCSS (evt:Event):void {
	// a caricamento completato rimuovo il vecchio evento e ne inserisco uno nuovo che al richiamo del nuovo load carichi il txt
	loader.removeEventListener (Event.COMPLETE, loadCSS);
	loader.addEventListener (Event.COMPLETE, loadTXT);
	// faccio il parsing del css assegnandolo al foglio di stile associato al textfield
	field.styleSheet.parseCSS (loader.data);
	// richiamo il load per caricare il txt con codice html
	loader.load (new URLRequest("html.txt"));
}
function loadTXT (e:Event) {
	// nella funzione legata al caricamento del txt rimuovo il secondo listener per il "COMPLETE" e assegno il testo ottenuto al textfield
	loader.removeEventListener (Event.COMPLETE, loadTXT);
	field.htmlText = loader.data;
}

Da ricordare che gli stili possono essere definiti anche direttamente dentro actionscript, utile nel caso sia necessario impostare le ricorrenze su un testo attraverso le espressioni regolari (per una chat, un forum o un guestbook ad esempio).