Pastor Pixel Tipps Tutorial Anleitungen Hilfe

TextField / Textfelder dynamisch erstellen

TextField Klasse Referenzen
TextField CS4 Adobe Hilfe
Adobe Entwicklerhandbuch Text


Inhalt dieser Seite

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.

Eigenschaft Info
 autoSize : String

Steuert die automatische Größenänderung und Ausrichtung von Textfeldern. siehe nächstes Kapitel mögliche Werte sind:

LEFT, RIGHT, CENTER, NONE

tf.autoSize=TextFieldAutoSize.LEFT;

 text : String Ein String, bei dem es sich um den aktuellen Text im Textfeld handelt.
 htmlText : String Enthält die HTML-Darstellung des Inhalts des Textfelds.
 styleSheet : StyleSheet Fügt ein Stylesheet an das Textfeld an.
 condenseWhite : Boolean Ein boolescher Wert, der angibt, ob zusätzliche Leerräume (beispielsweise Leerzeichen oder Zeilenumbrüche) aus einem Textfeld mit HTML-Text entfernt werden sollen.
 wordWrap : Boolean Ein boolescher Wert, der angibt, ob im Textfeld ein Zeilenumbruch durchgeführt wird.
 multiline : Boolean Gibt an, ob das Feld ein mehrzeiliges Textfeld ist. Das ist in erster Linie bei Texteingabefeldern von Bedeutung oder bei Textfelder mit htmlText.
 selectable : Boolean Ein boolescher Wert, der angibt, ob das Textfeld ausgewählt werden kann. siehe auch mouseEnabled
 background : Boolean Gibt an, ob das Textfeld einen gefüllten Hintergrund aufweist.
 backgroundColor : uint Gibt die Hintergrundfarbe des Textfelds an.
 border : Boolean Gibt an, ob das Textfeld umrahmt ist.
 borderColor : uint Gibt die Farbe des Textfeldrahmens an.
 textColor : uint Die Farbe des Textes in einem Textfeld (im Hexadezimalformat).
 textHeight : Number
[schreibgeschützt] Die Höhe des Texts in Pixel.
 textWidth : Number
[schreibgeschützt] Die Breite des Texts in Pixel.
 defaultTextFormat : flash.text:TextFormat Legt das Format fest, das auf neu eingefügten Text (z. B. von einem Benutzer eingegebener Text oder Text, der mit der replaceSelectedText()-Methode eingefügt wird) angewendet wird.
 embedFonts : Boolean Gibt an, ob bei der Wiedergabe eingebettete Schriftkonturen verwendet werden sollen.
 length : int
[schreibgeschützt] Die Anzahl der Zeichen in einem Textfeld.
 bottomScrollV : int
[schreibgeschützt] Eine Ganzzahl (Index mit Basis 1), die die unterste der im angegebenen Textfeld sichtbaren Zeilen angibt.
 maxScrollH : int
[schreibgeschützt] Der maximale Wert der Eigenschaft „scrollH“.
 maxScrollV : int
[schreibgeschützt] Der maximale Wert der Eigenschaft „scrollV“.
 scrollH : int Die aktuelle horizontale Bildlaufposition.
 scrollV : int Die vertikale Textposition in einem Textfeld.
mouseEnabled:Boolean Maus über dem Textfeld ist deaktiviert, so dass das darunterliegende Element anklickbar ist.
 mouseWheelEnabled : Boolean Ein boolescher Wert, der angibt, ob Flash Player für mehrzeilige Textfelder automatisch einen Bildlauf durchführt, wenn der Benutzer ein Textfeld anklickt und das Mausrad dreht.
 numLines : int
[schreibgeschützt] Gibt die Anzahl der Textzeilen in einem mehrzeiligen Textfeld an.
alwaysShowSelection : Boolean 

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

Wenn sich das Textfeld bei Einstellung "true" nicht im Fokus befindet, markiert Flash Player die Auswahl im Textfeld in grau. In den Referenzen befindet sich ein Beispiel. Der Standardwert ist false. Im folgendem Beispiel hat das erste Textfeld den Wert true.

 

 selectionBeginIndex : int
[schreibgeschützt] Der auf null basierende Zeichenindexwert des ersten Zeichens in der aktuellen Auswahl.
 selectionEndIndex : int
[schreibgeschützt] Der auf null basierende Indexwert des letzten Zeichens in der aktuellen Auswahl.
 caretIndex : int
[schreibgeschützt] Der Index der Position der Einfügemarke.
Texteingabe
 type : String

Der Typ des Textfelds, beispielsweise Texteingabe oder dynamisches Textfeld, in welches keine Texteingaben gemacht werden können. Der Standardwert ist dynamic.
tf.type = TextFieldType.INPUT;
tf.type = TextFieldType.DYNAMIC;

 maxChars : int Die von einem Benutzer festgelegte maximale Anzahl von Zeichen, die das Textfeld enthalten kann. Ein vordefinierter Text kann durchaus länger sein, siehe Beispiel.
tf.maxChars = 8;
 restrict : String

Gibt die Zeichen an, die ein Benutzer in das Textfeld eingeben kann.
Siehe Adobe Referenz
Wenn der Wert null ist können alle Zeichen eingesetzt werden. Bei einem leeren String können keine Zeichen eingesetzt werden. Der Bindestrich dient als "von bis" Zeichen.
myInput.restrict = "A-Z";
0-9 alle Zahlen
A-Z alle Großbuchstaben
a-z alle Kleinbuchstaben

Diese Zeichen ^ in dem String bedeutet, dass alle nachfolgenden Zeichen nicht akzeptiert werden und alle Zeichen die vor diesem Zeichen ^stehen akzeptiert werden. Im nochfolgendem Beispiel werden alle Großbuchstaben außer das große Q akzeptiert:
A-Z^Q

 displayAsPassword : Boolean Gibt an, ob es sich um ein Kennworttextfeld handelt. Anstatt der Zeichen werden Sternchen angezeigt.
 useRichTextClipboard : Boolean Gibt an, ob beim Kopieren und Einfügen auch die Textformatierung übernommen wird.
   
AntiAliasing / Rendering
 antiAliasType : String Der für dieses Textfeld verwendete Anti-Aliasing-Typ.
tf.antiAliasType = AntiAliasType.NORMAL;
tf.antiAliasType = AntiAliasType.ADVANCED;

 sharpness : Number Die Schärfe der Glyphenkanten in diesem Textfeld. Lässt sich nur beim Renderer FlashType nutzen:
tf1.antiAliasType = AntiAliasType.ADVANCED;
Werte von -400 bis 400 möglich
Diese Einstellungen kann man auch im Eigenschaftenfenster bei benutzerdefinierten AntiAliasing vornehmen.
Siehe auch thickness.
 thickness : Number Die Stärke der Glyphenkanten in diesem Textfeld. Lässt sich nur beim Renderer FlashType nutzen:
tf1.antiAliasType = AntiAliasType.ADVANCED;
Der Wert geht von -200 bis 200.
Diese Einstellungen kann man auch im Eigenschaftenfenster bei benutzerdefinierten AntiAliasing vornehmen.
Siehe auch sharpness
 gridFitType : String 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 FlashType Renderer einsetzen: tf1.antiAliasType = AntiAliasType.ADVANCED;
ft.gridFitType=GridFitType.NONE
ft.gridFitType=GridFitType.PIXEL
Beste 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.

 

Methode Info
 appendText(newText:String):void  Hängt den vom Parameter „newText“ angegebenen String an das Ende des Texts im Textfeld an.
 replaceText(beginIndex:int, endIndex:int, newText:String):void  Ersetzt den Zeichenbereich, der durch die Parameter „beginIndex“ und „endIndex“ angegeben wird, durch den Inhalt des Parameters „newText“.
 replaceSelectedText(value:String):void  

Ersetzt die aktuelle Auswahl durch den Inhalt des Parameters „value“.

replaceSelectedText() funktioniert fast genauso wie replaceText(), nur dass man hier nicht Anfangs und Endindex bestimmt. Stattdessen muss der zu ersetzende Text ausgewählt sein. Das kann händisch oder per Funktion geschehen. setSelection(anfangIndex, endIndex). Außerdem muss das Textfeld den Focus haben oder alwaysShowSelection muss true sein.
myT.setSelection(5,10);
this.stage.focus = myT;
myT.replaceSelectedText("unsere");

 setSelection(beginIndex:int, endIndex:int):void  

Legt den durch die Indexwerte des ersten und letzten Zeichens (Parameter „beginIndex und „endIndex“) angegebenen Text als ausgewählt fest. Das Textfeld muss den Focus haben oder alwaysShowSelection ist true, damit man die Auswahl sieht.
myT.setSelection(5,10);
myT.alwaysShowSelection = true;

Es gibt keine Events, die eine Veränderung der Auswahl melden würden. Hier würde lediglich eine Überwachung des selectionBeginIndex und selectionEndIndex helfen.

 getCharBoundaries(charIndex:int):Rectangle  Gibt ein Rechteck zurück, das die Begrenzungsbox für das Zeichen darstellt.
 getCharIndexAtPoint(x:Number, y:Number):int  Gibt den auf null basierenden Indexwert des Zeichens an dem von den Parametern x und y angegebenen Punkt zurück.
 getFirstCharInParagraph(charIndex:int):int  Gibt anhand eines Zeichenindex den Index des ersten Zeichens im gleichen Absatz zurück.
 getImageReference(id:String):DisplayObject  Gibt einen DisplayObject-Verweis für die jeweilige ID, ein Bild oder eine SWF-Datei zurück, die bzw. das einem HTML-formatierten Textfeld über ein <img>-Tag hinzugefügt wurde.
 getLineIndexAtPoint(x:Number, y:Number):int  Gibt den auf null basierenden Indexwert des Zeichens an dem von den Parametern x und y angegebenen Punkt zurück.
 getLineIndexOfChar(charIndex:int):int  Gibt den auf null basierenden Indexwert der Zeile zurück, die das vom Parameter „charIndex“ angegebene Zeichen enthält.
 getLineLength(lineIndex:int):int  Gibt die Zeichenanzahl in einer bestimmten Textzeile zurück.
 getLineMetrics(lineIndex:int):flash.text:TextLineMetrics  Gibt metrische Informationen zu einer bestimmten Textzeile zurück.
 getLineOffset(lineIndex:int):int  Gibt den Zeichenindex des ersten Zeichens in der vom Parameter „lineIndex“ angegebenen Zeile zurück.
 getLineText(lineIndex:int):String  Gibt den Text der durch den Parameter „lineIndex“ angegebenen Zeile zurück.
 getParagraphLength(charIndex:int):int  Gibt anhand eines Zeichenindex die Länge des Absatzes mit dem angegebenen Zeichen zurück.
 getTextFormat(beginIndex:int = -1, endIndex:int = -1):flash.text:TextFormat  Gibt ein TextFormat-Objekt mit Formatierungsinformationen für den durch die Parameter „beginIndex“ und „endIndex“ angegebenen Textbereich zurück.
 setTextFormat(format:flash.text:TextFormat, beginIndex:int = -1, endIndex:int = -1):void  Weist dem angegebenen Text in einem Textfeld die mit dem Parameter „format“ angegebene Textformatierung zu.
 isFontCompatible(fontName:String, fontStyle:String):Boolean  [statisch] Gibt „true“ zurück, wenn eine eingebettete Schriftart mit dem angegebenen fontName und fontStyle verfügbar ist, wobei Font.fontType gleich flash.text.FontType.EMBEDDED ist.

Es folgen ein paar einfache Beispiele:

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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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";

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


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;	


Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

color 24 bit integer mf.color=0xff663a; Farbwert
font Schriftartname oder _sans, _serif, _typewriter mf.font = "Verdana"

Kein selbstvergebener Name, sondern der Familienanme einer Truetype oder Opentype Schrift. Bei Geräteschriften kann man auch _sans, _serif oder _typewriter angeben
siehe eingebettete Schriften

bold boolean mf.bold = true; Bei eingebetteten Schriftarten muss für bold und italic eine extra Schriftenklasse erzeugt werden
italic boolean mf.italic = true;
kerning boolean, mf.kerning = true; Kerning ist ein geringerer Abstand bei bestimmten Buchstabenkombinationen z.B.: VA oder V A. Kerning ist nur bei eingebetteten Schriften und nicht bei allen Schriften möglich.
letterSpacing Pixel Wert mf.letterSpacing=5; Buchstabenabstand in Pixeln
size Points mf.size=30; Schriftgröße in Punkten, das entspricht Pixeln
underline boolean mf.underline=true; Unterstreichung
url String mf.url="home.htm"; Hypertext Link
target "_blank", "_top", "_self", "fenstername" mf.target="_blank"; Frame oder Window für Hypertext Link

 

Absätze formatieren Paragraph level format

Es gibt folgende Absatz Format Variablen

align left, right, center, justify myFormat.align=TextFormatAlign.JUSTIFY; horizontale Ausrichtung des Absatzes
blockIndent Wert in Pixeln myFormat.blockIndent = 30; Abstand des Absatz von der linken Kante des Textfeldes
bullet boolscher Wert myFormat.bullet = true; Punkte ( bullets) vor dem Absatz
indent Wert in Pixeln myFormat.indent = 20; Einrückung der ersten Zeile vom linken Rand
leftMargin Wert in Pixeln myFormat.leftMargin = 20; Einrückung vom linken Rand
rightMargin Wert in Pixeln myFormat.rightMargin = 20; Einrückung vom rechten Rand
leading Wert in Pixeln myFormat.leading = 20; Zeilenabstand
tabStops Array mit Pixelwerten myFormat.tabStops = [100, 200] Abstände von Tabulatoren, im Text kann man einen Tabulator mit \t definieren siehe Beispiel oben

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:

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

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.

Tipp 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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

 

 

 

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.

Tipp 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;


Tipp

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

Name Font Size Font Style Font Name
Verdana 12 Standard Verdana_12pt_st
Verdana 12 Bold Verdana_12pt_b
Verdana 12 Italic Verdana_12pt_i
Verdana 12 Bold Italic Verdana_12pt_bi

 

 

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;

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

Geräteschriftarten verwenden Die Schriftart auf dem Benutzerrechner wird genommen. Das kann zu unterschiedlichen Darstellungen führen.
Bitmaptext kein Anti Alias Es wird von jedem Buchstaben eine Vektorgrafik mit pixeliger Kante erzeugt. Das kann bei kleinen Schriften zu erhöhter Lesbarkeit führen. Bei größeren Schriften ist das nicht so schön, da die Kante hakelig erscheint.
Anti Aliasing für Animation

Während der Animation wird die Schrift pixelig dargestellt. Nach der Animation hat sie Anti Alias. Entspricht dem Standard Vector Renderer

tf.antiAliasType= AntiAliasType.NORMAL;

Anti Aliasing für Lesbarkeit

Schöne weiche Kante bei etwas größeren Schriften entspricht FlashType

tf.antiAliasType= AntiAliasType.ADVANCED;

Benutzerdefiniertes Anti Aliasing

Hier gibt es 2 Wertfelder, in die man jeweils einen Wert von -200 bis 200 (ab CS5 von -400 bis 400) einstellen kann. Die Stärke macht die Schrift dünner oder dicker. Die Schärfe macht den Rand der Schrift weicher oder pixeliger. Es sind die beiden TextField Eigenschaften sharpness und thickness (siehe nächstes Beispiel)

tf.antiAliasType= AntiAliasType.ADVANCED;
tf.sharpness =-400;
tf.thickness= 200;

 

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


 


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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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:

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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>";

 

 

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Text Flash

Ü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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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