Digital Survivors
 

Tabbing in the Flash MX ScrollPane Component

Scott Manning
March 31, 2003 | Comments (37)

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).

tabbing_false (8k image)


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:

globalStyleFormat.embedFonts = true;
globalStyleFormat.textFont = "arial";
globalStyleFormat.textFont = "verdana";
globalStyleFormat.applyChanges();

This code is used to embed the fonts within the Flash MX components. For more information see How to fix drunken components nested in a component.

Next, you'll see:

_level0.scrollpane.tabChildren = true;

This is the magic code that enables tabbing within the ScrollPane. Without this code, nothing will work.

After that, you'll see:

Selection.setFocus("_level0.scrollpane.tmp_mc.button1")

This sets the cursor focus to the first object within the ScrollPane. That means the button will already be selected. This saves an extra tab stroke.

Next, we'll set the order of the tabbing:

_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;

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:


Enjoy this article? There's more. Digital Survivors is a source of articles, tutorials, reviews, and commentary on all things digital.

Stay informed with rss, our feed is permanently ad-free.

These articles are new:

bullet Valkyrie
bullet 1940 Aircraft Production Figures
bullet Let Teachers Carry Concealed Firearms at Schools
bullet 50 Books on World War II Recommended by John Keegan

If you don't immediately see what you want, you can start a topic in our forums.

 



Comments (37):
1) Posted by: dalia
June 16, 2003 5:52 AM

please I'd like to ask one question

I'm new in flash mx,and I want to know first

how to use the scrollpane to scroll a long page having buttons in it?


2) Posted by: Jayesh
July 2, 2003 1:43 PM

From what i have been trying to do and in your example as well, the focus does go beyond the ComboBox.

Like, if you had something after the combo box in your movie, or for that matter in any case, Focus is not lost from the combo box once it is set.


3) Posted by: asa
August 14, 2003 1:52 PM

bosta
but


4) Posted by: carmen
September 5, 2003 6:51 AM

I have one problem.
I have one mc created with attachMovie().
I have text field inside mc.
I put the 8 mc-s in a into_mc and than in a scrollPane.
It doesn't work.

this is the code for one mc

switch (global_variable){ case 'a': { mc.p_txt.text= "A";break;
}
case 'b': { mc.p_txt.text= "B";break;
}
case 'p': { mc.p_txt.text= "P";
}
}


5) Posted by: Jaffasoft
December 22, 2003 3:58 AM

All i had to do was put this line of code in. I already had the tab order in the mc that was being loaded into the scrollpane. And bingo it worked otherwise the focus goes to the scrollpane and the order gets mixed up. Thanks scottman, you saved me a lot of time.

_level0.scrollpane.tabChildren = true;

//i had this in the original mc that i wanted to put in the scrollpane.
text_1.tabIndex = 1;
text_2.tabIndex = 2;
text_3.tabIndex = 3;
// 31+ text fields!!!!

Though when using this scrollpane for a big project with a few things going on inside the mc thatthe scrollpane is in screws the smoothness of the scroller ability. For that reason alone i have decided not to use the scrollpane at all for my purpose! And a lot of the functionality i had in the original mc was gone.


6) Posted by: Jorge Tarazona
January 17, 2004 12:55 PM

Thank you very much. Your tutorial saved me a long time. I searched in google about this issue and your page was the first one. For first time, I found directly what I was looking for.

Jorge Tarazona


7) Posted by: Iván
January 31, 2004 2:44 PM

hi

i am new on flash but i want to know how to use a scrollpane for managing and seeing a text document.

PLease, i need a help


8) Posted by: Yamini
February 2, 2004 12:24 AM

i have multiple flash ui components placed on the stage. but i m not able to manage tab ordering of it. can anyone help me out. the flash ui components placed includes combo,listbox, radio .also data grid and text box are used.


9) Posted by: carmen
February 2, 2004 9:56 AM

For Ivan ...

What do you want to do? To load one file into the ScrollPane?
I show you how to load the text from file (from the same folder) using
a Textfiled and a ScrollBar.
You can put on the stage one Textfield_txt (Text Tool), after that you
can attach one simple ScollBar...just drag it into the Textfield_txt.

The action script is:
----------------------------------------------------------------------------------------------------------------------
System.useCodepage = true; //special characters (french, german
characters)

var myVars = new LoadVars();
myVars.load("./file.txt");
myVars.onLoad = function(success){
Textfield_txt.text = myVars.text.replace('\r\n','\n');
}
-----------------------------------------------------------------------------------------------------------------------

The 'file.txt' must contain one variable named text (which will be
known from Flash) and the file looks like this:

&text=hghgdsasdfsd acsvcadsavc abc...&



Hope I could help you....:)


10) Posted by: carmen
February 2, 2004 10:27 AM

For Yamini ...

I belive you have to place all the components in one movieclip and the to place that movieclip into the ScrollPane...


11) Posted by: Gobo
February 4, 2004 8:50 PM

I understand this except for the way components are referenced through tmp_mc. What is tmp_mc?

Thanks, Gobo


12) Posted by: umit
February 20, 2004 6:27 PM

I'm also wondering about tmp_mc. What is it exactly?

Thanks,
Umit


13) Posted by: Jeremy
March 11, 2004 9:37 AM

The tmp_mc reference has also thrown me off. What am I missing?


14) Posted by: Virus
March 23, 2004 3:38 PM

Can you insert an html page into a scroll pane?


15) Posted by: Troy
April 8, 2004 4:15 PM

thanks for making this accessible. Saved me many hours recreating your path (if only the docs were so clear...)


16) Posted by: alstech
May 13, 2004 8:51 PM

Do you know how I can link an *.html page to a scrollpane?

Reason being the html pages are changed very often and I am trying to make it easier for the other guys to edit.

Any Help would be great,

Thanks in Advance,

alstech


17) Posted by: Francis
June 7, 2004 3:14 PM

Hi, I want to put .html and .php pages in the middle of a flash animation. How don't know how to do this. It is the same problem as alstech.

thanks
Francis


18) Posted by: Arturo
June 24, 2004 5:50 PM

hi there, just a doubt, I've a ListBox with this AS in the same frame:

// create items
var item1 = {label:"Este es un tipo de ejemplo"};
var item2 = {label:"este podria ser otro"};
var item3 = {label:"como para no dejarlo afuera"};
var item4 = {label:"y ahora que te puedo decir"};
// load items
myListBox.addItem(item1);
myListBox.addItem(item2);
myListBox.addItem(item3);
myListBox.addItem(item4);

what I want to do is when the user clicks into each item listed in the listbox, send the action to open an external .HTML document, but I don't know how to do this, anybody can help me?, thanks

Arturo


19) Posted by: rob
July 14, 2004 1:48 AM

Does anyone know why the combo box doesn't lose focus in the example above if you click it and then click the scrollbars?

What i'm really asking is:
How can you make the scrollbar accept focus?


20) Posted by: Romeo
July 20, 2004 3:45 PM

Hey Y'all,
I d/l the .fla to take a closer look, and to my dismay when published the text and components still appear to be "drunk" , the components are outside the box and the text is invisible.... I tried it on two machines and I still get the same error? Does anyone have any knowledge of this???
keep on contact, Romeo


21) Posted by: Trip
August 15, 2004 10:28 PM

It doesn't work for me I figured because my scrollpane is external swf that get loaded into main movie so tabing works localy when tested but inside main movie it doesn't !!!! Any ideas how to fix this e-mail me?


22) Posted by: Prachi
August 17, 2004 2:23 AM

hello,
i'd like to ask one question, i m not able to add text area into scroll pane , how to add that?
i ve added text area in movie clip,but when i run that file, it s like scrollpane is transperent and whole text area is scrolled from top to bottom,this should not be the case ,i want only text should be scrolled.
please let me know the way how can i do that.
Thanks


23) Posted by: Eric
September 5, 2004 6:56 AM

Why can't I Edit my scrollpane so that I cant change the coloring of the scrollpane. When I right-click the scrollpane, the "Edit in place"-button is not working. I would really like to know, so if you know, please let me know!
Thanks


24) Posted by: jenia
October 8, 2004 1:43 PM

hi if you can help me..
I use ScrollPane that load movie clip that have object that i can drag bat when i drag them out from the ScrollPane ther no changes on ScrollPane like more Scroll areae....


25) Posted by: Kamlesh
October 25, 2004 5:29 AM

Hello,

I have one wierd problem. I have one movieclip in library, which has one textfield and one rectangular shape which allows user to drag that movieclip. I am creating instances of this movieclip into another movieclip. I have given tabindex for the textfields.
It works well :)
But when I use any component from the flash 2004, eg. 'Button', my tabIndex logic for those textfields collapses. :(
And if I delete that component of flash 2004, tabindex again starts working ...
Please help me ...
Thanks ..


26) Posted by: Nil
October 27, 2004 4:06 AM

good


27) Posted by: Thea
November 24, 2004 11:30 AM

So... I still cannot tab to the scrollbar to see all of the text. What good does tabbing do for a mobility impaired users if you can't see what you are tabbing to? A visually impaired user can't tab anyway when a screen reader is on. My question is: how do you tab to the scrollbar to make the contents scroll?


28) Posted by: Luis
November 30, 2004 9:43 PM

I NEED HELP PLEASE!!

I have a problem related with duplicateMovieClip and
the component ScrollPane.

It consists in a movie clip called LstPrj and inside it another called prj_1.

The MC prj_1 duplicates depending the number of rows
that my database have.

duplicateMovieClip("proj_1","proj_" + i, i);

The problem it's when i run the movie the vertical scrollbar of the scrollpane doesn't appear when i have more that MCs prj_+i that the available height of the scrollPane.

I use this code to create the scrollpane:

createObject("ScrollPane", "SPListProj", 0);
SPListProj.contentPath = "LstPrj";

I tried to put already this line code:

SPListProj.setScrollContent("LstPrj");

it stays the same..:(

please help me and thanks!

luis


29) Posted by: indian
December 23, 2004 6:18 AM

Thank you very much.

Your tutorial saved me a long time.

I NEED HELP PLEASE!!

I have a problem related with Muliti image and
the component ScrollPane.


30) Posted by: kiran
March 22, 2005 1:24 PM

some body please help meee... i hav a MC and tht MC is called into a scrollpane... and my tabbing is also working but the problem is.. I got 6 textinput in the MC and my scrollpane will show only 3 textfields at first and if we scrolldown we can c the rest as usual rt?.. but i want to do the scrolling also enabled when the control is lost from third textinput to 4th one ... ie.. onlost focus from third textinput.. to fourth.. i want my scrollpane to scroll up automatically... anyone please help


31) Posted by: bman
March 23, 2005 6:31 PM

i also had problem with duplicate MCs in a scrollpane, and fially found the solution here :
http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002769.html

you have to use the undocumented onComplete() method of the scroll pane after duplicating the mc.


32) Posted by: Shreedhar
May 24, 2005 2:21 AM

I have a movie Clip which dynamically loads the image with the help of XML file. I need to set some properties to the Dynamic movie clip. Before doing so i have to check wether the MC is loaded completely or not. Is there any function or property to find out.
Do respond me ASAP.


33) Posted by: Riff
July 18, 2005 2:19 PM

Hi all, I have a movielip with text input fields inside it, the moview clip is scrolled using the scrollpane component, bet when i send the variables, i get nothing, just a blank email with the headers, does anyone know what i am doing wrong?

Thanx in advance

Riff


34) Posted by: Ankush
January 19, 2006 9:45 AM

Hello,

I have gone through your code but I am unable to load Dynamic Movieclips of thumbnails within the scrollpane.

Kindly help me with the code

Thanks in advance

Ankush


35) Posted by: Sim'n Larra'n
January 20, 2006 1:38 AM

Hi, I have an input text inside a movie clip that is loaded in the scrollpane component, How can I retrieve the variable value from the input text inside the scrollpane? What`s the path to the variable? Thanks


36) Posted by: Robert
July 8, 2006 10:02 AM

HI guys i rerally need help on making an automatic mouse on scrollpane with flash
which will only have text embedded with in

Thanks


37) Posted by: Dhananjay
December 11, 2006 5:31 AM

The scrollBar doesn't slide left or top if a movieClip is placed at the position say (-50,-50) to the empty movieclip which places at (0,0) in scrollPane


border