How to make a dynamic text scrollbar in Flash
Author: Bill Trikojus
This tutorial will show you how to create a dynamic text scrollbar in Flash. The scrollbar contains arrows that the user can click and a dragger that can be dragged up and down to scroll the text. The scrollbar is dynamic and will automatically update to reflect the amount of text in the text box. The finished scrollbar will look something like this:
You need the Flash Plugin to view this
You can also download the finished dynamic text scrollbar.
Please note there is a small error in the code in the video that causes problems. This can be fixed by changing the relevant code to:
vis=my_txt.maxviewable()
//max needs to include the visible lines
max =vis+my_txt.maxscroll;
visPercent=(vis/max)*100;
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-08-30: Martin Hunter said:your video isn't loading!
2008-08-31: Bill Trikojus said:
working fine for me
2008-09-03: Martin Hunter said:
working fine for me too now, great video will be exploring the site for more content (nice to see a university doing this tut tut Leeds Met!)
2008-09-03: Bill Trikojus said:
Hi Martin
Glad you enjoyed it
All the best
2008-09-28: Willie said:
Nice, If I can get it to work dynamically, where it attaches from the library and the text box is created dynamically, that would be nice.
2009-04-27: vinod said:
how can we add pictures with text
2009-04-27: Bill Trikojus said:
you can embed images in text boxes by setting its htmlText property and inseting an image tag
eg
my_txt.htmlText = "<img src='Picture-2.jpg' height='400' /><br>Start asdf adcv asdvasdv sdfbvsdf...";
Not sure how reliable across browsers this is though. When this feature was first added to Flash it crashed every browser out there but I just did a quick test in Firefox and it seemed fine. One thing to note is that there appears to be a delay between when the image is inserted and the maxscroll of the text box returning an accurate number. I hacked this by adding a delay before all the scrollbar code is run.
Of course, you could always put your text and images in a movieclip and just scroll that.
cheers
2009-05-18: Aida said:
Hi Bill,
I was wondering what code I should use, so that the text box loads the text from an xml file?
Any ideas would be appreciated.
Thanks
2009-05-18: Bill Trikojus said:
Start with the 'How to load XML into Flash' and then just initialise the scrollbar on the onLoad of the XML object after you have added the text to the textbox.
cheers
2009-07-05: Max g said:
Is it possible to make this for input text scrollbar in flash which will stay hidden and only show up when needed? For example when someone writes past the number of visible lines. Thanks.
2009-07-21: Bill Trikojus said:
Sure. Don't have time to make an example right now but here is some code from another project I worked on. Basically you just run some code whenever the onChanged event fires for the input text box and check whether or not the scrollbar is required.
comments_txt.onChanged = function() {
//if we need the scrollbar now
if (this.scroll
//initialise the scrollbar
scrollbar_mc.init(comments_txt);
scrollbar_mc.dragger_mc._y = ((comments_txt.scroll-1)*scrollbar_mc.dragAmountToScroll)+scrollbar_mc.topOfDragArea;
//fade in the scrollbar
scrollbar_mc.onEnterFrame = function() {
this._visible = true;
if (this._alpha<100) {
this._alpha += 10;
} else {
this.onEnterFrame = null;
}
};
} else {
//scrollbar not required - fade it out
scrollbar_mc.onEnterFrame = function() {
if (this._alpha>0) {
this._alpha -= 10;
} else {
this._visible = false;
this.onEnterFrame = null;
}
};
}
};
cheers
2009-07-21: Bill Trikojus said:
Please note that the code got messed up when I posted it on here. The first if statement should be
if (this.scroll LESSTHAN this.maxscroll || this.scroll>1) {
replace LESSTHAN with <
cheers
2009-08-03: shivi said:
great tut.. but im having a problem with a new liquid layout website im doing.
on frame load i have to give both initial scale and scale after browser re size as,
dragger_mc._height = scrollbg_mc._height;
but then the dragger_mc stays at that height and cant be moved..
i tried commenting on the line
dragger_mc._height = scrollbg_mc._height;
which made the dragger_mc stay at its original height(20px) and was draggable but it only needed to move 1/4 of the scrollbg_mc 's height to display the entire text.
any way i to fix this? :(
2009-08-04: dean said:
This is agreat tutorial. But it seems to not work with dynamic text loading from my text file. Any idea how to work on this?
myData = new LoadVars();
myData.onLoad = function(){
content.html=true;
content.htmlText=this.copy;
scrollBar._visible = (content.maxscroll>1 ? true : false);
};
myData.load("data.txt");
2009-08-04: Bill Trikojus said:
Shouldn't it be
scrollBar._visible = (content.maxscroll>1) ? true : false;
?
And at what point do you initialise the scrollbar? It needs to be after the text has been loaded and added to the text box.
2009-08-05: dean said:
oh..my mistake..thanks for the correction.:)
I'm not sure if this is what you mean.>
I put a scrollBar.target=content; right after the line myData.load("data.txt");
but I really am not familiar with it. Plus I need to do some easing so I put the "content" textfield inside an MC but the scroll._yscale is not functioning together with the whole actionscript.
I really appreciate your reply. Hope you could still help me with this. Thank you very much!
2009-08-05: Bill Tri said:
Try putting all of the scroll bar code into your onLoad function after you have set the contents of the text box.
2009-08-05: dean said:
Wow! It worked! You helped me big time! I want to cry. Thank you very much.:) Your tutorial's really helped me. I'll drop by a link as soon as I finish this. Thanks again very very much.
2009-08-05: Bill Trikojus said:
You're welcome.
2009-11-16: Jeffrey said:
Hmm.. I can't seem to figure out how to do it with xml. I use multiple levels like: news.news_anim.scroll_content etc..
Does anyone know how to do it with an external loaded xml txt file?
2009-12-28: Yordan said:
Just wanted to say thanks. I only used the arrow button part, because my dragger's size is static, so I'll remove it and use the up/down arrows in the keyboard for scrolling. You can upload that on youtube. It will be more popular there.
2010-01-25: Mahrukh said:
Hi Bill, your tutorial is great. I was wondering if you could tell me how to change the colour of the scrollbar, the 'dragger_mc', it's originally green in colour, but I wanted to change the colour to #00eff.
Thanks for the help.
:)
2010-01-25: Bill Trikojus said:
just double click on the movieclip to go inside it and then change the colour of the shape. Or select the movieclip and in the property inspector apply a tint. To do it with actionscript, say something like
col=new Color(dragger_mc);
col.setRGB(0x00eeff);
cheers
2010-01-27: Mahrukh said:
Thanks a lot, had figured it earlier though, it was the tint. Thanks so much, works great. :)
2010-01-29: Risky Hidayat said:
thanks for this great tutorial. but i have question (*i'm so shy to ask this) how can i make some of my text being bold or italic?
thanks, and thanks again for this tutorial.
2010-01-29: Bill Trikojus said:
put bold and italic html tags in the text you are loading. I can't remember the exact code in the tute but you need to the .htmlText property of the text box to the text that you load in.
cheers
2010-02-25: Oliver Jones said:
Just reading some docs which say that maxscroll does not return the total number of lines in the textbox but rather the number of hidden lines (the number of clicks required to reach the bottom.
This means that my scroll bar height ends up being massive (as it's calculated by viewable/maxscroll*100)
2010-02-25: Oliver Jones said:
In fact on the video shouldn't the line defining max actually be
max = vis + _myTextbox.maxscroll - 1;
Mine is working fine now, reckon this is the cause of the weird rounding hacker Bill had to perform
OJ
2010-02-25: Bill Trikojus said:
Yes you're absolutely right - thanks for posting. I'll update the source file and add a comment above.
cheers
2010-03-24: Andi said:
Best tutorial out there for a dynamic scrollbar in AS2. Thanks!
2010-08-30: hans said:
Hi.
I have a problem with
tag in htmlText. If I have
my_txt.htmlText="my text
break hier", the dragger fail. Can you fix this problem?
2010-08-30: Hans said:
Hi.
I have a problem with br/
tag in htmlText. If I have
my_txt.htmlText="my text <
>
break hier", the dragger fail. Can you fix this problem?
2010-09-25: Agustin said:
Thanks a loooooooooooot!!!
2010-09-29: anil said:
i am unable to apply your script for dynamically loading through xml file in my flash plz give me some reference to how to overcome with this problem as soon as possible ......
2011-10-04: manish said:
How to make xml text scroll bar
means I want to make scrollbar in whcih load text by using xml file and It can resize automatically if text increases
Thanks
Post a comment
Garbage posts and SPAM will be deleted.