Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now I'll make the text field on the stage move when you drag the scrollbar. If you're following along, I'm working in 05_Connecting.fla in the Chapter 04 folder in the Exercise Files folder. Let's select the first keyframe in the actions layer and open the Actions panel by pressing Option+F9 on the Mac, or F9 on the PC. Below the maxScroll variable you created in last exercise, create another variable called targetScroll. Set the datatype of the variable to be a Number and the value equal to text_mc.y; This targetScroll variable will represent the y position of the text field, in other words where you want the text field to go.
Let's scroll down and in this setScrollPercent function we'll select the trace(scrollPercent) line of code and delete it. And in that line I'll the value of target scroll. Type targetScroll, capital S, equals and then in parentheses type scrollPercent, capital P, an asterisk to multiply the scroll percent value. What we're going to do is multiply the scroll percent value by the range that the text field can scroll.
The range can be found by subtracting the minimum scroll value from the maximum scroll value. So in parentheses type maxScroll - minScroll. So this will give us the value that the text field should scroll to. The last thing we'll have to do here is after both )) type plus minScroll. So in the code we just wrote when we subtracted min scroll that gave us the scrollable range.
Multiplying the scroll percent by the scrollable range gives Flash the value that the text field should grow to. Adding on the min scroll variable is necessary here because we subtracted it inside the parentheses earlier to get that range value. So we multiply the scroll percent by the range and then we add on the minimum value and that sets the target scroll to directly correspond to the value that we drag the scrollbar. So when we drag the scrollbar all the way up, the text field will scroll all the way up.
When we drag the scrollbar all way down, the text field will scroll all the way down. Now for that to work we have to write one more line of code. So on the next line type text_mc.y = targetScroll; Now that we've connected our scrollbar to the text field on the stage, let's test the movie and see it in action. Command+Return on the Mac, Ctrl+Enter on the PC. Click and drag the scroll bar and watch the text field scroll. And notice that it works great and I'm going to close the Preview window.
And now congratulations, you've successfully connected your scrollbar to your text field on the stage.
Get unlimited access to all courses for just $25/month.Become a member