RSS link icon

.

Add scrolls to textboxes with AS3


In this Flash actionscript 3.0 tutorial we will read some content from an external text file into a text field, then add a couple of buttons to scroll down the text in the text field.

First we need to set up a few things, like a textbox and the up and down buttons.

So first make a text field on the stage, (define the width and heights), remember to give it an instance name, I named mine text_f.

Now make two arrows (or just buttons as you would like them). right click and convert them into movie clips. Give them instance names like I did. "up_btn" and "down_btn".

Now that we have set up the stage, we can go to the actionscript panel and type in our code. I have made the programming description inline with the code, starting with // as comments does with actionscript.

// here we declare a request to the content text file and name it externalReq.
var externalReq:URLRequest = new URLRequest("content.txt");

// Here we declare a variable for the URLLoader.
var externalLoad:URLLoader = new URLLoader();

// here we set the externalLoader to load in the text file from the URLRequest variable.
externalLoad.load(externalReq);

// Now before we just set the text fields text property equal to the text content, we need to be sure that the text is finished loading, so we add an eventlistener.
// this eventlistener will listen and call a function when the text is done loading, and the function we call is textReady.
externalLoad.addEventListener(Event.COMPLETE, textReady);

// here is the function to handle the text, we set the text_f.text property equal to event.target.data (the event is refering to the externalLoad.data).
function textReady(event:Event):void {
    text_f.text = event.target.data;
}

// Here is the last and new part, here we add two eventlisteners, to listen to when the up and down arrows are clicked, then it will call the two functions "scrollUp" and "scrollDown".
up_btn.addEventListener(MouseEvent.CLICK, scrollUp);
down_btn.addEventListener(MouseEvent.CLICK, scrollDown);

// the function is quite simple and except the outer function part, it acturlly only contains one line of code to scroll.
// its the scrollV method. and here we subtract 1 from its original value by using the --
function scrollUp(Event:MouseEvent):void {
    text_f.scrollV --;
}

//Here we make a function to handle the down button, and here we add one to the original scrollV value by using ++
function scrollDown(Event:MouseEvent):void {
    text_f.scrollV ++;
}

Admin Bob says: 2008-07-31

Hi Dennis, Im not quite sure about that, but I will check up on it for you, write me an email with your problem, so I can write you back, maybe with a source code or something.

Dennis says: 2008-07-28

Great script, thanks! I have a question though: I would like to check if the scroll buttons are needed first. If they are not needed, they should be hidden. How can I have AS3 check this

eXecoV says: 2008-06-17

I made this tutorial, really thanks to the one who made this! but iChr(34)m having a little issue trying to customize it... i made my up and down button the same width as the stage of my text, one on top one all down on the stage. I want the text to scroll up or down if i do a mouse over on one of these buttons. I manage to do that, but only one time do a scroll each time i go over a button, how can i make the text scroll down continuously the time being ON the down button without each time having to do a mouse over to go further one line at a time

Crypth says: 2008-06-17

A short notice, perhaps the eventlisteners should be added after the text is loaded, in the textready function.. (just proper order, nothing that can crash really..) (leo: if you flash teacher couldnChr(34)t help ya with that one, hes a twat :) )

Bee says: 2008-05-07

IChr(34)m going to venture a guess that horizontal scrolling would be: text_f.scrollH ++; and so on..

Leo says: 2008-05-01

THANK YOU! THANK YOU! THANK YOU!!! I was trying to figure how to do this for nearly three days!!! It totally worked! Even my Flash teacher couldnChr(34)t help me. You saved me a lot stress!

Thore says: 2008-04-02

there is not a slidescroll-bar ... :(