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=10;
Will man einem dynamischen Text eine Schriftart zuweisen, muss man zuvor eine Klasse dieser Schriftart in der Bibliothek erstellen. Das Procedere geht folgendermaßen:
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.
Beispiel textField2.swf
var format:TextFormat = new TextFormat(); format.color = 0x336699; format.size = 50; format.font = "Brush Script MT";//nicht der Klassenname, sondern der zuerst vergebene Name 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.
Nehmen wir an ich habe eine Movieclip Klasse und darin befindet sich ein Textfeld namens "myInput" und ich möchte innerhalb der as Datei die zur Movieclipklasse gehört den Focus auf das Textfeld setzen so dass der User gleich losschreiben kann, dann lautet die Action:
this.stage.focus = myInput;
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.
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(); } } }
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);
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
Kurz und bündig:
var style:StyleSheet = new StyleSheet();
var blueText:Object = new Object();
blueText.color="#0000FF";
style.setStyle(".blue", blueText);
my_textfield.styleSheet=style;
my_textfield.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);
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;
}
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
}