Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now I'll take a look at connecting the scrollbar to the text field on the stage. If you're following along, I'm working in 04_Scroll_Boundaries.fla in the Chapter 04 folder in the Exercise Files folder. The first thing we'll need to do to connect the scrollbar to the text field on the stage, is create some scroll boundaries. A maximum scroll boundary and a minimum scroll boundary. So let's do that. Select the first keyframe in the actions layer and open the Actions panel. Scroll down to the very bottom of your code and click at the end of the line of code where we set the button Mode of scroller_mc to true, mine is on line 55, and press Enter or Return to go to the next line. In order to scroll a dynamic text field inside of a movie clip, we need to make the dynamic text field expand.
For this special kind of scrolling that we're going be doing, we won't simply scroll text field that has the same size. What we need to do is expand the text field to have more height and then we can move the text field movie clip up and down. Making a text field change size is called auto size. o make a text field auto size, type the text field instance name. So type text_mc.external_txt Remember the text_mc is the movie clip that holds the dynamic text field external_txt.
Then type .autoSize, capital S, space, equal, space. To make the text field auto size we have to use the text field auto size class. So type Text with a capital T, Field with a capital F, Auto with capital A, and Size with a capital S. If the code turns blue once you're done typing it, that means you typed every character correctly and got all the casing correct, so good job. Then type a dot and then type LEFT in all caps.
And what this is going to do is make the text field expand as more text is placed in it. If you set a single line text field to auto size to the left, the text field will stay anchored at the left and expand to the right as more text is in the text field. For a multiline text field which is what we have in this file, setting the auto size property to TextFieldAutoSize.LEFT makes the text field expand vertically or extends the text field's height. Now that are text will auto size, we'll create some variables to represent the minimum and the maximum scroll values.
Scroll all the way to the top of your code, and right below the scrollPercent variable create a variable called minScroll to represent the minimum scroll value. The data type for this will be a Number. On the next line, create a variable called maxscroll and the data type for that variable will also be Number. Inside the textLoaded function at the very bottom, we'll set the value for minScroll. Type minScroll = text_mc.y; This is as far down as we want our text field to move, which also represents as far up as we can scroll.
When you scroll up the text field moves down, and when you scroll down the text field actually moves up. And so when we're scrolled all the way up to the top, we want that value to be where the text field is right now. On the next line we'll set the value of maxScroll. Now what do we want the maxScroll variable to be? We want the text field to be able the move all the way up to the top, so the bottom of the text movie clip and the bottom the text field are aligned with the bottom of the mask. Remember the mask instance name is mask_mc. So to set that value, type minScroll, and that's our minimum scroll value, minus text_mc.height.
Now subtracting the text field height from minscroll would align the bottom of the text field with the top of the mask. So we're going to have to add on to the height of the mask. So type plus mask_mc.height; And this will represent how far the text field can move up, or in other words, how far the text field can scroll down. Now that we have scroll boundaries set, we'll make the text field scroll when we move the scrollbar.
Get unlimited access to all courses for just $25/month.Become a member