In this tutorial, we'll focus on the scrollbar component. Within minutes you can have a fully functional scrollable area in your Flash project.
Step 1
The first thing you need to do is define your text area. Select the text tool and draw out your text field. We'll resize it later, so don't worry about that right now. In order for the scrollbar to function, the text field must be dynamic. In the Properties Inspector, (if you don't see it, you can enable it from the Windows menu), choose Dynamic Text from the drop down menu. While we're here, go ahead and give it an Instance Name, I chose scrolltext. You also want to choose Multiline so your text field will wrap the text to the next line.
Step 2
Now to handle the text for the scroll area. There are two ways: The first includes having your text embedded into the Flash movie, and the other is to load your text from an external file. If you want the external file option, go to Step 2B.
Step 2A
Click inside your text field to make it editable and type enough to extend pretty far below where you're going to want the bottom of the text field to cut (hide) the text off. That's pretty much it. You can skip to Step 2C.
Step 2B
In order to do this, we're going to use a Movie Clip (MC). Create a new MC by going up to Insert > New Symbol (Ctrl+F8). Name it whatever you want and choose Movie Clip for the Behavior. Now from the Library drag that MC on to the stage. Right click the MC and choose Actions from the menu. Toggle the view to Expert Mode:
Now paste this into the AS window:
onClipEvent (load) {
loadVariables("YourTextFile.txt
}
onClipEvent (data) {
_root.YourTextField.text = this.YourText;
}
Note: If you want to have HTML formatting, change this:
_root.YourTextField.text
to
_root.YourTextField.htmlText
Now change these in the code:
YourTextFile.txt = The text file containing your text, easy enough.
YourTextField = The Instance Name you gave your text field.
YourText = Whatever variable you added in your text file, blah=
Select the text field and go to your Properties Inspector and click the Render Text as HTML button:
Now create your file that will hold your text. Don't forget your leading variable, blah=your text.
Step 2C
If you want a border to wrap around your text field, enable the border button
from the text field properties.
If you want to disable the ability to copy text from your text field, make sure the Selectable button
isn't enabled.
Step 3
Now to resize your text field. With the text tool selected, click inside your text field as if you were going to edit the text. Hold down the Shift key on your keyboard and double-click the small square at the bottom right corner of the text field. It should now be a black square. Release the Shift key and click and drag the black square to resize the text field the way you want it.
Step 4
Now, to finally add the scrollbar. With the inside of the text field still selected (edit mode), move over to the Components window (if you don't see it, you can enable it from the Windows menu) and click and drag the scrollbar component and drop it into your text field. It should automatically snap to the side of your text field. Now test your movie!
If all went well, you should have a working scrollable area. If not, please go back over your steps and make sure you followed everything correctly.
