Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll talk about using our buttons to create the easing animation that we created when we dragged the scrollbar. If you're following along, I'm working in 10_Button_Easing.fla in the Chapter 04 folder in the Exercise Files folder. Let's select the first keyframe in the actions layer and open the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. Now, as for the easing code, we've actually already written the easing code before. Scroll up in your code and find the setScrollPercent function. Mine goes from line 39 to line 52.
Notice at the bottom of this function, we set the text field's y position. Remember we set it to the distance from the text field's current y position to the target scroll and we divided that value by our easing variable, and that's the gave us that smooth animation. What I'm going to do is select this line of code and copy it using Command+C on the Mac or Ctrl+C on the PC. Scroll down in your code to find the scrollText function. Find line of code where we set the y position of text_mc equal to targetScroll. Select that line of code and then we'll replace it with the line of code we copied by pressing Command+V on the Mac, or Ctrl+V on the PC. That'll give our text field that easing effect for animation.
Test the movie using Command+Return on the Mac, or Ctrl+Enter on the PC. Click and hold your mouse down on the down button to make the text animate down, and click and hold your mouse down on the up button to make the text animate the scrolling up. Let's close the Preview window and now our text field animates with ease when we click the buttons.
Get unlimited access to all courses for just $25/month.Become a member