การใช้ Text Field ของ Actionscript 3

TextField ใน ActionScript 3 มีไว้สำหรับบรรจุข้อความ หรือภาพ และนำมาแสดงที่หน้าจอ โดยสามารถนำข้อมูลมาจากฐานข้อมูล ไฟล์ XML ไฟล์ข้อความที่เป็น Text ก็ได้ สามารถจัดรูปแบบข้อความใน TextField ได้ หรือจัดรูปแบบโดยใช้ HTML ก็ได้ เช่นกัน

ตัวอย่าง การกำหนดตำแหน่ง ขนาด ของ TextField 

import flash.display.Sprite;
import flash.text.*;

var myTextBox:TextField = new TextField();;
var myText:String = "This is a test.
";

myTextBox.width = 200;
myTextBox.height = 50;
myTextBox.multiline = true;
myTextBox.wordWrap = true;
myTextBox.border = true;
myTextBox.borderColor = 00000000

addChild(myTextBox);
myTextBox.htmlText = myText;


การกำหนดตำแหน่งของ TextField ที่สัมพันธ์กับ TextField อื่น

ถ้าต้องการวาง TextField ต่อกัน โดยข้อความใน TextField มีการเปลี่ยนแปลง และกำหนดให้ตำแหน่งของ TextField ปรับตามขนาดของข้อความ ดังภาพ จะทำอย่างไร

จะเห็นว่า TextField เรียงต่อกันลงมา แม้ว่าข้อความใน TextField จะเปลี่ยนเพิ่มมากขึ้น หรือน้อยลง ตำแหน่งและขนาดของ TextField ก็จะปรับตามไปด้วย ทั้งนี้ โดยใช้ความสูงของ TextField ก่อนหน้านี้ รวมกับค่า y coordinate ของ TextField ก่อนหน้านี้ เป็นจุด y coordinate ของ TextField ที่ต้องการ

การกำหนดตำแหน่งของ TextField ใช้ TextField.x และ TextField.y
การกำหนดขนาดของ TextField ใช้ TextField.width และ TextField.height

มีเคล็ดลับที่สำคัญคือ การเรียกใช้ตำแหน่ง x และ y ต่องทำหลังจาก addChild() แล้วเท่านั้น มิฉะนั้นผลที่ได้จะไม่เป็นไปตามต้องการ ดังนี้ เช่น

จะเห็นว่่า ตำแหน่งของ TextField ไม่อยู่ติดกัน ซึ่งเกิดจากการกำหนดตำแหน่งของ TextField ก่อนที่จะให้แสดงบนหน้าจอ ด้วย addChild()

ตัวอย่างโค้ด (ที่ถูกต้อง)

var textField1:TextField = new TextField();
var textField2:TextField = new TextField();
var textField3:TextField = new TextField();
var textField4:TextField = new TextField();
var thisStageWidth:int = (this.stage.stageWidth);
var textFieldWidth:Number = thisStageWidth * .75;  // width of textField = 75% of stage
var textField1XPos:Number = (thisStageWidth - textFieldWidth)/2;

textField1.border=true;
textField1.borderColor=00000000;
textField1.wordWrap = true;
textField1.autoSize = TextFieldAutoSize.LEFT;

textField2.border=true;
textField2.borderColor=00000000;
textField2.wordWrap = true;
textField2.autoSize = TextFieldAutoSize.LEFT;

textField3.border=true;
textField3.borderColor=00000000;
textField3.wordWrap = true;
textField3.autoSize = TextFieldAutoSize.LEFT;

textField4.border=true;
textField4.borderColor=00000000;
textField4.wordWrap = true;
textField4.autoSize = TextFieldAutoSize.LEFT;

textField1.text = "Hello, world!  askf lf klsdf ";
textField1.appendText("dlfk fl flkdslf lsdfkdskfldskfldskfl;sdkf fs");
textField1.appendText("dlfk fl flkdslf lsdfkdskfldskfldskfl;sdkf fs");
textField1.appendText("dlfk fl flkdslf lsdfkdskfldskfldskfl;จบ กล่องที่ 1");
textField2.text = "How are yooooooooooooooou afsjjlkfj ";
textField2.appendText(" kljfklkj fkjflklsfkj sdfkds fks sdjsd flksdf");
textField2.appendText("skfjsd sdkfjsa sdlkfj dsfjlaj sldjflks0 จบกล่องที่ 2");
textField3.text = "How are yooooooooooooooou333 afkjk aksdfj dfk";
textField3.appendText("kasdf kds fklsdj fsjklds lksdjflsdkfj asjflkfj");
textField3.appendText("fsdfkjsjfkdsf klsdjf dsjflkjsdflkdsj flkflkjasdf");
textField3.appendText("sdkjf dsfksjf sfksjdf sdlkfjkldsf jklsdjf sdjfklj");
textField3.appendText("fklsjfls fjskljflkjflkfjkljf kasjfkldsjfls จบกล่องที่ 3");
textField4.text = "How are yooooooooooooooou afslk fkdsj  จบกล่องที่ 4";

textField1.x = textField1XPos;
textField2.x = textField1XPos;
textField3.x = textField1XPos;
textField4.x = textField1XPos;

textField1.width = textField2.width = textFieldWidth;
textField3.width = textField4.width = textFieldWidth;

this.addChild(textField1);
this.addChild(textField2);

textField2.y = textField1.height;
this.addChild(textField2);

textField3.y = textField1.height + textField2.height;
this.addChild(textField3);

textField4.y = textField1.height + textField2.height + textField3.height;
this.addChild(textField4);



การ Lock ไม่ให้แก้ไขข้อความใน TextField

ผมใช้โค้ด นำข้อความมาใส่ในกล่องข้อความ หรือ Text Field ของ Actionscritp 3 แต่พบว่า มีช่องว่างทำให้สามารถใช้เมาส์ เลื่อนข้อความในกล่องข้อความ การตัดช่องว่าหัวและท้ายข้อความออก ไม่สามารถแก้ปัญหาได้ จึงจำเป็นต้องจัดการ disable หรือ lock ไม่ให้สามารถทำงานได้

เมื่อต้องการ lock ไม่ให้ Text Field ทำงาน สามารถทำได้ โดยการ lock mouse และ ห้ามการเลือก ด้วยโค้ดดังนี้

            ch_A.selectable=false;
            ch_A.mouseEnabled=false;
            ch_A.tabEnabled=false;

จะทำให้ไม่สามารถเลื่อน หรือกระทำการใด ๆ กับข้อความได้ ให้อ่านได้อย่างเดียว