The TextField class allows the creation of blocks of text on the stage of a SWF. This class exists since the launch of Flash MX (version 6).

The TextField class in AS3 evolves as well as the MovieClip class with the appearance of the DisplayObject class which becomes the main class of all the visual objects.

Let us look closer at the inheritance of the TextField class:

Object → EventDispatcher → DisplayObject → InteractiveObject → TextField

Any instance of the TextField class has at the same time the methods and the properties of the TextField class but also those of the following classes: InteractiveObject, DisplayObject, etc

This much more modular implementation of the visual symbols contained in the SWF shows that Adobe have really sought to improve the implementation of the visual classes for AS3: :)

We can say that MovieClips and TextFields are finally objects belonging to the same family which was not really the case until now.

I advise you to read the article on the subject written by Iteratif: The new architecture of the AS3 framework.

We will try to look closely at the use of this class within an AS3 framework. The TextField class retains elements rather close to its AS1 and AS2 counterparts but we can see many changes which make real a difference at the end of the day.

Let’s start with an example in AS1, we are going to create a new occurrence of the symbol by typing the following code on the Flash timeline:

var field:TextField = this.createTextField("myField", 1, 10, 10, 120, 20) ;
field.text = "Hello World" ;

What should we notice in this?

1 - To use the TextField class it suffices to call this construction function directly in the code. Please note the global scope of almost all of the native classes in AS1 and AS2, apart from in flash8 with the appearance of some classes like flash.display.BitmapData, flash.geom.Point, …

2 - It is impossible to directly create instances with the keyword new, it is crucial to use the createTextField method of the MovieClip class or to use the text tool directly in the IDE.

Let us see how we can create a TextField in AS3

package
{
 
        import flash.text.TextField ;
 
        import flash.display.Sprite ;
 
        class MainApplication extends Sprite
        {
 
                 // ----o Constructor
 
                 public function MainApplication()
                 {
 
                     var tf:TextField = new TextField() ;
                     tf.x = 10 ;
                     tf.y = 10 ;
                     tf.width = 120 ;
                     tf.height = 20 ;
 
                     tf.text = "Hello World" ;
 
                     addChild ( tf ) ;
 
                 }
        }    
}

The code seems a little more complicated than in traditional ActionScript, but you will very quickly realize that by using this new syntax that it had become crucial that ActionScript obtained a structure like this…

1 - The TextField class is related to the namespace flash.text. It is therefore necessary to declare this class by using it before an import flash.text.TextField.

Adobe has gathered all that relates to textfields in the flash.text package of the AS3 framework and I advise you to have a quick look at the AS3 language reference to see the available tools.

2 - It is now possible to directly instantiate the TextField class with a new.

3 - To add textfields to a “DisplayObject� (MovieClip, Sprite,….), you can just use the following methods:

• addChild(child:DisplayObject):DisplayObject
• addChildAt(child:DisplayObject, index:int):DisplayObject

Methods possessing all the objects inherit the DisplayObjectContainer class.

It should be noted that the TextField class does not inherit from this class and it is therefore impossible to use the 2 methods above. You will not be able therefore to directly attach textfields to other textfields, videos or MovieClips, etc (Fortunately, there is another technique that some among you already know).

4 - For those who have not yet tested MovieClips or TextFields in AS3, you may notice in my code that Adobe have finally simplified the property names of the objects by removing the “_�. In the example above the properties x, y, width and height logically replace the properties _x, _y, etc.

It is interesting to see that by using a small class which inherits from the TextField class, it becomes very easy to generate objects specific to your needs. Let us illustrate all this with a quick example:

package
{
 
        import flash.display.Sprite ;
 
        class MainApplication extends Sprite
        {
 
                 // ----o Constructor
 
                 public function MainApplication()
                 {
 
                     var tf:MyField = new MyField(10, 10, 120, 20) ;
                     tf.text = "Hello World" ;
                     addChild ( tf ) ;
 
 
                 }
 
 
        }    
 
}
 
import flash.text.TextField ;
 
class MyField extends TextField
{
 
      // ----o Constructor
 
      public function MyField( x:Number=0, y:Number= 0, w:Number=0, h:Number=0)
      {
 
           this.x = x ;
           this.y = y ;
 
           height = h ;
           width = w ;
 
           selectable = false ;
 
           textColor = 0xFF0000 ;
 
           border = true ;
           borderColor = 0xFFFFFF ;
 
      }
}

Note: In the constructor function of the MyField class it is essential to use the keyword this on properties x and y and to avoid any conflict between the argument names and the functions with the same name.

Here are the first basics about the TextField class. I will not at this point go into the explanation of the methods, of the properties and of the events related to this class because there is too much to say. I will therefore get back to you shortly with the other tutorials on this subject.

EKAMELEON - ALCARAZ Marc (2006). You can find this tutorial and comments on the subject on my blog.