Hasan Otuome

Hasan Otuome is Chief Architect for Marx Media (http://www.marxmedia.net) where he can usually be found developing Rich Internet Applications for the company's clients. He champions creative uses and combinations of Flash, PHP, AJAX and MySQL, among others, for their benefits in user experience improvement.

View all articles by Hasan Otuome
First thing we want to do here is to create a variable to refer to the timeline we put the component set on.

//create a reference to this timeline
 tl = this;


After that, we want to create an array filled with the instance names of the first two components in the set. You'll see the importance in a second.

//create an array of the 1st (2) text fields
 var soc:Array = ["s1","s2"];


Next, we need to define our limits for the text fields. This is really the key to this technique.

//set some parameters for data entry
 s1.maxChars = "3";
 s2.maxChars = "2";
 s3.maxChars = "4";


Now, the next thing we want to do is setup our Listener Object. In case this is your first time using one, listeners do exactly what they sound like. Components broadcast events when they're interacted with by a user and listeners allow us to be notified that that event took place. This allows us to program something to happen in response to that event. In this example the component is a TextInput component and the event that we want to listen to is the change event.

//create an event listener for the autofocusing
 var autoFocus:Object = new Object();
 autoFocus.change = function(txt:Object) {
     //use these traces to see each change in the output panel
     //trace("got focus"); 
     var txtSize = txt.target.text.length;
     var maxTxt = txt.target.maxChars;
     var grp = txt.target.lbl;
     var index = txt.target.pos;
     //trace(txtSize);
     //trace(maxTxt);
     if (txtSize == maxTxt){
         //trace("Limit Reached");
         tl[grp+(index+1)].setFocus();
     }
 }


So, everytime the user inputs data into the text field we check to see if it's reached our preset limit, if it has, we move on to the next field. But where do we get lbl and pos from? We define those in the next block of code.

//use a for loop to associate our event listener with each text field
 for (i=0,j=1; i<soc.length; i++,j++){
     var tfld = tl["s"+j];
     tfld.lbl = "s";
     tfld.pos = j;
     tfld.addEventListener("change",autoFocus);
 }


Here we've just looped against that array we created earlier and on each iteration we create a reference to the corresponding component on the stage and we assign two new properties to them lbl and pos. We also add the event we want to listen for.

Well, that's it. You now have a basic technique that you can extend upon and make even better. If you do, let us all know so we can keep the cycle going. Enjoy!

Hasan
hasan at marxmedia dot net