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. Written by: Hasan Otuome
Time: Approximately 10 minutes
Difficulty: Intermediate
Requirements: Flash 8
Topics Covered: Using Listener Objects for custom navigation.
Assumed knowledge: Flash interface. Actionscript
You can find the source files for this tutorial here.
In this tutorial I show you how to use a Listener Object with your text fields to control focus automatically. This can have many applications, especially when developing massive apps like setup wizards, shopping carts, etc. OK, let's get to it.
After discovering the power of doing forms in Flash you will undoubtedly want to start sprucing them up a little. One way to do that is to take advantage of focusing input fields automatically (when appropriate). For example, you've been tasked to build a customer information form where the user will have to input their social security #. No big deal, right? But, how about giving it that desktop feel with some auto focusing. Here's what we'll be building:
Go ahead and enter some data and watch the form assist you. Next, we'll set it all up.
After you start Flash, setup (2) layers, "actions" <-(lock it) and "component".
Next, hit Ctrl+F7 or go to Window->Components to pull up the Component Panel. Then, drag (3) TextInput components to the stage. You can resize them, give the group a name and name each instance. I just resized them to widths of 60 and gave them instance names of s1, s2 and s3.
Once that's done, select your actions layer and pull up the actions panel and let's start some coding!
[as]
//create a reference to this timeline
tl = this;
[/as]
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.
[as]
//create an array of the 1st (2) text fields
var soc:Array = ["s1","s2"];
[/as]
Next, we need to define our limits for the text fields. This is really the key to this technique.
[as]
//set some parameters for data entry
s1.maxChars = "3";
s2.maxChars = "2";
s3.maxChars = "4";
[/as]
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.
[as]
//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();
}
}
[/as]
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.
[as]
//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);
}
[/as]
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