Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll talk about setting the boundaries for our text field when we're animating using our buttons. If you're following, along, I'm working in 09_Button_Boundaries.fla in the Chapter 04 folder in the Exercise Files folder. Let's select the first keyframe of the actions layer and open up the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. In your code find the scroll text function. In my code it goes from line 72 to line 76. At the very bottom this function we'll create a conditional statement to see if the text field is moved out of bounds.
Type in text_mc.y > minScroll and then in the curly braces for that conditional statement, type text_mc.y = minScroll; So if the text field moves past or moves below the minScroll value, then we set the text field's y property to be equal to the minScroll value. Below this conditional statement, create another conditional statement, but this time instead of an if statement, make it an else if statement.
Then we'll check to see if the text field is moved out of bounds the other way. So type else if, and in parentheses text_mc.y < maxScroll, capital S. In the curly braces below that condition we'll set the value of text_mc.y = maxScroll; And the code that we just wrote essentially makes the text field stay in bounds, so the text field won't go below minScroll or above maxScroll.
Let's test the movie and see this in action, Command+Return on the Mac, Ctrl+Enter on the PC. Now when we test the movie we're going to run into a problem. What I want you to do is hold the down arrow, click and hold your mouse down on the down arrow, until the text field scrolls down and wait a second or two, then release the mouse button. Now click the up arrow, hold your mouse down for a few seconds. The text field starts moving. Now why is that problem happening? Let's close this Preview window and talk about it. I neglected to write a few lines of code here on purpose. So then we can get practice troubleshooting a problem.
First let's talk about the possible reasons for this problem happening. Now we know that the text field is stopping at the right points, but we want to scroll the text field again. If we held our mouse down a little bit longer on one of the buttons, the text field takes it that much time to scroll again. So to find that out we ask ourselves this question - What's making the text field scroll or where is the text field getting its scroll value from? On line 75 in my code, the second line inside of this function, the text field's y position is coming from the targetScroll variable.
The targetScroll variable is being set by the scrollDirection variable. So the problem that's happening is that when we hold our mouse down on the down button, this targetScroll variable is increasing more and more. And then when we put our mouse on the up arrow button. So this targetScroll value is constantly increasing, so what we need to do is reset this targetScroll value and then our buttons should work properly. Inside of the if statement that you created, right below text_mc.y = minScroll, type targetScroll = minScroll; and this will tell Flash that the targetScroll area is the minimum scroll position and even if it increases each frame because of the scroll direction, this if statement will reset that target scroll value each frame.
That way, the target scroll value will not constantly be increasing but rather will constantly be reset each frame. So inside of the else if statement, below the line of code that's already in there, type targetScroll = maxScroll; Now by resetting this targetScroll variable, the problem that we had before will go away. Let's test movie by pressing Command+Return on the Mac, or Ctrl+Enter on the PC. Click and hold your mouse down on the down arrow. Hold it down a little bit longer than you need to, then release your mouse button, and click on the up arrow and notice the text scrolls right away.
Hold your mouse down a little bit longer then you need to on the up arrow, and then click the down arrow, and it works great. Let's close this window, and there's a look at setting the boundaries for a text field when we're animating it 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.