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
58 Video lessons · 61514 Viewers
61 Video lessons · 93637 Viewers
82 Video lessons · 104409 Viewers
56 Video lessons · 107921 Viewers
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.