|
Scrolling Text Using UIScrollBar |
|
|
|
Written by Rawpulse
|
|
Wednesday, 25 October 2006 |
|
Learn how to make scrolling text with the UIScrollBar component!
In this tutorial we’ll be making use of the UIScrollBar component to make a scrollable text field. These scrolling text boxes are often used within Flash websites, when there’s too much text to fit in with the rest of the content. To view an example of what we’ll be making, click here.
I assume you have some knowledge of Flash for this tutorial. The component we will use is available in Flash Professional 8, Flash Basic 8 and also Flash MX 2004. This method works best with Flash 8, however. Let’s begin.
Part 1
Select the Text tool, but before drawing your text box, we need to adjust the type of box we need. We require a Dynamic Text box, instead of the default Static Text. To change this, go to the Properties window, and select Dynamic Text from the drop down list.
Once you have done that, click and drag a text box onto the stage, until it’s around 250 x 175, which is a good size for a text box.
Part 2Before we add text, we need to ensure that our new text box is scrollable. If we don’t do this, the box will get bigger and bigger as we enter more text, instead of letting us scroll – which is the whole point of this tutorial. There are two ways to do this. Either select your text box with Selection tool, then go to Text > Scrollable, or right click your text box, and select Scrollable. There will be no visible difference at first.  Now we need to add some text to the box. For this example, I’ll be using the regular “Lorem Ipsum” space filling text, but you can add proper text if you wish. Go back to the Text tool and click inside your text box, then type or paste your text in. 
Part 3
Now we need to add our component. If you don’t already have it, open your Components window, by pressing Ctrl + F7. Depending on your version of Flash, there will be several categories in this window to choose from. The one we will be using, “User Interface” is available in standard and professional versions. Expand the User Interface group by clicking the “+” icon next to the name.
A number of components will become visible. We need the component called “UIScrollBar”, which will be near the bottom of the list. Click and drag it onto the stage anywhere.
When you place it on the stage, it will look like a long white rectangle. It’s recommended that you place it next to your text box. Align it so it is at the top right hand side of the box. This will be easier if you have Snap to Objects turned on.
Part 4
So we have our text box, and we have our scroll bar. Now we need to get them to work together. This is surprisingly simple. First we need to give our text box an Instance name. We don’t need to convert it to a symbol for this. Select the text box with the Selection tool, and apply the Instance name “textbox” via the Properties panel. Ensure it is applied to the text box, not the scroll bar.
The last thing to do is to change the Parameters of the scroll bar. To do this, select it with the Selection tool. At the bottom of your screen where the Properties menu is, you will see three different tabs; Properties, Filters, and Parameters. Click the Parameters tab.
The first field, named “_targetInstanceName” is where we define our Instance name. To do that, click the white space to the right of targetInstanceName, and type textbox (our Instance name) in. Then press enter. Leave the “horizontal” value as “false”.
Now the textbox has been assigned the UIScrollBar component. If you test your movie by pressing Ctrl + Enter, you should be able to scroll up and down. To add one final touch, use the Rectangle tool to draw a border around it all.
To view the final version, click here. If you had a problem following this tutorial, tell us about it on the forum and we'll help you out.
|
|
Last Updated ( Wednesday, 25 October 2006 )
|
Tutorials 
