Setting up the general configuration

From this panel we will connect the Scrollbar to the Scroll Area we want, we can setup some basic properties and as well the appearance of the Scrollbar.

The first thing we should do is to create a link between our Scroll Area and our Scrollbar; that's a simple thing and it's done in the following way: give a name to the instance of the Scroll Area you have on your stage and after write the same name in the Target text field from the Scrollbar's General panel. If you have the Auto position option selected, you will see that the Scrollbar will borrow the same dimensions from the Scroll Area. As you have probably understood by now, the Auto position resizes the Scrollbar to fit perfectly the Scroll Area (it borrows the width parameter for an horizontal Scrollbar and the height parameter for a vertical one).

The Orientation option controls the type of the Scrollbar: horizontal or vertical.

The next options refer to the appearance of the Scrollbar; the available options are the default one and the Extend Studio skins (they are developed by our team and you receive them when you purchase our product) and a custom skin you can create by yourself. The next two parameters refer to changing the color of the Scrollbar elements; the first one is for the default state of the scrolling buttons and knob and the second one for the up and down states of the scrolling buttons. You can make the component remember the default colors for each skin (very useful if you like to experiment by changing the colors) by enabling the "Use default skin color" option.

If you follow the link which says “Click here to create your own custom skin!” a new window will open and you'll be able to create a custom skin. For more information, refer to the tutorial section, “How to create a custom skin”. As you can see in the image below, there is a certain naming procedure we have to follow in order for the skin to work. Firstly, there are three states for each component of the scrollbar: up, over and down. In order for the skin to exist, at least the "up" state should exist; the naming procedure works as it follows: [element]_[state]_NameOfTheSkin. The required elements are: btnl (left/up button), btnr (right/down button), knob and track; I recommend that you create a folder in the Library with the name of the skin and place all the elements inside it. As well, a very important thing is that all the elements should be exported for ActionScript following the same naming procedure.

The settings in the last section configure some parameters of the Scrollbar. The Scroll Step refers to the number of pixels with which the movieclip will be scrolled on one press of the Scrollbar's button. The next element is the Continuous Scroll Delay; this refers to a time duration (in miliseconds) the scrolling will be delayed before it starts; as the number you type is larger, the duration increases. The last option refers to the knob's size; if we leave Knob Autoresize option selected, the length will be computed with respect to the sizes of the scroll area and the movie clip. If we configure the skin with Knob Autoresize option OFF, the knob will take a constant value (of 15 pixels).