TextField / Textfelder dynamisch erstellen

Die Methoden in Actionscript 3 unterscheiden sich nicht wesentlich von den AS2 Methoden. Hier werden Textfelder dynamisch erstellt und formatiert. Es gibt 2 Arten für die Formatierung, einmal über CSS und einmal ü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";//nicht der Klassenname, sondern der zuerst vergebene Name
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=20;

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 vergeben einen Namen, sinnigerweise, den gleichen. Hier sind Leerzeichen erlaubt. Nachfolgend nenne ich diesen Namen: "Schriftartname".
  4. Nach Bestätigung befindet sich die Schriftart in der Bibliothek
  5. Wähle im Kontextmenü dieser Schriftart: Verknüpfung
  6. Aktiviere: a) Export für Actionscript, b) in erstes Bild kopieren,
  7. 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 den "Schriftartnamen" als String ein, nicht den Klassennamen. format.font = "Brush Script MT";

Die TextFormat Eigenschaft align bestimmt die Ausrichtung der Schrift. Siehe weiter unten die TextFieldAutoSize.CENTER damit wird bestimmt, dass sich das Textfeld zu allen Seiten vom Zentrum aus vergrößert.

Textformatierung ändern

Beispiel textFormat2.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.

 

Textfeld als Klasse

Beispiel textfeld3.swf, anzeigeText.as

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.


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 Tlabel extends Sprite {
protected var _textString:String="Hallo Welt";
protected var format:TextFormat;
protected var _Text:TextField;

public function Tlabel(schriftart:String,xpos:int,ypos:int) {
format= new TextFormat();
format.size = 50;
format.font = schriftart;
format.color = 0x000000;
_Text = new TextField();
basicFormat();
addChild(_Text);
this.x=xpos;
this.y=ypos;
}

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

public function set size(groesse:Object) {
format.size=groesse;
basicFormat();
}
public function set font(schriftart:String) {
format.font = schriftart;
basicFormat();
}
public function set color(farbe:Object) {
format.color =farbe;
basicFormat();
}
public function set beschriftung(textString:String) {
_textString=textString;
_Text.text=textString;
basicFormat();
}

public function get font():String {
return format.font;
}
public function get size():Object {
return format.size;
}
public function get color():Object {
return format.color;
}
public function get beschriftung():String {
return _Text.text;
}
public function get xPos():int {
return this.x;
}
public function get yPos():int {
return this.y;
}
public function get drehung():Number {
return this.rotation;
}
}
}

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:Tlabel;
myText= new Tlabel("Brush Script MT",275, 200);
addChild(myText);

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

 

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

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

Textfield mit htmlText

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äd 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

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 der htmlText Eigenschaft eines Textfeldes 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
}