General Tab - Setting up the general Scrollbar AS3 configuration

Note: to access the Scrollbar AS3 interfaces, you need to drag the component (Vertical or Horizontal) on the stage over the ScrollArea, select the component on the stage and open the Component Inspector.

In the General Tab you can make the most basic settings to the ScrollBars (Vertical or Horizontal) and connect them to the ScrollArea. You can as well configure the Skins and the Scrollbar basic behaviors. Here is how the General Tab looks like:

Setting up the general configuration

Setting up the general configuration

Target Settings (connect the Vertical of Horizontal Scrollbar to the ScrollArea)

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 ScrollArea AS3 component on stage. Next you should drag a Vertical or Horizontal Scrollbar over the ScrollArea.

Automatic targeting

If you drag the Scrollbars over a ScrollArea, the target is autofilled.

Manual targeting

If you place the Scrollbars on the page and not on the ScrollArea, you need to give a name to the instance of the ScrollArea you have on your stage and write the same instance name in the Target text field from the Scrollbar's General Tab.

Positioning

The Auto position setting resizes the Scrollbar to fit perfectly the Scroll Area.

Appearance

In this section you can select the skin used for the scrollbars and arrows by the Scrollbar 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).