Video: Easing the text with the ScrollBar

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.

Easing the text with the ScrollBar

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 panelby 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 signand then we'll wrap targetScroll in parentheses.Right before targetScroll type text_mc.y - The value in parentheses here represents the distancefrom 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 fifthof 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 effectthat 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 animationor 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 practiceto 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 awayfrom 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.

There are currently no FAQs about Flash CS3 Professional Beyond the Basics.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.