Completing The Project: Adding Text Scrolling

This article is continued from Formatting Externally Loaded Text in Flash ActionScript 3.0. In this last part, we will be completing the sample project by adding the text scrolling functionality.

You can add vertical text scrolling to a TextField by using the scrollV property of the TextField class. To understand the scrollV property, you must first know that each line in a multiline TextField is assigned a number starting at 1. The scrollV property refers to the line number that is at the top most part of the TextField. Initially, scrollV has a value of 1. This means that the first line is at the top most part of the TextField. If we change the scrollV property to 2, then the second line (which is the line below line 1) will move up to the top most part of the TextField, and line 1 will no longer be visible as it moves outside of the TextField's area in order to give way to line 2. And if we change the scrollV property to 3, then line 3 (which is the line below line 2) moves to the top most part of the TextField, pushing line 2 out of sight as well. To make line 2 move back to the top most part of the TextField, then we'll just have to change the scrollV property of the TextField back to 2. Notice that as the scrollV value increases, the lower lines move up. When the lower lines move up, we're actually scrolling down since more and more of the lower lines will become visible as scrollV increases. And as we decrease the value of the scrollV property, then the higher lines move back down and become visible again. So as we decrease the scrollV property, we are actually scrolling up.

So how do we increase or decrease the scrollV property?
We can use the increment and decrement operators.
Ex.
myTextField.scrollV++;
or
myTextField.scrollV--;

So to complete our project, we'll add click event handlers to the buttons that we have on stage (up_btn and down_btn). up_btn is the button with the arrow pointing up and will be used for scrolling the text up. So for up_btn, we will be decrementing the scrollV property (scrollV--). down_btn will do the opposite (scrolling down) so we will be incrementing the scrollV property for this one instead (scrollV++). So let's go ahead and add the following lines to our existing code (we can just add these at the end):

// Every time the up_btn button is clicked, the scrollV property
// gets decremented by 1
up_btn.addEventListener(MouseEvent.CLICK, scrollUp);

function scrollUp(e:MouseEvent):void 
{
     myTextField.scrollV--;
}

// Every time the down_btn button is clicked, the scrollV property
// gets incremented by 1
down_btn.addEventListener(MouseEvent.CLICK, scrollDown);

function scrollDown(e:MouseEvent):void 
{
     myTextField.scrollV++;
}

Test the movie, and click on the scroll buttons. You should see that you now have been able to add text scrolling functionality for your TextField.

PREV: Formatting Externally Loaded Text In ActionScript 3.0