Resetting a scrollbar in Flash
In many robust and large projects in Flash, you will work with a text box which contains text. In most cases the size of your dynamic text box will not accommodate the height or amount of text you need to show. Therefore, you need to attach a scrollbar component to your text box.
| Printable Version | |
| Word | |
| Download Project Files | |
| Zip | |
Here's an example:
When the movie loads, you notice a scrollbar which allows a visitor to scroll the text inside the text box. If a visitor selects About Me, visitors will notice another set of text is loaded. For our purposes, we refer to our text box as dynamic. It’s dynamic because our text box which holds the text doesn’t know what text it will hold until an action occurs.
The scrollbar seems to work fine, except for one problem. Scroll to the end of the text box:
Click My Text button and you will notice this happen:
Although the scrollbar did resize correctly based off content, it did not reset to the top of the text box. This is obviously a problem for any visitor, but more importantly, annoying for developers.
Solution
The workaround is to set the dynamic text field to a null string before assigning the dynamic text box a new text file. The line of code below loads the text you see on movie load:
//load XML
var data_xml=new XML();
data_xml.ignoreWhite=true;
data_xml.onLoad=function(){
text_txt.htmlText=data_xml;
}
data_xml.load("myText.xml");
This code can be found on line 8 inside the action script layer in the example file, scrollbar.fla. When you click About Me, this line of code is executed:
about.onRelease=function(){
//load XML
var data_xml=new XML();
data_xml.ignoreWhite=true;
data_xml.onLoad=function(){
text_txt.htmlText=data_xml;
}
data_xml.load("myAboutText.xml");
}
In order to make the scrollbar component reset to the top of the text box when a visitor clicks My Text, adjust the code as follows:
mytext.onRelease=function(){
//load XML
var data_xml=new XML();
data_xml.ignoreWhite=true;
data_xml.onLoad=function(){
text_txt.htmlText=data_xml;
}
data_xml.load("myText.xml");
}
To this:
mytext.onRelease=function(){
text_txt.text=" ";
//load XML
var data_xml=new XML();
data_xml.ignoreWhite=true;
data_xml.onLoad=function(){
text_txt.htmlText=data_xml;
}
data_xml.load("myText.xml");
}
We set the text method of the text field to a null string and continue with the remaining code to load the new XML object to display text. Complete this process for both buttons it should work.
What if this does not work?
You might want to look into a commercial scrollbar component, such as the one Flash Loaded offers:
Summary
In this article, you learned how to:
- Make text scroll with a scrollbar based off content height
- Reset the scrollbar to the top of a dynamic text box on a button click
Finally, you were introduced to a commercial scrollbar product that is easy to use and lightweight if resetting the text field did not work.
If you have questions, contact me.