The idea that events are broadcast by an instance of the TextField class is not a new one. Already in AS1 and AS2, the TextField class could emit certain types of events to inform about modifications or interactions made by the user in a dynamic textfield. In AS3, Adobe bases all of its framework on a new event-driven model and the new flash.text.TextField class therefore benefits greatly from this change to the native objects.

While looking closer at AS3 we can see that the TextField class has 4 types of significant events:

• Event.CHANGE: notifies when the user inputs text into a textfield.
• Event.SCROLL: notifies after the user has modified the scroll value of a textfield.
• TextEvent.LINK: notifies if the user clicks on a HTML link containing an “eventâ€� instruction.
• TextEvent.TEXT_INPUT: notifies if the user inserts one or more characters in the textfield in TextFieldType.INPUT mode.

It should also not be forgotten that the new TextField class inherits other classes like DisplayObject, InteractiveObject, etc, and therefore also has all the events related to these classes.

We can now look in more detail the 4 main types of events of the TextField class.

I will start by gathering the events of the TextEvent_TEXT_INPUT and Event.CHANGE types because they make it possible to do the same thing, i.e. to inform that one or more characters have been inputted into the textfield in “capture� mode. The only small visible difference between these 2 events is that the TEXT_INPUT event is always notified before the CHANGE event.

Here is a small example of its use:

package
{
 
	import flash.display.Sprite ;
	import flash.display.StageScaleMode ;
 
	import flash.events.TextEvent 
	import flash.events.Event;
 
	public class TestTextInput extends Sprite
	{
 
		// ----o Constructor
 
		public function TestTextInput()
		{
 
			stage.scaleMode = StageScaleMode.NO_SCALE ;
 
			tf = new CustomField() ;
 
			tf.addEventListener(TextEvent.TEXT_INPUT, onInput) ;
			tf.addEventListener(Event.CHANGE, onChange) ;
 
			tf.x = 50 ;
			tf.y = 50 ;
 
			tf.text = "Saisir du texte ici : " ;
 
			addChild(tf) ;	
 
		}
 
		// ----o Public Methods
 
		public function onChange(e:Event):void
		{
			trace(">> " + e.type + " -> " + e.currentTarget) ;
		}
 
		public function onInput(e:TextEvent):void 
		{
 
			trace (">> " + e.type + " -> " + e.currentTarget) ;	
		}
 
		// ----o Protected Property
 
		protected var tf:CustomField ;
 
	}
}
 
import flash.text.TextField ; 
import flash.text.TextFieldType ;
import flash.text.TextFormat ;
 
class CustomField extends TextField 
{
 
	// ----o Constructor
 
	public function CustomField() 
	{
 
		type = TextFieldType.INPUT ;		
		width = 300 ;
		height = 300 ;
		border = true ;
		borderColor = 0xFFFFFF ;
		textColor = 0xFFFFFF ;
		defaultTextFormat = new TextFormat("arial", 12)  ;
 
	}
 
}

The Event.CHANGE event is the same as the “onChanged� event which exists in AS1 and AS2. This event is called after each keyboard action by the user.

While using the help facility of Flex2, we can see that the TextEvent.TEXT_INPUT event is called before the value in the textfield is modified. This notification can be carried out by simply using the keyboard but also by copying/pasting, an IME method or even better by an application allowing voice recognition. I have not yet been able to correctly test the IME method which seems to have existed in Flash8 (on a lesser scale than that I managed to see), or the voice recognition, but in my opinion Adobe have done all that they could to improve the accessibility of FlashPlayer 9.

It should be noted that I realised by quickly testing all of this that the Event.CHANGE event is called upon when copying/pasting like the TextEvent.TEXT_INPUT event.

I am going to very quickly go over the Event.SCROLL event which can be simply summarised in an up-to-date version of the onScroller event that you use in AS1 and AS2 with each modification of the scroll value and the TextField maxscroll. Let us therefore see an example using the Event.SCROLL event:

package
{
 
	import flash.display.Sprite ;
	import flash.display.StageScaleMode ;
 
	import flash.events.Event ;
 
	import flash.text.TextField ; 
	import flash.text.TextFieldType ;
	import flash.text.TextFormat ;
	import flash.text.TextFormatAlign ;
 
	public class TestScroll extends Sprite
	{
 
		// ----o Constructor
 
		public function TestScroll()
		{
 
			stage.scaleMode = StageScaleMode.NO_SCALE ;
 
			var defaultFormat:TextFormat = new TextFormat("arial", 12)
			defaultFormat.align = TextFormatAlign.JUSTIFY ;
 
			tf = new TextField() ;
 
			tf.type = TextFieldType.INPUT ;		
			tf.width = 300 ;
			tf.height = 300 ;
			tf.x = 50 ;
			tf.y = 50 ;
			tf.border = true ;
			tf.borderColor = 0xFFFFFF ;
			tf.textColor = 0xFFFFFF ;
			tf.defaultTextFormat = defaultFormat  ;
			tf.multiline = true ;
			tf.wordWrap = true ;
 
			tf.addEventListener(Event.SCROLL, onScroll) ;
 
			tf.text = _getDefaultText() ;
 
			addChild(tf) ;	
 
		}
 
		// ----o Public Methods
 
		public function onScroll(e:Event):void 
		{
			trace (">> " + e.type + " -> " + tf.scrollV + " : " + tf.maxScrollV) ;	
		}
 
		// ----o Private Property
 
		protected var tf:TextField ;
 
		private var _txt:String = "" ;
 
		// ----o Private Methods
 
		private function _getDefaultText():String
		{
			_txt += "Lorem ipsum dolor sit amet, " ;
			_txt += "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" ;
			_txt += "dolore magna aliquam erat volutpat. " ;
			_txt += "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit" ;
			_txt += " lobortis nisl ut aliquip ex ea commodo consequat. " ;
			_txt += "Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie " ;
			_txt += "consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan " ;
			_txt += "et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis" ;
			_txt += " dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option" ;
			_txt += " congue nihil imperdiet doming id quod mazim placerat facer possim assum." ;
			_txt += " Typi non habent claritatem insitam; est usus legentis in iis qui facit" ;
			_txt += " eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod" ;
			_txt += " ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem" ;
			_txt += " consuetudium lectorum. Mirum est notare quam littera gothica, " ;
			_txt += "quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis" ;
			_txt += " per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis" ;
			_txt += " videntur parum clari, fiant sollemnes in futurum." ;
			return _txt ;
		}
 
	}
 
}

You have probably noticed that in AS3 it is necessary to use the maxScrollV and scrollV properties (in the place of maxscroll and scroll) to manage the vertical scroll on a textfield and the maxScrollH and scrollH properties for the horizontal scroll.

To finish, all that remains is to study the event of the TextEvent.LINK type. Here is a small update of my article AS3 asfunction is dead from the 9th November on my blog which used the version beta2 AS3 framework. It is important, in my opinion, to update the tutorial to avoid misunderstandings later on ;)

In AS3 it is always possible to carry out an ActionScript function when the user clicks on a HTML link contained in a dynamic textfield. Adobe have decided to remove the keyword asfunction to replace it by the keyword “event�. This of course involves a small change in the direct use of this functionality.

The main change of this comes from the appearance of an event related to the event-driven model of the AS3 framework which now makes it possible to directly attach listeners onto an instance of the TextField class (or if you prefer - functions) which will be notified during the broadcast of a TextEvent.LINK type event every time the user clicks on a certain type of HTML link contained in the dynamic field.

Here is a small example to illustrate this concept:

package
{
 
	import flash.display.Sprite ;
	import flash.display.StageScaleMode ;
 
	import flash.events.TextEvent ;
 
	public class TestLink extends Sprite
	{
 
		// ----o Constructor
 
		public function TestLink()
		{
 
			stage.scaleMode = StageScaleMode.NO_SCALE ;
 
			tf = new CustomField() ;
 
			tf.addEventListener(TextEvent.LINK, onLink) ;
 
			tf.x = 50 ;
			tf.y = 50 ;
 
			tf.htmlText = "<p>test : <a href='event:hello link :)'>link !!</a></p>" ;
 
			addChild(tf) ;	
 
		}
 
		// ----o Public Methods
 
		public function onLink(e:TextEvent):void 
		{
			trace (">> " + e.type + " -> " + e.text) ;	
		}
 
		// ----o Protected Property
 
		protected var tf:CustomField ;
 
	}
}
 
import flash.text.TextField ;
import flash.text.TextFormat ;
 
class CustomField extends TextField 
{
 
	// ----o Constructor
 
	public function CustomField() 
	{
 
		width = 300 ;
		height = 20 ;
		border = true ;
		borderColor = 0xFFFFFF ;
		defaultTextFormat = new TextFormat("arial", 12) ;
		textColor = 0xFFFFFF ;
 
	}
 
}

The example above quite simply sends in the output panel: link → hello link :) every time you click on the link link!!!. The event of the TextEvent type sends the label’s link on which the user has just clicked in a text property.

Note: it is necessary to change our way of using this functionality a little compared to other versions of ActionScript. Indeed, it was necessary for AS1 and AS2 to define the name of the function to be used for a specific link in the text, and here it seems that it is impossible to manage a function for each link directly. Indeed the event is notified for all of the textfields to all of the listener functions! It will therefore be necessary to sort out how to recognise for example the character string returned by the event text property, and according to its content, to carry out the correct function.

With the inheritance of the InteractiveObject class there are other really powerful possibilities to manage dynamic textfields but I think that another tutorial on the subject would be good to have.

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