Flash Tutorial: Textfeld Stylesheet (CSS) mit AS 3

Textfelder in Flash zu formatieren ging bis Flash MX nur über internes Actionscript. Seit der Version Flash MX 2004 konnte man aber auch das bekannte CSS nutzen, das als Bestandteil für normale Html-Seiten eine vernünftige Struktur zur Formatierung von Texten bietet. Heute zeigen wir euch deshalb, wie man mit AS3 und einer CSS-Datei ebenso Texte in Flash formatieren kann.

1. Dazu müssen wir als erstes eine CSS-Datei mit dem Namen style.css anlegen und folgende Formatierungen für eine Überschrift einfügen:

h1{
font-family: Arial, Helvetica, sans-serif; // Die Auswahl der Fonts
color: #999999; // Die Schriftfarbe
font-size: 20px; // Die Schriftgröße
}

2. Danach erstellen wir in Flash ein dynamisches Textfeld mit einigen Eigenschaften und positionieren dieses auf der Bühne. Zum Schluß fügen wir es dann der Anzeigeliste hinzu. Der gesamte AS3-Code kommt dabei ins erste Bild der Hauptzeitleiste:

var tf:TextField = new TextField();
tf.width = 250;
tf.height = 200;
tf.x = 250;
tf.y = 250;
tf.wordWrap = true;
tf.multiline = true;
addChild(tf);

3. Nun müssen wir das Stylesheet, also die style.css laden. Dies geschieht mit dem URLLoader. Mit dem Event-Listener Event.COMPLETE wird das Laden dann abgefangen und die Funktion pushCSS() aufgerufen:

var url:URLRequest = new URLRequest("style.css");
var loader:URLLoader = new URLLoader();

loader.addEventListener(Event.COMPLETE, pushCSS);
loader.load(url);

4. Zum Schluß erstellen wir in der Funktion pushCSS() ein neues Stylesheet-Objekt und lesen anschließend mit der Methode parseCSS() das CSS aus. Abschließend ist es wichtig, das wir erst das CSS dem Textfeld zuweisen und dann den Text hinzufügen:

function pushCSS(evt:Event){
var css:StyleSheet = new StyleSheet();
css.parseCSS(loader.data);
tf.styleSheet = css;
tf.htmlText = "<h1>Das ist die formatierte Überschrift</h1>";
}

Nun können beliebig viele Textfelder in Flash mit CSS formatiert werden und man erspart sich eine Menge Arbeit.