Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For the finishing touches for this application, we're going to connect the scroll buttons to the scrollbar so that the scrollbar moves when we click on the scroll buttons. If you're following along, I'm working in 11_Scroll_Buttons.fla in the Chapter 04 folder in the Exercise Files folder. Select the first keyframe in the actions layer and open up the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. At the bottom of the scrollText function we'll set a value for our scroll percent variable. Type scrollPercent = and then in parentheses type text_mc.y - minScroll and then outside of the parentheses type a / and then inside the parentheses, type maxScroll - minScroll We used the scroll percent of variable before to determine what percentage the scrollbar is down.
What we're using it for here is to figure out what percentage the text field has been scrolled. We get that value by first taking the relative position of the text field. What that means is we take the text field's y position, minus the minimum scroll value. That gives us how many pixels into the scroll the text is, or how many pixels away from the minimum scroll value the text field is. We take that value and then we divide it by the total scroll range for the text field.
We get that value by subtracting minScroll from maxScroll and that gives us the scroll percent, or the percent that the text field is scrolled. And now what we need to do is take this percent and apply it to the scrollbar to make the scrollbar move. So on the next line, type scroller_mc.y = and then in parentheses type scrollPercent times and then type another set of parentheses and in the parentheses you just created type line_mc.height - scroller_mc.height.
Now this is the scroll range. If you scroll up in your code and find where we set the scroll range, when we created the scroller rectangle, it's the same as the dragH variable. And I'm on line 25 in my code, inside of the dragScroller function. So that's the scroll range. Let's scroll down, back to the scrollText function And inside of the scrollText function, right after the second close parenthesis, type space plus space line_mc.y. Now that's the minimum scroll range.
So we're taking scrollPercent and multiplying it by the scroll range and that will give us the position that the scrollbar should be, and then we add on the minimum value that the scrollbar can go up, and that will shift the scrollbar's position or shift the scrollbar's range to be in the appropriate range on the scrolling line, or line_mc. Let's test the movie and see it in action. Command+Return on the Mac, Ctrl+Enter on the PC. Click and hold your mouse down on the down button. Scroll the text field down and watch the scrollbar move.
And then click and move the scrollbar and click the arrows and make sure that the scrollbar moves properly. And that works great, so I'll close the Preview window. And there's look a connecting the scrollbar to the scroll buttons. And now your animated scrolling text field with easing animation is finished. Congratulations.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.