RSS link icon

.

Create and style textfields with AS3


In this Flash actionscript 3.0 tutorial you will see how to dynamically create a textfield on the stage, giving it properties and add some styling to it, all done with actionscripting.

dynamic textfield

As I just mentioned, this is an actionscript tutorial, so we do not need to do anything in design view, only thing I did was to change the stage height and width to 200 x 100 px.

This actionscript will contain 3 sections.

Section 1 where we create an instance of the textfield object.

In section 2 we will be adding properties to our new textfield, such as proportions, placement, border etc.

In the last section we will add some formatting to our text field, like color and font size.

I have typed in the code below for you to copy in, all my code descriptions will be inline with the code, and start with "//" as comments in flash actionscript.

//Creating the textfield object and naming it "myTextField"
var myTextField:TextField = new TextField();

//Here we add the new textfield instance to the stage with addchild()
addChild(myTextField);

//Here we define some properties for our text field, starting with giving it some text to contain.
//A width, x and y coordinates.
myTextField.text = "some text here!";
myTextField.width = 250;
myTextField.x = 25;
myTextField.y = 25;

//Here are some great properties to define, first one is to make sure the text is not selectable, then adding a border.
myTextField.selectable = false;
myTextField.border = true;

//This last property for our textfield is to make it autosize with the text, aligning to the left.
myTextField.autoSize = TextFieldAutoSize.LEFT;

//This is the section for our text styling, first we create a TextFormat instance naming it myFormat
var myFormat:TextFormat = new TextFormat();

//Giving the format a hex decimal color code
myFormat.color = 0xAA0000; 

//Adding some bigger text size
myFormat.size = 24;

//Last text style is to make it italic.
myFormat.italic = true;

//Now the most important thing for the textformat, we need to add it to the myTextField with setTextFormat.
myTextField.setTextFormat(myFormat);

Thats it, test your flash movie, you should have a full customized textfield made in actionscript.


Admin Bob says: 2008-07-06

hi chelsea, you could try emailing me the flash project and I will take a look at it for you.

chelsea says: 2008-06-26

how would you create smooth scrolling so that on a mouse_down, the scroll kept moving. i tried using this: // sets scrolling for the Up Scroller var pressingUp:Boolean = false; up_btn.addEventListener(MouseEvent.MOUSE_DOWN, scrollUp); function scrollUp(myevent:MouseEvent):void{ pressingUp = true; } up_btn.addEventListener(MouseEvent.MOUSE_UP, letgoUp); function letgoUp(myevent:MouseEvent):void{ pressingUp = false; } // sets scrolling for the Down Scroller var pressingDown:Boolean = false; down_btn.addEventListener(MouseEvent.MOUSE_UP, scrollDown); function scrollDown(myevent:MouseEvent):void{ pressingDown = true; } down_btn.addEventListener(MouseEvent.MOUSE_UP, letgoDown); function letgoDown(myevent:MouseEvent):void{ pressingDown = false; } //enterframe event for scroller external_txt.addEventListener(Event.ENTER_FRAME, scroll); function scroll(myevent:Event):void{ if(pressingDown==true){ external_txt.scrollV ++; } if(pressingUp==true){ external_txt.scrollV --; } } but had problems.

Admin Bob says: 2008-06-16

hi prakash, send me an email with your problem explained, and I will try to answer, its a bit difficult through the comment section.

Admin Bob says: 2008-06-16

hi rahul, you do that from the properties panel, (by default its located and docked to the bottom of the screen in flash).

prakash says: 2008-06-16

sorry! with out writing a many new variables this is the concept.

prakash says: 2008-06-16

dear sir i want to create multiple textfields with different name but with out writing a new var please tell me sir how to do this is my mail id here: prakasha99@gmail.com

prakash says: 2008-06-16

Create and style textfields with AS3 ia very good ,till i not understood before reading this but now i under the role of connecting a format var to textfield thank you very much sir/madam

rahul says: 2008-06-09

how to set the type to input type and get that input
make money with photoshop - book