Setting up the general configuration

From this panel we will select on what the scrolling will be applied on and some visual aspects of it. As well, we'll decide how sensitive the scrolling will be.

Setting up the general configuration

Setting up the general configuration

The first thing we have to do is to select an option from the list for Target Type – to consider if we're going to use the Classic Scroller with a movie clip from the stage (select “Stage Item”) or with one from the library (select “Library Item”); this is an useful option in connection with the layout of our file (if we use a clip from the stage, we'll see it behind the Classic Scroller component, if we use one from the library, we'll see it only when we preview the file). A very important hint is that when you use Classic Scroller with a movie clip from the Library, you need to modify the Linkage of the clip and Export it for ActionScript.

Next we have to give the name of the movie clip to be scrolled. If we'll apply the Classic Scroller to a clip from the library, we have to write its name; in case we apply the clip to an item from the stage we have to write in the target text field the name of the instance of the clip we want to apply the scrolling to. If we just drag the Classic Scroller over an unnamed instance of a movie clip, they will both be automatically given the same name.

In the next section we can select the skin we will use for our Classic Scroller. 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.

Custom skin window

Custom skin window

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).