Using scrollbar component with dynamic text?

[j_mac]

Is it possible to use the scrollbar component with a dynamic text field? I have been trying to make it work, but so far no luck. Can it even be done?

[retrotron]

It's definitely possible. I just posted re the same issue on actionscript.org.

I'm guessing your problem is related to this: when the Flash player parses the .swf, it will set the scrollbar before it loads the dynamic (data of the) text field. Thus, at run-time your scrollbar registers that the textfield need not be scrolled, so it disables itself. Then the textfield loads the data and the textfield becomes large enough that it needs to be scrolled. But since the scrollbar has already disabled itself, the scrollbar doesn't work.

The way around this is to set the scrollbar properties after the textfield data has been loaded. This can be done manually.

MX provides a textfield.getTextExtent() method which supposedly provides you with how high and wide the textfield will be, but it is almost always way off, so don't use it.

What I do is make a calculation of how high the textfield will be based on the font, the font size, and the width of the textfield. For example, if I have a text field that has a fixed width of 270px, 10pt arial font, but I don't know how high it will turn out to be, I might use this code:

code:

---

var myTxtLength = myTxt.length; // get how many characters are in "myTxt"

var myTxtLines = (myTxtLength/60) + 3; // 60 characters per line, plus 3 extra just to be safe

var myTxtHeight = 15 * myTxtLines; // 15 pixels per line;

var thisTxtHeight = myTxtHeight; // this is the calculated height of the post

---

Of course, if you're using a different font, font size, width, etc., you'll have to tweak the values, but eventually one can get it right. Then you can simply use a variable to keep summing the heights of your textfields as you stack them on top of each other. For example, each time you generate a textfield, you would use the above code to calculate the height of the textfield, and then use this:

code:

---

var totalHeight = totalHeight + thisTxtHeight; // add thisTxtHeight to the totalHeight

---

The real trick is getting this totalHeight value. Then you can set the scrollbar's properties manually:

code:

---

var thumb = totalHeight/20; // make the height of the scrollbar "thumb" 1/20 of total height

myScrlbr.setScrollProperties(thumb,0,totalHeight); // set scrollbar's properties

myScrlbr.setChangeHandler("scroller"); // call the scroller() function whenever the "thumb" is moved

---

As you can see, the "scroller()" function is called whenever the scroll is moved. This allows you to manually set what the scrollbar does when it is moved. I put all my textfields in one parent movieClip (I call it "results_mc") and then set the scrollbar to move that parent movieClip up and down. When it goes up, the textfields go with it. When it goes down, the textfields go with it. This might be the code to set the scrollbar's action:

code:

---

function scroller() { // each time the scrollbar moves, perform this function

	var position = myScrlbr.getScrollPosition(); // get current position of "thumb"

	_root.results_mc._y = -position; // when scrollbar goes one way, results_mc goes the other

} // end scroller()

---

There you have it, now your scrollbar is manually set to scroll the length of a dynamic height. The trick is getting the totalHeight, because then you can use myScrlbr.setScrollProperties() to make the scrollbar scroll from 0 to totalHeight.

Anyways, I'm sure this process can be simplified, but that's how I do it. Hope this helps!

retrotron

[j_mac]

am i correct to assume that this method would not be compatible with Flash 5 players? I would need it to be compatible with that player.

[retrotron]

I'm not sure. You'de have to check whether setScrollProperties() and setChangeHandler() work with a Flash 5 player. If it doesn't, you might be able to take a look at the code in a scrollbar component. Maybe you could get some ideas for coding these methods yourself if they are not native to 5.

[retrotron]

Another way to do it, I just learned, is to do it with a scrollpane instead of a scrollbar. After your data is loaded, use the refreshPane() method. I'm not sure if that is available in a 5 player, but it might not hurt checking out the code for the refreshPane() method in the component itself (if the refreshPane() method is there, it may be native, not sure).

retrotron

[prdesign]

Hi folks-

I think I may be having similar issues. I'm loading dynamic text into a textfield, then scrolling it with a scrollbar component. But odd things happen when I load another movie at a higher level THAT ALSO USES A SCROLLBAR, then unload it. When I do, I lose my scrollbar for the lower content. I haven't been able to find a solution to this in awhile.

My related forum is here:
CLICK HERE

[cancerinform]

prdesign,

is your movie loaded into a movieclip? If so, it may be that the two scrollbar instances interfere each other. Try loading into a different level if the problem is still there.

[prdesign]

Not at all. The text field is inside a MC, but the text is not loaded to a MC instance.

PLUS, I've changed everything between the sets of scrollbars...
instance names
variables
even library names
But I'm still getting a greyed out scrollbar.

this is a projector I'm working on. Maybe i'll duplicate the whole problem and zip it up so you can see what is going on. I'm amazed more people haven't had this problem.

[cancerinform]

I do not know how the scrollbar works but if there is a global var that would interfere, because it is present in all movies. Here is a scrollbar, whci is not a component.
http://www.flashkit.com/board/showth...&highlight=xml

It's called xml_links.zip

May be that solves the problems.

[sleazy_frank]

Hi all - just been reading this thread and I'm working on something in the similar vein but I require autoscrolling, or at least the scrollbar to activate as new text is added and the newest text to be kept on screen.

I've got a dynamic text box with scrollbar to which over time (Every 2 seconds) I am adding a piece of text.

Using this code:

Using this code

scroll_box.onScroller = function () {
	while( scroll_box.scroll < scroll_box.maxscroll ) {
		scroll_box.scroll++;
	}
}
setScrollBarProperties = function(){
	scroll_box_scroller.setScrollProperties(10, 0, 15);
}

and running setScrollBarProperties() on each keyframe that new text is added, the scrollbar activates and resizes itself to show the text is lengthening, but the scrollbar thumb thing stays at the bottom. If you try and grab it and scroll up, it springs back down to the bottom. Help! I don't really understand how the setScrollProperties works. Cheers.

f

[sleazy_frank]

I tried this, using the code mentioned above;

scroll_box.onScroller = function() {
	while (scroll_box.scroll<scroll_box.maxscroll) {
		scroll_box.scroll++;
	}
};
setScrollBarProperties = function () {
	var myTxtLength = scroll_box.length;
	// get how many characters are in "myTxt"
	var myTxtLines = (myTxtLength/60)+3;
	// 60 characters per line, plus 3 extra just to be safe
	var myTxtHeight = 15*myTxtLines;
	// 15 pixels per line;
	var thisTxtHeight = myTxtHeight;
	// this is the calculated height of the post
	var totalHeight = totalHeight+thisTxtHeight;
	// add thisTxtHeight to the totalHeight
	var thumb = totalHeight/20;
	// make the height of the scrollbar "thumb" 1/20 of total height
	scroll_box_scroller.setScrollProperties(thumb, 0, totalHeight);
	// set scrollbar's properties
};

So each time the function is called, the thumb of the scrollbar is re-evaluated but now I just get the blank scrollbar.

hmm

f