Flash MX comes with a standard set of UI Components. Among these components is the ScrollPane. This components purpose is simple: You can stick anything in the ScrollPane and scroll it. When I say "anything", I mean text, MovieClips, objects, and even other components.
I decided to get a little creative and insert some textfields, ComboBoxes, and buttons in it. The scrolling worked just fine, but for some reason tabbing would not work. I tried almost a dozen different methods with no luck.
I spent literally three weeks working on this. I searched Google for the answer, posted on numerous message boards, and even questioned some Macromedians. No one seemed to be able to solve the problem.
Then I asked on the devmx message board. I received an answer within hours. It turns out that tabbing in the ScrollPane is disabled automatically (See below).
At first, I tried just hacking the component. This scared me, because I didn't know what other components might be affected.
Eventually, all I needed was one line of code:
_level0.scrollpane.tabChildren = true;
This code works where "scrollpane" is the Instance Name of the ScrollPane component in your Flash movie. Here is a sample of the final result:
Picking apart the code
On the second frame of the sample FLA, you find the following code:
//------------------------
//Embed my fonts
//------------------------
globalStyleFormat.embedFonts = true;
globalStyleFormat.textFont = "arial";
globalStyleFormat.textFont = "verdana";
globalStyleFormat.applyChanges();
//------------------------
//Enable Tabbing for objects in the scrollpane
//------------------------
_level0.scrollpane.tabChildren = true;
//------------------------
// Set the focus of the first object in the scrollpane
//------------------------
Selection.setFocus("_level0.scrollpane.tmp_mc.button1")
//------------------------
// Set the tab order
//------------------------
_level0.scrollpane.tmp_mc.button1.tabIndex = 1;
_level0.scrollpane.tmp_mc.text2.tabIndex = 2;
_level0.scrollpane.tmp_mc.text3.tabIndex = 3;
_level0.scrollpane.tmp_mc.text4.tabIndex = 4;
_level0.scrollpane.tmp_mc.dropdown5.tabIndex = 5;
//------------------------
//Disable tabbing for the scrollpane itself
//------------------------
_level0.scrollpane.tabEnabled = 0;
I'm going to pick this code apart piece by piece. First, you find the following code:
This is needed because Flash will make up its own tabbing order and it's not always correct. I have samples of text fields, a button, and a ComboBox.
I have used an ordering scheme of 1, 2, 3, 4, and 5. Some people prefer to used increments of 5 like 1, 5, 10, 15, etc. They do this in case another object is added to the set of objects. This makes it so you don't have to spend extra time renumbering everything.
Finally:
_level0.scrollpane.tabEnabled = 0;
This code disables tabbing for the ScrollPane itself. Otherwise, after the user has tabbed through all the objects within the ScrollPane, the focus will be set to the ScrollPane.
And that covers the basics of tabbing within the ScrollPane. You can download the FLA below:
