TextField / Textfelder dynamisch erstellen

TextField Klasse Referenzen
TextField CS4 Adobe Hilfe
Adobe Entwicklerhandbuch Text

Inhalt dieser Seite

• Textfeld
• appendText, replaceText
• defaultTextFormat() Standardformat
• TextFormat() Klasse
• Zeichen formatieren
• Absätze formatieren
• Tabulatoren
• getTextFormat Formateigenschaften abrufen
• eingebettete Schriften / CS4 Bitmaptext
• Font Klasse Eigenschaften
• Anti Alias
• input Texteingabefeld
• User Eingaben formatieren
• Liste aller installierten- und eingebetteten Schriften
• Eingebettete Schriften aus externer SWF- Datei laden
• focus, Cursor im Textfeld
• htmlText und Style Sheet
• externe StyleSheet Datei
• Link als Event für Action
• Statischen Text abfragen / TextSnapshot
• lineMetrix Zeichenhöhe etc ermitteln
• TextField.charGetBoundaries()
• TLF Textfeld

Siehe auch FocusEvents und TextEvents auf der Seite Events

Die Es gibt viele Übereinstimmungen in Actionscript 3 und Actionscript 2 .

Es folgen die Eigenschaften der TextField Klasse

Siehe dazu auch die Referenzen, wo einiges ausführlicher erklärt wird.

Es folgen ein paar einfache Beispiele:

Das Textfeld wird standardmäßig auf eine Breite von 100 x 100 Pixel gesetzt.

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring";
addChild(tf);

Automatischer Zeilenumbruch

Automatischer Zeilenumbruch wird mit wordWrap = true; erzeugt. Ein hard codierter Zeilenumbruch wird im Text mit \n erzeugt:

tf.text="alle meine \nEntchen";

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring";
tf.wordWrap = true;
addChild(tf);

Automatische Größenänderung

Im folgenden Beispiel haben wir ein Textfeld, welches sich automatisch verbreitert. Bedenke, dass hier wordWrap nicht auf true gestellt werden darf. LEFT bedeutet der linke Rand des Textfeldes bleibt an seiner definierten Stelle.

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring, der wird jetzt mal ein bisschen verlängert.";
tf.border = true;
tf.x=10;
tf.y=10;
tf.autoSize = TextFieldAutoSize.LEFT;

addChild(tf);

Hier wurde autoSize auf RIGHT gesetzt. Wie man sieht, breitet sich das Textfeld nach Links aus und die rechte Kante bleibt, wo sie definiert ist. Das Textfeld liegt auf 10 Pixel, die Breite ist 250 Pixel, also liegt der rechte Rand des Textfeldes auf 260 Pixel.

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring, der wird jetzt mal ein bisschen verlängert.";
tf.border = true;
tf.x=10;
tf.y=10;
tf.width=250;
tf.autoSize = TextFieldAutoSize.RIGHT;

addChild(tf);

Hier wurde lediglich ein hard codierter Zeilenumbruch eingefügt.

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring,\nder wird jetzt mal ein bisschen verlängert.";
tf.border = true;
tf.x=10;
tf.y=10;
tf.width=250;
tf.autoSize = TextFieldAutoSize.RIGHT;

addChild(tf);

Textfeld, dass sich nach unten vergrößert.

Hierzu sind 2 Dinge nötig:
wordWrap muss auf true gestellt werden und
textFieldAutoSize muss etwas anderes als NONE bekommen.

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Das ist mein Textstring, der wird jetzt mal ein bisschen verlängert.";
tf.border = true;
tf.x=10;
tf.y=10;
tf.width=100;
tf.wordWrap = true;
tf.autoSize = TextFieldAutoSize.RIGHT;

addChild(tf);

multiline und Texteingabe

multiline ist vor allen Dingen bei Texteingabefeldern von Bedeutung. Denn ohne multiline=true; wäre keine mehrzeilige Texteingabe möglich. Gebe hier Text ein und drücke die Enter Taste für einen Zeilenumbruch.
Siehe auch Textinput

import flash.text.TextField;

var tf:TextField = new TextField();
tf.text="Texteingabe";
tf.type = TextFieldType.INPUT;
tf.multiline = true;

addChild(tf);

appendText() replaceText()

In AS2 wurde ein neuer Text folgendermaßen an einen bestehenden Text angehängt. Das funktioniert zwar immer noch, sollte aber aus Performance- Gründen nicht mehr gemacht werden:

tf.text="bla bla";
tf.text+="blu";

Stattdessen sollte man appendText und replaceText verwenden:

import flash.text.TextField;

var tf:TextField = new TextField();
tf.width=300;
addChild(tf);

tf.text="schönes Wetter";
trace(tf.text);//schönes Wetter
tf.text="Wetter";
trace(tf.text);//Wetter
tf.replaceText(0,0,"schlechtes ");
trace(tf.text);//schlechtes Wetter
tf.appendText(" heute");
trace(tf.text);//schlechtes Wetter heute
tf.replaceText(0,10, "schönes");
trace(tf.text);//schönes Wetter heute

replaceText(AnfangsIndex, EndIndex, String);

Das erste Zeichen ist 0. Wenn Anfangsindex und Endindex gleich sind, wird der Text an dieser Stelle eingesetzt und kein Zeichen ersetzt. replaceText() übernimmt das Format des Endindex. Wenn Anfangs und Endindex 0 sind, wird das Standardformat übernommen, Wenn Anfangs und Endindex gleich sind und größer als 0, wird das Format von Endindex -1 übernommen.

appendText(String);

Der Text wird an den vorhandenen angehängt. Es wird das Format des letzten Zeichens übernommen. Der vorhandene Text wird nicht neu formatiert.

Scroll Variablen

Das Textfeld hält einige Variablen für Scrolleigenschaften bereit. Siehe dazu das Beispiel. Siehe auch das Thema Event.SCROLL

Das Standardformat defaultTextFormat

Das Standardformat definiert man und weist es dem Textfeld zu, bevor man den Text zuweist.

Wenn keine anderen Formatierungen durch setTextFormat() zugewiesen wurden, wird jeder neu angehängte oder ersetzte Text in diesem Standardformat formatiert. Egal ob die Zuweisung durch Actionscript oder durch Usereingabe geschieht. Näheres zur TextFormat Klasse im nächsten Abschnitt.

import flash.text.TextFormat;
import flash.text.TextField;

var deFo:TextFormat = new TextFormat();
deFo.size=30;

var tf:TextField = new TextField();

tf.width=500;
tf.wordWrap = true;
tf.multiline = true;

tf.defaultTextFormat = deFo;

tf.text="alle meine Entchen ";
addChild(tf);

Würde man die letzten beiden Zeilen des vorigen Codebeispiels in der Reihenfolge tauschen, würde die Formatierung nicht zugewiesen.

FALSCH !!!!

tf.text="alle meine Entchen ";
tf.defaultTextFormat = deFo;

FALSCH !!!!

Formatierung TextFormat() Klasse

Hier werden Textfelder dynamisch erstellt und formatiert. Es gibt 3 Arten für die Formatierung, einmal über Html, über CSS und über die TextFormat Klasse. Im letzteren Fall wird für die Formatierung ein TextFormat Objekt instanziiert. Darin sind alle Formatierungen enthalten, wie Schriftart, Farbe, Größe, Ausrichtung etc. Diese Formatierung können dann einem TextFeld Objekt übergeben werden.

Beispiel textField1.swf

var format:TextFormat = new TextFormat();
format.color = 0x336699;
format.size = 50;
format.align = TextFormatAlign.CENTER;
format.font = "Brush Script MT";
var myText:TextField = new TextField();


	myText.embedFonts = true;
	myText.autoSize = TextFieldAutoSize.CENTER;
	myText.antiAliasType = AntiAliasType.ADVANCED;
	myText.selectable = false;
	myText.mouseEnabled = true;
	myText.defaultTextFormat = format;
	myText.text="Hallo Welt";
	
	
addChild(myText);
myText.x=10;
myText.y=10;	

Ein Textfeld welches sich nur nach unten hin vergrößert, braucht wordWrap=true und außerdem muss TextFieldAutoSize etwas anderes als NONE enthalten.

var tf:TextField= new TextField();
tf.wordWrap=true;
tf.width=400;
tf.autoSize=TextFieldAutoSize.LEFT;
tf.text="Hier muss man selbstverständlich noch mehr Text einfügen";
addChild(tf);

Hier noch ein paar weitere Eigenschaften von TextField und Textformat.

import flash.text.TextField;
import flash.text.TextFormat;

var myFormat:TextFormat = new TextFormat();
myFormat.bold=true;
myFormat.font="_sans";
myFormat.color=0x550066;
myFormat.italic=false;
myFormat.letterSpacing=2;
myFormat.size=15;
myFormat.leftMargin=20;
myFormat.rightMargin=20;
myFormat.align=TextFormatAlign.JUSTIFY;
//myFormat.blockIndent=30;
myFormat.indent=30;
myFormat.leading=20;

var linkFormat:TextFormat= new TextFormat();
linkFormat.url="http://www.on-design.de";
linkFormat.target="_blank";
linkFormat.underline=true;
linkFormat.color=0xff0000;

var tf:TextField= new TextField();
tf.wordWrap=true;
tf.width=400;
tf.autoSize=TextFieldAutoSize.LEFT;
tf.border=true;
tf.text="Hier kommt natürlich noch mehr Text rein";


tf.setTextFormat(myFormat);
tf.setTextFormat(linkFormat,5,10);
addChild(tf);

Zeichen formatieren

Es gibt folgende Character- Level- Format Variablen

Absätze formatieren Paragraph level format

Es gibt folgende Absatz Format Variablen

Ein neuer Absatz bedeutet in Actionscript eine neue hardcodierte Zeile. Diese kann man im Text mit folgender Zeichenfolge definieren \n
Eine neue Zeile, die durch wordWrap=true und einer festen Breite des Textfeldes automatisch entsteht, wird nicht als Anfang eines neuen Absatz gedeutet.
Will man verschiedenen Absätzen unterschiedliche Format Instanzen zuweisen, sollte man das erste und letzte Zeichen des Absatzes als Parameter in setTextFormat() angeben.

myText.setTextFormat(myFormat, 200, 350);

Bei einem Textfeld welches sich in der Breite anpasst reicht es aus, für Absatzformatierungen nur das erste Zeichen eines Absatzes in setTextFormat() als Parameter einzugeben.

myText.setTextFormat(myFormat, 200);

Macht man das jedoch bei einem Textfeld mit fester Breite und wordWrap = true, würde die Formatierung auf eine neue Zeile, die durch wordWrap= true ensteht, nicht angewendet.

Mit der Eigenschaft getParagraphLength() kann man die Länge eines Absatzes bestimmen. Siehe folgendes Beispiel:

Tabulatoren programmieren tabStops

Das folgende Beispiel lässt sich beispielsweise bei der Anzeige von Highscorelisten einsetzen. Die Formateigenschaft tabStops erwartet ein Array mit Pixelwerten, welche die Abstände der Tabulatoren definieren. Im Text kann man einen Tab über die Zeichenfolge \t setzen.

Achte darauf dass erst der String, also der eigentliche Text und dann die Instanz des Textformats zugewiesen wird.

tx.text = "Michael Albers \tDortmund";
tx.setTextFormat(ft);

Mit TLF Text kann man Tabulatoren auch händisch im Lineal oben setzen. Einfach irgendwo ins Lineal klicken. Durch Doppelklick erscheinen weitere Optionen, wie beispielsweise Tabulatoren mit rechts oder links Ausrichtung. Außerdem kann man an beiden Seiten den Leerraum zuweisen. Man kann einen Tabulator löschen, indem man ihn nach unten aus dem Lineal heraus zieht.

getTextFormat() Formateigenschaften abfragen

Mittels myTextfield.getTextFormat(beginIndex, endIndex) kann man Formateigenschaften einer Textstelle abfragen. Es wird ein Textformatobjekt zurückgegeben.

var neuesFormat:TextFormat = meinText.getTextFormat(0);

Wenn getTextFormat mit nur einem integer Argument aufgerufen wird oder wenn das zweite Argument um eins höher als das erste ist, wird das Format eines Buchstabens zurückgegeben.

Wenn getTextFormat() für mehrere Buchstaben aufgerufen wird, wird ein Textformatobjekt zurückgegeben, welches alle Formateigenschaften der enthaltenen Buchstaben enthält. Wenn ein spezifisches Format (z.B.: bold, italic, underline) nicht für alle enthaltenen Buchstaben gleich ist, bekommt die Formateigenschaft den Wert null.

Eingebettete Schriftart verwenden

Adobe Hilfe eingebettete Schriften

Adobe Artikel embedded Fonts

Es gibt

1. eingebettete Schriftarten embedded Fonts, welche in der SWF-Datei mitgeliefert werden oder
2. Geräteschriftarten device Fonts, welche auf dem System des Users installiert sind.

Außerdem kann man bei Geräteschriftarten "_sans", "_serif" oder "_typewriter" angeben. Dann wird eine serifenlose (Arial, Helvetica) eine Schriftart mit Serifen (Times) oder eine monospace Schriftart des lokalen Systems genommen.

Bedenke auch, das gedrehte oder verzerrte Schriften nur mit eingebetteten Schriftarten möglich sind.

Will man einem dynamischen Text eine Schriftart zuweisen, muss man zuvor eine Klasse dieser Schriftart in der Bibliothek erstellen. Das Procedere geht folgendermaßen:

1. Klicke in der Bibliothek oben rechts auf die Optionen.
2. Wähle: Neue Schriftart
3. Wähle eine Schriftart aus und trage unter "Name:" einen passenden Namen für die Schriftart ein. Hier sind Leerzeichen erlaubt. Dieser Name hat für Actionscript keine Bedeutung, der ist nur Kosmetik. Wichtiger ist die Bezeichnung unter "Familie"
4. Aktiviere: a) Export für Actionscript, b) in erstes Bild kopieren, Export in Bild 1
5. Vergebe einen Klassennamen, ohne Leerzeichen und Sonderzeichen, nachfolgend "Klassenname" genannt.

Nun kann man diese Schriftart einem TextFormat Objekt zuweisen und zwar als Eigenschaft font. Gebe hier die Bezeichnung der Schriftart"Familie" als String ein, nicht den Klassennamen und nicht den selbst vergebenen Namen.
myFormat.font = "Brush Script MT";
Im Textfeld muss neben der Zuweisung des Formatobjektes auch die Eigenschaft embedFonts auf true gesetzt werden.
myTextfield.embedFonts = true;

nächste Seite