Simple Custom Scrollbar

Simple Custom Scrollbarby kirupa | 19 January 2006

Scrollbars are great for displaying a lot of information within a small area. Despite their importance, we often take scrollbars for granted. For example, your browser window should display a scrollbar on the right side of this page for allowing you to easily scroll down. We don't really think about them;- we just expect them to be there when the need arises.

Yet, creating a scrollbar is trickier than using one. In this tutorial, you will learn how to create your own compact, easily customizable scrollbar in Flash. Even though Flash comes with several scrolling components, the scrollbar you will be creating allows for easier customization along with a significantly smaller file size compared to its built-in variation.

The following is an example of what you will be creating:

[ click and drag down on the blue square to scroll through the content ]Creating a Scrollbar:i. Okay, lets get started by downloading the provided incomplete source below. Don't worry, the partial source only contains the content that you will be scrolling:

Download Partial Source for Flash 8

i. Once you unzip and open the scrollerIncomplete.fla file, all you should see is a large movie clip containing some text and images. Select the movie clip and give it the instance name contentMain:

[ give your content movie clip the instance name contentMain ]i. Now, we need to create a mask that will only display the portion of the content we would like to see. Insert a new layer and call it mask.

ii. Make sure your newly created mask layer is selected. On the stage, draw a medium sized square. Select your square, and enter the following values in the Properties panel for the square:

i. Width: 300

ii. Height: 200

iii. X: 0

iv. Y: 0

You are basically creating a 300x200 rectangle that covers up your entire drawing area. Your Properties panels should look similar to the following image:

[ ensure your rectangle is 300x200 with a x/y offset of 0 ]i. Select your rectangle and press F8 (Modify | Convert to Symbol). Select the option for Movie Clip and press OK.

ii. With your rectangle converted to a movie clip, let's give it an instance name. Ensure the newly converted movie clip is selected. In the Properties panel, give it the instance name maskedView:

i. With your rectangle created and properly sized, right click on your mask layer and select Mask. You will notice that your contentMain movie clip only takes up the space filled by your rectangle:

[ your content is no longer overflowing from the stage; it is masked ]On the next page, you will add the scroll track and the scroll face (dragger). You'll have a fully functioning scrollbar in no time!

Simple Custom Scrollbar - Page 2by kirupa | 19 January 2006

In the previous page, you masked the content so that your users do not see everything at once. In this page, you will create the scrollbar and related accessories that will allow you to scroll through the content easily.

Let's pick up from where we left off:

viii. Create a new layer and call it scrolltrack. Ensure that you have selected this layer.

ix. Draw a tall rectangle without a border. For the fill color, give it any lightly-colored background. To be more accurate with the size, let's enter the width, height, and x/y offsets using the Properties panel.

Select your newly drawn rectangle and enter the following values into your Properties panel:

. Width: 20

i. Height: 160

ii. X: 280

iii. Y: 0

Your rectangle should now be placed on the right side of your movie:

[ your rectangle is located on the right side of your movie ]vi. Select your rectangle again. Press F8 (Modify | Convert to Symbol). The Convert to Symbol dialog window should appear. Give it the name scrolltrack, select the option for Movie Clip, and then press OK:

[ convert your rectangle to movie clip ]vi. With your rectangle now a movie clip, let's give it an instance name. Select the scrolltrack movie clip (formerly the tall rectangle) and give it the instance name scrollTrack from the Properties panel

[ give your newly converted movie clip the instance name scrollTrack ]vi. Let's add our scrollFace (the thing you click and drag) now. Create a new layer, and give it the name scrollface.

vii. With your scrollface layer selected, draw a small rectangle on your stage. Give it a darker fill color than your scrollTrack rectangle. Select your rectangle, and in the Properties panel, enter the following values:

. Width: 20

i. Height: 40

ii. X: 280

iii. Y: 100

Your rectangle should look similar to the following:

[ the rectangle that will eventually become your scroll face ]ix. Let's now turn the square into a movieclip. Select the square, press F8 or go to Modify | Convert to Symbol. Give it a name such as scrollface, select the option for Movie Clip, and press OK.

x. Now, select your rectangle (now a movie clip), and give it the instance name scrollFace:

[ give the scrollface movie clip the instance name scrollFace ]On the next page, let's add our up and down buttons and add our code!

Simple Custom Scrollbar - Page 3by kirupa | 19 January 2006

On the previous page, you added the scroll track and scroll face. Let's finish up the interface on this page by adding our up and down buttons. I will also provide the code needed to get everything working.

Let's continue from the previous page:

xi. Create another new layer and give it the label buttons.

xii. Draw two squares with each square having a width and height of 20 pixels. The squares will represent the up and down buttons for the scrollbar.

xiii. Now, draw an up arrow on one square and a down arrow on another. I simply draw a small v and an upside down small v instead:

xi. We need to convert each of these squares into button movie clips. Select one square (and its arrow) and press F8 (Modify | Convert to Symbol). From the Convert to Symbol Dialog window, select the option for Movie Clip and press OK.

xii. Repeat the same process as Step xiv for your other, unconverted square. In the end, both of your squares should be movie clips.

xiii. Select the movie clip with the up arrow. In the Properties panel, enter the following values for X and Y:

. X: 280

i. Y: 0

Now, select your movie clip with the down arrow. Enter the following X and Y values for it in the Properties panel:

. X: 280

i. Y: 180

Your interface should look like the following image:

vi. We aren't done with the interface quite yet. Select your up movie clip and give it the instance name: btnUp. Likewise, select your down movie clip and give it the instance name: btnDown.

vii. Now, we are done with our interface! Let's add some code. Create a new layer and label it actions. Right click on the first (and only) frame on that layer and select Actions. Copy and paste the following code into your Actions panel:

scrolling = function () {

var scrollHeight:Number = scrollTrack._height;

var contentHeight:Number = contentMain._height;

var scrollFaceHeight:Number = scrollFace._height;

var maskHeight:Number = maskedView._height;

var initPosition:Number = scrollFace._y=scrollTrack._y;

var initContentPos:Number = contentMain._y;

var finalContentPos:Number = maskHeight-contentHeight+initContentPos;

var left:Number = scrollTrack._x;

var top:Number = scrollTrack._y;

var right:Number = scrollTrack._x;

var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;

var dy:Number = 0;

var speed:Number = 10;

var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

scrollFace.onPress = function() {

var currPos:Number = this._y;

startDrag(this, false, left, top, right, bottom);

this.onMouseMove = function() {

dy = Math.abs(initPosition-this._y);

contentMain._y = Math.round(dy*-1*moveVal+initContentPos);

};

};

scrollFace.onMouseUp = function() {

stopDrag();

delete this.onMouseMove;

};

btnUp.onPress = function() {

this.onEnterFrame = function() {

if (contentMain._y+speed=bottom) {

scrollFace._y = bottom;

} else {

scrollFace._y += speed/moveVal;

}

contentMain._y -= speed;

} else {

scrollFace._y = bottom;

contentMain._y = finalContentPos;

delete this.onEnterFrame;

}};

};

btnDown.onRelease = function() {

delete this.onEnterFrame;

};

btnDown.onDragOut = function() {

delete this.onEnterFrame;

};

if (contentHeight=bottom) {

scrollFace._y = bottom;

} else {

scrollFace._y += speed/moveVal;

}

contentMain._y -= speed;

} else {

scrollFace._y = bottom;

contentMain._y = finalContentPos;

delete this.onEnterFrame;

}

};

};

btnDown.onRelease = function() {

delete this.onEnterFrame;

};

btnDown.onDragOut = function() {

delete this.onEnterFrame;

};

The only difference is that while the up button focused on the top boundaries for both the content and scroll face, the down button focuses on the bottom boundaries.

Besides minor changes associated with ensuring both the scroller and content work properly as they approach the bottom boundary, the code itself is nearly the same.

ConclusionYou are now done with this tutorial. The most complicated thing about this tutorial, from my point of view, is getting the scroll face and the content synchronized. Because you are rounding the y position for the content movie clip, our mathematical relation linking all of our scrollbar elements will not work without adjusting for them. You saw such subtle adjustments in my up and down button implementations.

When you are scrolling through several hundred pixels, minor rounding errors can eventually result in a major discrepancy between your intended result and the final result. That is why you see a lot* of code for the btnUp and btnDown buttons to ensure that, to the eye, it looks as if both the scroll face and up/down buttons seem to work seamlessly together.

* Ok, it's not a lot, but it's certainly more than what it is necessary for such a simple task.Note - Improved Versions

Optimized CodeMichaelxxOA did a great job optimizing and improving the code featured in this scrollbar tutorial. You can find his source file and code by clicking here.

Mousewheel Support28bit created a version of the code that allows mouse scrolling.

_1326783971.bin