The Flash Connection Make mine Actionscript 3.0!

Source File: 

vertical_scrollbar_bonus.zip

There is yet another nice touch we might add to the scrollbar's behavior. Many times in Flash it makes a nice touch if, instead of merely moving something to a place, you "tween" it there. So far, the motion of the content is strictly linear. So let's tween it instead!

First of all, go to http://www.greensock.com/tweenlite/ and download the TweenLite AS3 classes. Copy the com folder to the same folder as your fla file (easiest), or otherwise make sure it resides in a classpath folder (best). See my tutorial on Flash: The Big Picture for a fuller explanation of how classpaths work. The reason the second alternative is best is because you can make all of your projects use the same set of class files instead of copying them around to every new project.

For the sake of saving a little bandwidth, the provided ZIP file above does not include the necessary greensock classes. You'll want to get these files from the source anyway, as their author, Jack Doyle, updates them frequently. Anyway, since there is already a com folder in our project, all you have to do is download the greensock classes, then just copy the greensock folder to the inside of our existing com folder. In any case, I highly recommend you download these classes, put them in a classpath, and learn how to use them. Have them on tap for all of your projects, not just this one. They are that handy (Note: having these classes in your classpath doesn't mean they compile into all your projects, it just means that they are available to be imported).

If you attempted to compile the project as is, and got an error message, you just need to place these greensock classes where they should go, and then try again.

That being done, now let's turn our attention to the VerticalScrollbar class. There are a couple of lines in this file that get repeated in several places. Let's consider one line in particular, the one that moves the content. It reads:

if(content && window) content.y = window.y - (_scrollPercent * contentRange);

...and it appears in four places, specifically lines 67, 84, 101, and 118. We can refactor it by placing it in a function of its own, and then just calling the function from those other four places. So add the following function toward the end of the class, right after the last existing private function, but before the first public function. (Note: it's not that the order of the functions makes any difference to our programming, but in the interest of staying organized, it's not a bad idea to keep public and private functions grouped separately).

private function moveContent():void {
	if(content && window) content.y = window.y - (_scrollPercent * contentRange);
}

Next, go the four places in the code where that line appeared, and replace it with the function call instead:

moveContent();

This will make the class behave identically to how it did before, but now the line that moves the content appears in only one place. When we change the way the content moves, we need only do it in this one place instead of four other places. This not only makes modifying it easier (like we're about to do), but also reduces the chance of errors.

Now all we need to do is to import the TweenLite class, and then change that one line in the moveContent function so that it uses TweenLite instead. So add this to the list of the class's imports:

import com.greensock.TweenLite;

Next, let's change the line that moves the content (this line is in the moveContent function and should replace the line that's there currently):

if (content && window) TweenLite.to(content, 0.5, { y:window.y - (_scrollPercent * contentRange) } );

This line is really not as complicated as it might at first look. The y destination is still determined in exactly the same way, using the exact same calculation. But instead of directly assigning this calculated number to the y property of the content, this line tells the content to tween there instead. The functions that call moveContent() are all functions that happen with continuous action. Consequently, this line is always being called continually. Fortunately, the TweenLite class automatically handles tween overwriting. Each time a new tween is created, it overwrites and cancels out the previous one. The result is that at any given time, only the very last tween created is still in effect. The result is that the content continues to tween to its most recent destination, for another half second, every time you stop scrolling.

Save the file and compile the project again. You should get noticeably smoother movement when the content moves up and down in the window. Here's how the swf behaves now (check out the content's movement):