TextField

Different Types of Textfields
http://dreamsyntax.org/patterns/swf/textfield_02.swf

 stage.align = StageAlign.TOP_LEFT;

// declare new textfields and add them to the stage

var newTextField:TextField = new TextField; var htmlTextField:TextField = new TextField; var anotherTextField:TextField = new TextField;

addChild(newTextField); addChild(htmlTextField); addChild(anotherTextField);

// NORMAL TEXT FIELD - "newTextField" // ==> format it like html. but make sure you change all tags with " to ' // ==> linebreak is "\n"

newTextField.text = " This is my normal textfield \n with linebreaks \n in it. ";

var newTextFormat:TextFormat = new TextFormat; newTextFormat.color = 0xDD00BB; newTextFormat.size = 30;

newTextField.x = 50; newTextField.y = 50; newTextField.autoSize = TextFieldAutoSize.LEFT; newTextField.setTextFormat(newTextFormat);

// HTML TEXT FIELD - "htmlTextField" // ==> format it like html. but make sure you change all tags with " to ' // ==> linebreak is "&#xD;"

htmlTextField.x = 50; htmlTextField.y = 150; htmlTextField.autoSize = TextFieldAutoSize.LEFT;

htmlTextField.htmlText =" This is my html textfield &#xD; with linebreaks &#xD; in it too! ";

// ANOTHER TEXT FIELD using the CDATA tag inside a string - anotherTextField // ==> whatever you type is what you get inside the box, spaces, linebreaks and all

var textString:String = ( <![CDATA[ This is a string of text that spans multiple lines and I am putting it in another textfield.				]]> ).toString;

anotherTextField.text = textString;

var anotherTextFormat:TextFormat = new TextFormat; anotherTextFormat.color = 0xBBCCBB; anotherTextFormat.size = 30;

anotherTextField.x = 50; anotherTextField.y = 220; anotherTextField.autoSize = TextFieldAutoSize.LEFT;

anotherTextField.setTextFormat(anotherTextFormat);



How do we make it so you can still click on things below your textFields?
To enable click events to work even though they are below a dynamic textbox, add mouseEnabled property to your textField and set it to false: newTextField.mouseEnabled = false;

Initially, before trying it out by myself I actually thought you would be able to click below a textbox by setting useHandCursor to false, or selectable to false, but in practice, only mouseEnabled worked. I imagine that useHandCursor is a superficial visual thing, just to make the hand cursor not appear when you mouseover the item (not to truly disable its clickable function), and selectable is used to allow or prevent others from highlighting the text in the textField.

Dynamic Textfield Example
An example of a textfield and button all created entirely in code. When you press the black circle, the textfield will change.

http://dreamsyntax.org/patterns/swf/textfield_01.swf

 // create a new Textfield, which is called newTextField var newTextField:TextField = new TextField;

// add your new TextField to the stage with addChild addChild(newTextField);

// stage align must be added in order to use stageWidth accurately in AS3 stage.align = StageAlign.TOP_LEFT;

// define the properties of your text field! newTextField.text = "Click on the black circle!"; newTextField.width = 250; newTextField.x = 120; newTextField.y = 100;

// set if it should be selectable newTextField.selectable = false;

// set whether it has border or not newTextField.border = true;

// have the textfield autoresize to text size and align to left! newTextField.autoSize = TextFieldAutoSize.LEFT;

// we can also create something like a style sheet! var myFormat:TextFormat = new TextFormat; myFormat.color = 0xFF0000; myFormat.size = 30; myFormat.italic = true;

var myFormatTwo:TextFormat = new TextFormat; myFormatTwo.color = 0xFFCC00; myFormatTwo.size = 30; myFormatTwo.italic = false;

// finally we apply myFormat to the newTextField! newTextField.setTextFormat(myFormat);

// create a new button called button_mc and draw it out! var button_mc:Sprite = new Sprite; button_mc.graphics.beginFill(Math.random * 0x00000); button_mc.graphics.drawCircle(0,0,50); button_mc.graphics.endFill; button_mc.x = stage.stageWidth/2; button_mc.y = stage.stageHeight/2; addChild(button_mc);

// when button_mc is clicked, it runs the function changeTextFunction button_mc.addEventListener(MouseEvent.CLICK, changeTextFunction); function changeTextFunction(evt:MouseEvent):void{ newTextField.text = "You clicked on the circle!"; newTextField.setTextFormat(myFormatTwo); } 