Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In order to connect our scrollbar to a text field, we need to get something called a scroll percent. And by scroll percent I mean the percentage that the scrollbar is scrolled down. With that value we can then move our text field. The file that I'm working in is called 03_Scroll_Percent.fla in the Chapter 04 folder in the Exercise Files folder. Let's select the first keyframe of the actions layer and open the Actions panel by pressing Option+F9 on the Mac, or F9 on the PC. At the very top of your code, below the other two variables that were already created, create a new variable called scrollPercent, capital P. The data type of this variable will be a Number and we'll set the initial value to 0. At the bottom of the dragScroller function, below all the rest of the code inside of that function, type stage.addEventListener.
The event will be an Event.ENTER_FRAME, all caps. And we'll run a function called a setScrollPercent. So once you start dragging the scrollbar it will run this function called setScrollPercent. The functional run as the timeline enters frames or along with the frame rate of the movie. The frame rate of this movie is set to be 24 frames per second. So 24 times per second the setScrollPercent function will run. Let's define the set scroll percent function right below the stop dragging function.
So create the function setScrollPercent. It receives an event with the data type of Event. In the curly braces for this function type scrollPercent equals and then after the = we'll set value of scroll percent. Before we set the value of scroll percent let's talk about what that value is going to be. The value is going to be the amount or the percentage that the scrollbar is dragged down. The value of scroll percent will be between 0 and 1. 0 when the scrollbar is all the way up, and 1 when the scrollbar is all the way down.
So what we're going to need to do to find out what percentage the scrollbar is down, we'll have to divide the scrollbar's current position by the amount that the scrollbar can move down. So type open and close parentheses and in the parentheses type scroller_mc.y - line_mc.y. This value represents how many pixels down the scroller is from the top of the line movie clip. And we'll divide this value in parentheses by the total amount that the scroller can move down. So type / to divide, and then open and close parentheses and a semicolon.
Inside the parentheses type line_mc.height - scroller_mc.height. This is the maximum value that the scrollbar can move down as we set in the last movie. On the next line create a trace statement that traces the value of scroll percent. Let's test the movie and see what the value of scroll percent is when we move the scrollbar. Command+Return on the Mac. Ctrl+Enter on the PC. Move the scrollbar. In the Output window we should see values between 0 and 1.
And I'm getting a negative value, so what I'm going to do is close the Preview window, close the Output window, and return to Flash. Above the trace statement that I just wrote, I'm going to write some conditional statements that make sure that the scroll percent is in the correct boundaries. Type if, and in parentheses type scrollPercent < zero. In the curly braces of that conditional statement, type scrollPercent = 0; This will make sure the scroll percent value never goes below zero.
Below that if statement type else if(scrollPercent > 1) and in curly braces below the else if statement, type scrollPercent = one; Test the movie using Command+Return on the Mac or Ctrl+Enter on the PC. Drag the scrollbar, you should see values between 0 and 1. And close the Preview window and close the Output window. You may have noticed that when you release your mouse button on the scrollbar the enter frame event continues to run.
Or in other words Flash is continuing to calculate the scroll percent every frame. A best practice is to stop those enter frame events. Having a lot of enter frame events running can slow down your Flash movie. So what we want to do is stop this set scroll percent function from running once we release our mouse button. In that stop dragging function at the very bottom, type stage.removeEventListener and in parentheses pass in Event.ENTER_FRAME in all caps, a comma and a space and setScrollPercent); and this will stop the set scroll percent function from running after we've dragged the scrollbar. So press Command+Return on the Mac or Ctrl+Enter on the PC to test the movie. I'm going to drag the scrollbar and release my mouse button.
And notice in the Output window that the values stopped counting. It's always the best practice to remove event listeners especially for enter frame events. Now that we have the scroll percent set up, we can connect our scrollbar to the text field on the stage.
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.