Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
No that our scrollbar is connected to the text field, we'll add some easing to the animation of the text field. If you're following along, I'm working in 06_Bar_Easing.fla in the chapter 04 folder in the Exercise Files folder. Let's select the first keyframe of the actions layer and open to the Actions panel by pressing Option+F9 on the Mac or F9 on the PC. Scroll up to the top of your code and below the target scroll variable, create another variable called easing. Data type will be a number, and we'll give it a value of 5.
This number will control how much the animation speeds up and slows down. We'll talk more about how this value works later on, but it's a value that you can modify a little bit, in order to have a little bit more control over your animation of your text field. Let's scroll down to the setScrollPercent function. We're going to modify our code just a little bit. Find the line of code where we set the y position of text_mc. The first thing we'll do is add a minus sign right before the equal sign and then we'll wrap targetScroll in parentheses. Right before targetScroll type text_mc.y - The value in parentheses here represents the distance from where the text movie clip is currently, from where the text movie clip wants to scroll to.
What we're going to do is divide this value, so after the parentheses type space / space and then type easing. What this block of code does is instead of moving the text field directly to where it wants to go, the text field will move a portion of the distance from where it wants to go. Here's how that works. First we had a minus equals instead of simply the equals. That code subtracts a value from the text field's current y value. The value that's subtracted is the distance between where the text field is and where it wants to go, divided by easing, which currently is five.
So every frame the text field will move a fifth of the distance to where it wants to go. For example, if the text field is 100 pixels away from where it wants to go, it will move 20 pixels for the first frame. Then the text field will be 80 pixels from where it wants to go. At that point the text field will then move 16 pixels, because that's one fifth of the distance that the text field would be. So each frame, the text field is going to move closer and closer to it's target, but at the same time each frame the text field is going to move a little bit less distance and so we get this effect that the text field is slowing down as it animates.
Let's test the movie and see this in action. Press Command+Return on the Mac or Ctrl+Enter on the PC, to test the movie. Click and drag the scrollbar and watch the text field animate. Notice that it slows down until it gets to the right spot. But I want you to notice one really important thing. If you drag the scrollbar up and release your mouse button before the scrollbar finishes animating, then the text field will just stop. Now we don't want that to happen. We want the text field to always have an easing animation or at least have an easing animation wherever we can control it.
The reason why the text field stops animating when we release the mouse button, is because we removed the interframe event listener. Let's close this window and scroll up in our code. Find the stop dragging function, mine is from line 30 to line 34. At the bottom of that function you'll see stage.removeEventListener(Event.ENTER_FRAME); remember that we wrote this line of code, because I mentioned that it's a best practice to always remove event listeners, especially interframe event listeners, because they can slow down the playback of your Flash movie. When we add this easing effect, we want the text field to still animate when we release the mouse button.
What we're going to do is move this code into another place. But we're not going to do that in this movie. What I'm going to do is put // right before this code to disable it temporarily. Later on in this chapter we'll cut-and-paste this code into the proper place, so that we'll still remove the event listener, but we'll be able to have smooth easing animation. Let's test the movie now and see this in action. Command+Return on the Mac, Ctrl+Enter on the PC. Now when you move the scrollbar up and down you should be able to release your mouse away from the scrollbar and watch the animation continue.
And so that looks like it's working great and I'm going to close the Preview window. And now we've added easing to the animation of our text field.
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.