General Tab - Setting up the general Scroller configuration

Note: to access the Classic Scroller AS3 interfaces, you need to drag the component on the stage over a Movie Clip, select the component on the stage and open the Component Inspector.

In the General Tab you can make the most basic settings to have a working Flash scroller. Here is how the General Tab looks like:

Setting up the general configuration

Setting up the general configuration

Target Settings

Assuming that you have already created an AS3 file and have a Movie Clip on stage or in the library, you need to drag the Classic Scroller AS3 component on stage. The first thing to do is to select the Target Type – if you'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”).

Movie clip on the stage

If you use a clip from the stage, the movie clip will appear behind the Classic Scroller component. Simply drag the component over the movie clip and it will automatically Snap and set the target.

Movie Clip in the library

If you use a movie clip from the library, you'll see it only when you 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. Also, you need to fill in the Target name manually (with the Instance name of the movie clip).

Appearance

In this section you can select the skin used for the scrollbars and arrows by the Classic Scroller component (this will impact the look&feel of the Flash Scroller). The available options are:

For the default and Extend Studio skins you can use the default skin colors or change them (you can change the color of the Scrollbar elements; the first color selection is for the default state of the scrolling buttons and knob and the second one is for the up and down states of the scrolling buttons). You can return to 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 “How to create a custom skin” tutorial. As you can see in the image below, there is a certain naming procedure you have to follow.

There are three states for each component of the scrollbar: up (mandatory), over (optional) and down (optional). 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.

You should create a folder in the Library with the name of the skin and place all the elements inside it (all the elements should be exported for ActionScript).

Custom skin window

Custom skin window

Scroll Behavior

The in the last section of the General Tab you can configure the most basic parameters of the Scrollbar. The Scroll Step refers to the number of pixels will be scrolled on one press of the Scrollbar's button. The Continuous Scroll Delay refers to the 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 you leave Knob Autoresize option selected, the length will be computed depending on the sizes of the scroll area and the movie clip. If you configure the skin with Knob Autoresize option OFF, the knob will take a constant value (15 pixels).