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.

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;

Bitmaptext / Schriftgröße

In Flash CS4 oder früher kann man unter Schritt 3 (dem Optionsfenster der Bibliothek) die Option Bitmaptext auswählen und dann eine Größe in Pixeln angeben. Dadurch wird eine Schriftart ohne AntiAlias erzeugt, welches gerade bei kleinen Schriften zu erhöhter Lesbarkeit führen kann. Die Schrift sollte dann auch nur in dieser Schriftgröße benutzt werden, nicht vergrößert werden und auf den Pixel genau positioniert werden. Flash erzeugt von jedem Buchstaben eine Vektorgrafik mit Pixelkante. Also eine treppenstufige Vektorgrafik, welche an die Bildschirmpixel angepasst ist.
ACHTUNG !!! Der Schriftname bei Bitmaptext ist nicht nur der Familienname sondern der Familienname wird auf folgende Weise erweitert:

FontName_8pt_st

Hierbei steht FontName für denFamilienname der Schrift und die 8 für die eingestellte Größe und st für Standard. Wenn man die Schrift einem Formatobjekt zuweist, sollte man diesen veränderten Namen nehmen, dann funktioniert es. Außerdem kann man sich den Fontname auch ausgeben lassen, siehe unten.

Bitmaptext

Es gibt Schriftarten, die speziell für Bitmaptext erstellt wurden, da die Proportionen an die Pixel angepasst sind. Man sollte diese Schriften nur in der vorgeschlagenen Größe benutzen. Hier ein Link zu "Fonts for Flash"

Auf folgende Weise wird die Schriftart zugewiesen, achte auf die Reihenfolge der Anweisungen.

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

var fo:TextFormat= new TextFormat();
fo.font = "Verdana";
fo.size=20;

var tf:TextField= new TextField();
tf.embedFonts = true;
tf.defaultTextFormat = fo;
tf.text="blöd blöd blöd";
addChild(tf);

Wenn man die Schriftart auch mit bold, italic und bold-italic verwenden will, muss die Schrift mit diesen Formatierungen nochmal auf die gleiche Weise in die Bibliothek eingebunden werden. Wähle also in der Bibliothek "neue Schriftart" wähle die Schriftart erneut aus und wähle einen anderen Stil. Vergebe einen eindeutigen Namen. Erzeuge die Klasse. Setze in Actionscript die Eigenschaft bold oder italic oder beides auf true.

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

var fo:TextFormat= new TextFormat();
fo.font = "Verdana";
fo.size=20;
fo.bold=true;
var tf:TextField= new TextField();
tf.embedFonts = true;
tf.defaultTextFormat = fo;
tf.text="blöd blöd blöd";
addChild(tf);

Fontklasse Eigenschaften abrufen

Adobe Referenzen font Klasse

Hat man wie oben beschrieben eine Fontklasse in der Bibliothek erstellt, so ist es möglich Eigenschaften dieser Klasse abzufragen. So hat man beispielsweise die Möglichkeit den Familiennamen der Schrift zu erfahren, um diesen dann der font Eigenschaft eines Formatobjekts zuzuweisen. Im folgenden Beispiel ist Times der Klassenname der Schrift.

var embeddedFont:Font = new Times();
trace(embeddedFont.fontName);//Times New Roman
trace(embeddedFont.fontStyle);//regular
trace(embeddedFont.fontType);//embedded

var textFormat:TextFormat = new TextFormat();
textFormat.font = embeddedFont.fontName;

AntiAliasType

Für Textfelder mit eingebetteten Schriftarten und der Eigenschaft embedFonts=true werden 2 verschiedene Arten den Text zu rendern angeboten.

NORMAL der Standard Vektor Renderer erzeugt weiche, antialiasing Schriften, die bei mittlerer bis großer Schrift gut lesbar sind (16 oder höher) doch bei kleinen Schriften (12 oder kleiner) ist das Ergebnis eher schlecht lesbar. Der Renderer ist schneller bei größeren Schriften. NORMAL ist die Standardeinstellung bei eingebetteten Schriften.

ADVANCED der "FlashType" Renderer ist für kleine Schriften gut geeignet. Achtung, wenn der Text gestreckt, gestaucht oder gespiegelt wird, wird dieses FlashType Rendering deaktiviert.

var tf:TextField = new TextField();
tf.embedFonts=true;
tf.antiAliasType= AntiAliasType.ADVANCED;

Ein händisch auf der Bühne aufgezogenes Textfeld hat im Eigenschaftenfenster verschiedene Anti Alias Optionen:

thicknes sharpnes

thickness ist die Stärke und sharpness die Schärfe der Glyphenkanten in einem Textfeld.

Diese beiden Eigenschaften lassen sich nur beim Renderer FlashType nutzen:
tf1.antiAliasType = AntiAliasType.ADVANCED;
sharpness Werte von -400 bis 400 möglich
thickness Werte von -200 bis 200
Diese Einstellungen kann man auch im Eigenschaftenfenster bei benutzerdefinierten AntiAliasing vornehmen.

gridFitType

Die für dieses Textfeld verwendete Art der Rasteranpassung. Erhöht die Lesbarkeit bei kleinen Schriften, da die Ausrichtung der Glyphen auf ganze Pixel gesetzt werden.
Man kann diese Eigenschaft nur bei dem FlashType Renderer einsetzen:
tf1.antiAliasType = AntiAliasType.ADVANCED;

ft.gridFitType=GridFitType.NONE
ft.gridFitType=GridFitType.PIXELBeste Lesbarkeit für linksbündigen Text
ft.gridFitType=GridFitType.SUBPIXEL Die Einstellung eignet sich oft für rechtsbündigen oder zentrierten dynamischen Text und ist manchmal eine praktische Alternative, wenn zwischen Animations- und Textqualität abzuwägen ist.

Zur Darstellung des Textes siehe auch folgende Themen in den Referenzen:

DisplayMode
TextRenderer Klasse

Texteingabe

Ein Texteingabefeld definiert man folgendermaßen:
myText.type = TextFieldType.INPUT;
Die Anzahl der Zeichen die als Texteingabe möglich sind, definiert man mit maxChars. Diese Einschränkung gilt nur für die Texteingabe. Es ist trotzdem möglich über Actionscript mehr Zeichen in dem Textfeld darzustellen.

var format:TextFormat = new TextFormat();
format.color = 0x336699;
format.size = 40;
format.align = TextFormatAlign.LEFT;
format.font = "Aurora Cn BT";

var myText:TextField = new TextField();

myText.defaultTextFormat = format;

myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.width = 250;
myText.height = 40;
myText.border = true;
myText.maxChars=10;
myText.type = TextFieldType.INPUT;
myText.x = 10;
myText.y=40;
myText.text="mehr als 10 Zeichen";
addChild(myText);

User Eingabe formatieren

Nutzereingaben in einem Texteingabefeld übernehmen die Formatierung des Zeichens vor der Einfügemarke. Wenn die Einfügemarke am Anfang steht (vor Index 0) wird die Formatierung von Index 0 übernommen. Wenn das Textfeld leer ist wird das Standardformat übernommen. Im folgenden Beispiel wird die Aktualisierung des Textfeldes verhindert und der Text mit programmatisch definierter Formatierung eingefügt siehe die Hinweise im Quellcode. Siehe auch Event / TextEvent

import flash.text.TextFormat;

// Textformatobjekte erzeugen
var standardFormat:TextFormat= new TextFormat();
standardFormat.size=20;

//Textfeld erzeugen, Eigenschaften und Format zuweisen
var myT:TextField = new TextField();
myT.defaultTextFormat = standardFormat;
myT.text = "Texteingabe";
myT.width = 300;
myT.type = TextFieldType.INPUT;

//text zur Display List
addChild (myT);

//myT für TextEvent.TEXT_INPUT events registrieren
myT.addEventListener (TextEvent.TEXT_INPUT, textInputListener);

// Funktion wird ausgelöst wenn der User Eingaben macht
function textInputListener (e:TextEvent):void
{
	//eine Referenz erhalten auf das Textfeld das Texteingaben empfängt
	var tf:TextField = TextField(e.target);

	//Verhindern dass der vom User eingegebene Text, dem Textfeld hinzugefügt wird
	e.preventDefault ();
	//der vom User eingegeben Text wird jetzt "händisch" eingefügt und vorher formatiert
	tf.replaceText (tf.caretIndex, tf.caretIndex, e.text);

	//Format Objekt erzeugen für den neuen Text
	var inputFormat:TextFormat = new TextFormat();
	inputFormat.bold = false;
	inputFormat.italic = false;
	inputFormat.font = "_sans";
	inputFormat.color = 0x993300;
	tf.setTextFormat (inputFormat, tf.caretIndex, tf.caretIndex+e.text.length);

	//da der Text nicht vom User eingegeben wurde (e.preventDefault) sondern durch AS
	//steht der Cursor am Anfang des neu hinzugefügten Textes (tf.replaceText)
	//wir setzen den Cursor ans Ende des neu hinzugefügten Textes per AS
	var newCaretIndex:int = tf.caretIndex + e.text.length;
	tf.setSelection (newCaretIndex, newCaretIndex);
}

Textformatierung Beispiel

Beispiel textField2.swf

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




textCont.addChild(myText);


function textGrundFormat():void {
	myText.embedFonts = true;
	myText.autoSize = TextFieldAutoSize.CENTER;
	myText.antiAliasType = AntiAliasType.ADVANCED;
	myText.defaultTextFormat = format;
	myText.selectable = false;
	myText.mouseEnabled = true;
	myText.text=labelTi.text;
	myText.x=myText.textWidth/-2;
	myText.y=myText.textHeight/-2;
}


function tiListener(evt:Event) {
	textGrundFormat();
}
function sizeListener(evt:Event) {
	format.size=evt.target.value;
	textGrundFormat();
}



txtSzSld.addEventListener("change",sizeListener);
labelTi.addEventListener("change", tiListener);

In dieser fla Datei befindet sich eine MovieClip Instanz in der Mitte der Bühne, die den Instanznamen textCont hat. Dieser fungiert als Textcontainer. Dort wird der dynamische Text oder das TextField Objekt namens myText eingefügt textCont.addChild(myText). Hier wollte ich erreichen, dass der Registrierpunkt des Textcontainers in der Mitte des Textfeldes liegt.
myText.x=myText.textWidth/-2;
myText.y=myText.textHeight/-2;

Desweiteren befinden sich 2 UI-Komponenten auf der Bühne, eine Textinput- und eine Sliderkomponente. Die Namen sind labelTi und txtSzSld. Die Sliderkomponente soll mittels der Funktion sizeListener die Größe des Textes ändern. Wenn man im TextFormat Objekt einen oder mehrere Eigenschaften ändert, muss man auch die Eigenschaften des Textobjektes erneut zuweisen. Eine genauere Erklärung folgt später. Daher habe ich hier die Funktion GrundFormat() erstellt, in der alle Eigenschaften des Textobjektes enthalten sind. Außerdem wird auch hier die x und y Position neu zugewiesen, denn diese ändert sich je nach Textlänge und Größe.

Textanzeige in einer eigenen Sprite Klasse

Beispiel textfeld3.swf, anzeigeText.as

Dieses Beispiel könnte beispielsweise als verschiebbares Textfeld in einem T-Shirt Konfigurator dienen. Hier habe ich einige Funktionen aus dem vorigen Beispiel in eine Klassendatei vom Typ Sprite gepackt. Es folgt der Code dieser Klasse: Tlabel. Beim Aufruf der Konsturktorfunktion wird eine Schriftart und x- und y-Position erwartet. Hier muss eine Schriftklasse erstellt werden, wie im vorigen Beispiel erklärt. Außerdem habe ich einige Setter und Getter Funktionen eingebaut.

textField3.fla

Hier folgt der Code der fla Datei. Hier wurden UI Komponenten benutzt: Textinput, Slider und ColorPicker. Beachte, dass für den Colorpicker einige Importfunktionen in der fla Datei eingefügt werden müssen.

import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;


var myText:textAnzeige;
myText= new textAnzeige("Arial");
addChild(myText);
myText.x=275;
myText.y=200;

myText.font="Brush Script MT";


function tiListener(evt:Event) {
myText.beschriftung=evt.target.text;
}

function sizeListener(evt:Event) {
	myText.size=evt.target.value;
}

function setzFarbe(event:ColorPickerEvent):void {
	myText.color=event.color;
}

colorPick.addEventListener(ColorPickerEvent.CHANGE, setzFarbe);
txtSzSld.addEventListener("change",sizeListener);
labelTi.addEventListener("change", tiListener);

textAnzeige.as

package {
	import flash.geom.Point;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	import flash.events.MouseEvent;
	import flash.text.TextFormatAlign;


	public class textAnzeige extends Sprite {
		protected var _Text:String="Hallo Welt";
		protected var _Size:Number;
		protected var _Font:String;
		protected var _Farbe:uint;
		protected var format:TextFormat;
		private var textfeld:TextField;
		private var textCont:Sprite;



		public function textAnzeige(schriftart:String) {
			_Size=50;
			_Font=schriftart;
			_Farbe=0x000000;
			format= new TextFormat();
			format.size = _Size;
			format.font = _Font;
			format.color = _Farbe;
			textfeld = new TextField();
			basicFormat();
			textCont= new Sprite();
			addChild(textCont);
			textCont.addChild(textfeld);
			this.addEventListener(MouseEvent.MOUSE_DOWN, startschieben);
			this.addEventListener(MouseEvent.MOUSE_UP, stopschieben);
		}

		protected function basicFormat():void {
			textfeld.embedFonts = true;
			textfeld.autoSize = TextFieldAutoSize.CENTER;
			textfeld.antiAliasType = AntiAliasType.ADVANCED;
			textfeld.defaultTextFormat = format;
			textfeld.selectable = false;
			textfeld.mouseEnabled = true;
			textfeld.text=_Text;
			textfeld.x=textfeld.textWidth/-2;
			textfeld.y=textfeld.textHeight/-2;
		}


		public function set size(groesse:uint) {
			_Size=groesse;
			format.size=groesse;
			basicFormat();
		}
		public function set font(schriftart:String) {
			_Font=schriftart;
			format.font = _Font;
			basicFormat();
		}
		public function set color(farbe:uint) {
			_Farbe=farbe;
			format.color = _Farbe;
			basicFormat();
		}
		public function set beschriftung(texteingabe:String) {
			_Text=texteingabe;
			textfeld.text=_Text;
			basicFormat();
		}
		
		
		private function startschieben(evt:MouseEvent):void {
			this.startDrag();
		}
		
		
		private function stopschieben(evt:MouseEvent):void {
			this.stopDrag();
		}
		
	}
}

Liste aller installierten oder eingebetten Schriften

import flash.text.Font;

var allFonts:Array=Font.enumerateFonts(true);

allFonts.sortOn("fontName", Array.CASEINSENSITIVE);

var embeddedFonts:Array=Font.enumerateFonts(false);

embeddedFonts.sortOn("fontName", Array.CASEINSENSITIVE);

for (var i:uint=0; i<embeddedFonts.length; i++) {

	trace(embeddedFonts[i].fontName);

}

Mittels Font.enumerateFonts() kann man sich alle Schriftarten anzeigen lassen.
Setzt man den Parameter auf true, bekommt man alle installierten Schriften
Setzt man den Parameter auf false, bekommt alle eingebetteten Schriften.

Schriftarten einbetten geschieht auf ähnliche Weise wie in AS2, siehe oben.

ACHTUNG !!
Aufgepasst, wenn man per Hand ein dynamisches Textfeld auf die Bühne zieht, in der man eine Schriftart einbettet, so wird auch diese Schriftart mit aufgelistet.

Im nächsten Beispiel wird eine Combo Box erzeugt, die alle eingebetteten Schriftarten auflistet.

import fl.controls.ComboBox;
import fl.data.DataProvider;

var fontArray:Array=Font.enumerateFonts(false);
fontArray.sortOn("fontName", Array.CASEINSENSITIVE);
var dp:DataProvider=new DataProvider(fontArray);

var myComboBox:ComboBox = new ComboBox();
myComboBox.dataProvider=dp;
myComboBox.dropdown.iconField=null;
myComboBox.labelField="fontName";
myComboBox.width=200;
myComboBox.move(10, 10);
addChild(myComboBox);

Fonts aus externer SWF- Datei laden

Siehe auch Movieclip Klassen aus externer Bibliothek laden

Um die Dateigröße zu Verringern, kann es von Vorteil sein, wenn Schriftarten in eine eigens dafür erstellte SWF- Datei eingebettet und reingeladen werden. Das Procedere geht folgenermaßen:

• Fontklasse erzeugen wie oben beschrieben
• Die statische Methode der Fontklasse registerFont() aufrufen
• SWF- Datei in eine andere SWF- Datei laden (siehe Tipp Loader), Schriftformat und Textfelder erzeugen, wenn SWF- Datei komplett geladen ist

Erzeuge eine fla Datei namens fonts.fla und erstelle in der Bibliothek eine Schriftklasse für die Schriftart "Verdana" mit Klassennamen "Verdana". Erzeuge eine weitere Schriftklasse für Verdana bold mit Klassennamen "VerdanaBold".

Im ersten Bild füge folgendes Actionscript ein.

Font.registerFont(Verdana);
Font.registerFont(VerdanaBold);

Erzeuge die SWF-Datei fonts.swf.
Erzeuge im gleichen Ordner eine loadFonts.fla und füge folgendes Actionscript im ersten Bild ein:

var loader:Loader;

loader= new Loader();
var urlRequest:URLRequest = new URLRequest("fonts.swf");
loader.load(urlRequest);
loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);


function initListener(evt:Event)
{
	var format:TextFormat = new TextFormat();
	format.color = 0x336699;
	format.size = 50;
	format.font = "Verdana";
	format.bold = true;
	
	var myText:TextField = new TextField();
	myText.embedFonts = true;
	myText.autoSize = TextFieldAutoSize.LEFT;
	myText.defaultTextFormat = format;
	myText.text = "Hallo Welt";
	myText.x = 10;
	myText.y = 10;

	addChild(myText);

}

Focus oder Cursor in ein Eingabetextfeld setzten

Siehe auch meinen Tipp Focus Events

Im folgenden Beispiel wird der Focus in ein Textfeld mit Instanznamen myInput per Actionscript gesetzt, so dass man losschreiben kann, ohne es zuvor mit der Maus oder Tabulatortaste auszuwählen.

this.stage.focus = myInput;

Oder wenn man ein Textfeld in einem Display Object Container eingefügt hat, kann man auf folgende Weise den focus setzen.

import flash.display.Sprite;
import flash.text.TextField;

var displCont:Sprite = new Sprite();
var tf:TextField = new TextField();
tf.type = TextFieldType.INPUT;
addChild(displCont);
displCont.addChild(tf);
displCont.stage.focus = tf;

Hier wird das Textfeld, welches den Focus bekommt, mit einer Hintergrundfarbe versehen, während das Textfeld, welches den Focus verliert, eine weiße Hintergrundfarbe bekommt.

Textfield mit htmlText und StyleSheet

Einem dynamischen Textfield kann man über die Eigenschaft htmlText einen Html-Text zuweisen, in dem man Html-Tags benutzen kann. Auf die Art kann man Absätze, links etc. einfügen. Es ist sogar möglich StyleSheets zu benutzen. Dazu muss ein StyleSheet Objekt erstellt werden, in dem die Styles definiert werden, oder man lädt eine extern definierte StyleSheet Datei. Das StyleSheet Objekt muss dann dem Textfeld zugewiesen werden. Im folgenden Beispiel hat man keine ausgelagerte StyleSheet Datei sondern die Stile werden direkt in Flash definiert. Siehe dazu auch die Adobe Referenzen

Man kann einem Textfeld Html-Text zuweisen. Actionscript unterstützt nicht alle HTML-Tags. Der Html-Text wird über die Eigenschaft TextField.htmlText = "String mit Html Tags"; zugewiesen. Siehe Adobe Referenzen. Es folgt ein Beispiel.

import flash.text.TextField;

var tx:TextField = new TextField();
tx.autoSize = TextFieldAutoSize.LEFT;
addChild(tx);
var message:String = "<Font Face='Arial' Size='20' Color='#00f5a6'>Türkis Arial Größe 20</FONT> ";
tx.htmlText = message;

Html Text mit Style Sheet

Actionscript unterstützt Stylesheets in einer weniger umfangreichen Version. Siehe die Adobe Referenzen. Es folgt ein einfaches Beispiel:

import flash.text.TextField;
var myt:TextField = new TextField();
myt.wordWrap=true;
addChild(myt);

var style:StyleSheet = new StyleSheet();
var blueText:Object = new Object();
blueText.color="#0000FF";
style.setStyle(".blue", blueText);
myt.styleSheet=style;
myt.htmlText="<p>Nächste Zeile</p> <p class='blue'>ist blau.</p>";

var style:StyleSheet = new StyleSheet();

var deepBlue:Object = new Object();
deepBlue.fontWeight="bold";
deepBlue.color="#0000FF";

var body:Object = new Object();
body.fontStyle="italic";
body.fontFamily="sans-serif";
body.fontSize=20;

var a:Object = new Object();
a.fontStyle="normal";
a.fontFamily="serif";
a.color="#FF0000";
a.textDecoration="underline";

var aHover:Object = new Object();
aHover.color="#0C9000";

style.setStyle(".deepBlue", deepBlue);
style.setStyle("body", body);
style.setStyle("a", a);
style.setStyle("a:hover", aHover);

var label:TextField = new TextField();
label.width=500;
label.styleSheet=style;
label.htmlText="<body><span class='deepBlue'>Hello </span>World. Das ist ein <a href='http://www.pastorpixel.de'>Link</a> auf Pastor Pixel.</body>";
addChild(label);

Flash Style Sheet Definition mit externer StyleSheet Datei

In As3 kann man eine ganz normale StyleSheet Datei anlegen, diese mit einem LoaderObjekt in Flash laden, parsen und einem Textfeld mit htmlText zuweisen.

Actionscript in der fla-Datei

var sheet:StyleSheet = new StyleSheet();

var exampleText:String = "<h1>This is a headline</h1>"
+ "<p>This is a <a href='#'>link</a> text. <span class='bluetext'></p>"
+ "<p>This line of text is colored blue.</span></p>";
var field:TextField = new TextField();
field.x=10;
field.y=10;
field.background=true;
field.multiline=true;
field.autoSize=TextFieldAutoSize.LEFT;
addChild(field);

//-----------------------------------------------------------

var loader:URLLoader = new URLLoader();
var req:URLRequest=new URLRequest("test.css");
loader.load(req);
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);

//-----------------------------------------------------------
function errorHandler(e:IOErrorEvent):void {
field.htmlText="Couldn't load the style sheet file.";
}

function loaderCompleteHandler(event:Event):void {
sheet.parseCSS(loader.data);
field.styleSheet=sheet;
field.htmlText=exampleText;
}

Inhalt der StyleSheetdatei namens test.css (im gleichen Ordner)

p { font-family: Times New Roman, Times, _serif; font-size: 14; font-Style: italic; margin-left: 10; }
h1 { font-family: Arial, Helvetica, _sans; font-size: 20; font-weight: bold; }
.bluetext { color: #0000CC; }
a:link {
color: #009999;
}
a:visited {
color: #CC6600;
}
a:hover {
color: #0C9;
}
a:active {
color: #FFCC33;
}

Aktion über einem htmlText Link ausführen

Anstatt einen Link aufzurufen kann man über einen Link, der in einem htmlText definiert ist, eine Action ausführen lassen.

var tf:TextField = new TextField();

tf.width=500;
tf.x=200;
tf.y=200;
tf.htmlText="<body>Alle <a href='event:myEvent'>meine Entchen</a> schwimmen auf dem See</body>";
addChild(tf);

tf.addEventListener("link", clickHandler);
addChild(tf);

function clickHandler(e:TextEvent):void {
trace(e.type);// link
trace(e.text);// myEvent
}

Statischen Text ermitteln / TextSnapshot Klasse

Dynamic- und Input Text kann man programmatisch erstellen. In der Flash IDE hat man außerdem noch die Möglichkeit statischen Text zu erstellen. Dieser Text lässt sich nicht per Actionscript ändern, aber man kann ihn per AS3 auslesen. Dazu gibt es die TextSnapshot Klasse. Siehe Adobe Referenzen
Zum Erstellen eines TextSnapshot-Objekts ist kein Konstruktor erforderlich. Man erzeugt also keine Instanz, sondern das Objekt wird von der Eigenschaft flash.display.DisplayObjectContainer.textSnapshot zurückgegeben.

Folgende Programmierung ermittelt die Texte aller statischen Textfelder der Bühne oder des Movieclips in dem sich der Code befindet. Weitere statische Textfelder, die sich in der Hierachie der Displaylist befinden, müssten explizit angesprochen werden.

import flash.text.TextSnapshot;
trace(this.textSnapshot.getText(0, this.textSnapshot.charCount));

Textline Metrix Klasse

Adobe Referenzen Textline Metrix

Über die TextlineMetrix Klasse kann man sich folgende Eigenschaften eines Textes anzeigen lassen:

x:Number — x-Position Die linke Position des ersten Zeichens in Pixel.

width:Number — Textbreite [Die Breite des Texts in den ausgewählten Zeilen (nicht unbedingt des gesamten Texts) in Pixel.

height:Number — Zeilenhöhe Die Höhe des Texts in den ausgewählten Zeilen (nicht unbedingt des gesamten Texts) in Pixel.

ascent:Number — Oberlänge Die Länge von der Grundlinie bis zur obersten Stelle der Zeile in Pixel.

descent:Number — Unterlänge Die Länge von der Grundlinie bis zur untersten Stelle der Zeile in Pixel.

leading:Number — Zeilenabstand Der vertikale Abstand zwischen den Textzeilen.

Über die TextField Methode getLineMetrix kann man sich eine Instanz der TextLineMetix Klasse erzeugen. Als Parameter wird die Nummer der Zeile erwartet für die man die metrischen Informationen ermitteln möchte:

var lM:TextLineMetrics = tf.getLineMetrics(1);
trace("Breite "+lM.width);
trace("Höhe "+lM.height);
trace("Unterlänge "+lM.descent);
trace("Oberlänge "+lM.ascent);
trace("Zeilenabstand "+lM.leading);

lineMetrix.height = lineMetrix.ascent + lineMetrix.descent + lineMetrix.leading

TextField.getCharBoundaries(charIndex)

Im folgenden Beispiel werden Positionen und Werte mittels TextLineMetrix und der TextField Funktion TextField.getCharBoundaries(0) ermittelt.

TextField.getCharBoundaries(charIndex) gibt ein Rechteck zurück, das die Begrenzungsbox für das Zeichen darstellt.

TLFTextfield

Ab Flash CS5 und Flashplayer 10 gibt es das TLF Text Layout Framework. Das ist eine erweiterbare Actionscript Bibliothek mit vielen weiteren Möglichkeiten Text darzustellen und zu formatieren. Das TLF basiert auf der FTE (Flash Text Engine) die ab Flash Player 10 eingeführt wurde.
Siehe Adobe Entwicklerhandbuch
Siehe Adobe Referenzen
Siehe Adobe CS5 Professional TLF

Es folgt ein einfaches Beispiel:

import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;

var myTlf:TLFTextField = new TLFTextField();
addChild (myTlf);
myTlf.width=300;
myTlf.text = "Sanctus Actionscriptus";

var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 20;

var myTextFlow:TextFlow = myTlf.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers ();

Es folgt ein Beispiel mit einem Textfeld mit 2 Spalten, das wäre mit einem normeln Textfeld nicht so einfach möglich.

import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
 
var myTlf:TLFTextField = new TLFTextField();
addChild (myTlf);
myTlf.x=10;
myTlf.y=10;
myTlf.width=480;
myTlf.height=480;
myTlf.wordWrap = true;
myTlf.multiline = true;
myTlf.text = "Lorem ipsum .... Ende vom Text.";
 
var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 15;
myFormat.columnCount = 2;
myFormat.columnGap = 15;
myFormat.textAlign = flashx.textLayout.formats.TextAlign.JUSTIFY;
 
var myTextFlow:TextFlow = myTlf.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers ();

Startseite: www.pastorpixel.de