Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll use the buttons to animate the scrolling text. If you're following along, I'm working in 08_Animating_Button.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. Scroll all the way up to the top of your code and we'll create a new variable. I'm going to create the new variable on line 10 right below our scrollAmount variable. We'll call this variable scrollDirection with a capital D. The data type will be number and we'll give it an initial value of 0.
This variable will represent the direction and amount that the text is scrolling. Let's scroll down to the setDirection function. Mine is on line 63 to line 67. What I'm going to do is select the text_mc.y += dir; line of code. I'm going to replace it with scrollDirection = dir; That way we can capture the current scroll direction. We'll use that direction later on this exercise to animate the movement of the scrolling text.
On the next line add an event listener to the stage. And the event will be event.ENTER_FRAME and the function we'll run is called the scrollText, capital T. This is the function that'll animate our scrolling text. And we'll define that in just a minute. On the next line, add one more event listener to stage and the event listener is going to be MouseEvent.MOUSE_UP. It's all caps, and the function we'll run will be called stopScrolling.
We'll also define this function later in this exercise. Now let's define the scrollText function. We'll do that right below the setDirection function. So below the setDirection function, create a function called scrollText. Remember it's going to receive an event with the data type of event. It's not going to return a value, so I'll type void for the return data type and then inside of the scrollText function type targetScroll, with a capital S, += scrollDirection; If you remember from when we set the targetScroll value, when we scrolled the text with a scrollbar, targetScroll holds the value of where the text field is going to end up.
So here we're just connecting the value of the targetScroll to our scroll direction variable. On the next line, type text_mc.y = targetScroll. Next we'll define the stop scrolling function. Defining the stop scrolling function will make sure that the text does not move forever once we start scrolling it. What we'll do in the stop scrolling function is set the scroll direction to zero. So let's create the stop scrolling function. Remember it'll receive an event with the data type of mouse event.
And inside of the stopScrolling function we'll simply set the scroll direction to 0. And that will stop updating the target scroll value, which will make the text stop animating. Notice that we're not removing the event listener from the stage for the scroll text event. Because not only do we want to set the scroll direction to 0 in the stopScrolling function, but we also want to stop the scroll text function from running at some point. The point where we'll do that is whenever the user clicks on the scrollbar. So let's scroll up in our code to the very bottom of the dragScroller function.
Mine goes from line 20 to line 30. Let's remove the event listener to scroll the text. Later on we're going to add easing to our scroll buttons, so we want the enter frame event to continue scrolling the text. We'll turn off that enter frame event inside of the dragScroller function. So at the very bottom of the dragScroller function type stage.removeEventListener and the event is going to be Event.ENTER_FRAME, all caps, and the name of the function is scrollText with a capital T.
So dragging the scrollbar stops the scrollText function from running, and clicking on the buttons stops the setScrollPercent function from running. Let's test the movie and see this in action. Command+Return on the Mac, Ctrl+Enter on the PC. Click and hold your mouse down on the buttons to scroll the text. Notice that the text scrolls past where it should. We'll fix that in the next movie. So there's a look at animating the scroll text field using buttons.
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.