Video: Connecting the ScrollBar to the Scroll buttons

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.

Connecting the ScrollBar to the Scroll buttons

For the finishing touches for this application, we're going to connect the scroll buttons to the scrollbarso that the scrollbar moves when we click on the scroll buttons.If you're following along, I'm working in 11_Scroll_Buttons.flain the Chapter 04 folder in the Exercise Files folder.Select the first keyframe in the actions layer and open up the Actions panelby 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 beforeto 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 awayfrom 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 timesand then type another set of parenthesesand 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 positionthat 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 bein 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.

There are currently no FAQs about Flash CS3 Professional Beyond the Basics.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.