Neulich – Online Marketing & Webseitenoptimierung | by Hansen World

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.

Wer schreibt hier eigentlich?

Hansen World Logo
Wirb an einem anderen Tag und hol dir bei uns unverschämt gute Tipps zu Online Marketing und Webseitenoptimierung! Geschrieben von echten Arbytestieren der Digitalagentur Hansen World, hosted in Berlin und Quedlinburg. In der Zwischensite macht Hansen World Webdesign und Online Marketing für Kunden und die Kunden seiner Kunden - kompromisslos digital, leidenschaftlich online.

Du willst die ganze Wahrheit? Erfahre mehr über unsere Agentur!
Home

2 Kommentare zu “Flash Tutorial: Textfeld Stylesheet (CSS) mit AS 3”

  1. Sebastian Fritzsche sagt:

    Also bei mir wird das CSS nicht angewandt…ganz normale schrift auch wenn ich im CSS 40px sage

  2. tobi sagt:

    bei vielen klappt’s nicht, weil glaub ich

    tf.html = true;

    fehlt. versucht es mal. sonst aber ein gutes tutorial. danke 🙂