How to create an unconventional Flash scroller using Creative Flash Scroller tutorial

Creative Flash Scroller documentation

With Creative Flash Scroller you can scroll any kind of Flash Content: static text, dynamic text, pictures, animations, movies. It comes with multiple scroll behaviors: touch scroll, mouse gesture scroll, scrollbar scroll and even supports mouse wheel behavior. You can add smooth scrolling or motion blur effects and customize it to suit your design, from an easy to use interface.

How to create an unconventional Flash scroller using Creative Flash Scroller

When we speak about Flash scrollers, we are used to see a square area with some scrollbars on their left and bottom sides. Creative Flash Scroller can change all that! With our product you can place the scrollbars anywhere and in this tutorial I will show you how.

Here is how the result should look like:

I want to start by reminding you that, in order for the tutorial to work, you need two things. First is to have the Creative Flash Scroller component installed using Adobe Extension Manager (if you encounter any problems doing that, please refer to the „How to install an extension” tutorial)

The second is to copy the skin themes from the product package in the Library of your file, as highlighted in the warning message. You can find them in the Commands top menu - Creative Scrollbar Skins.

Click here to download the source file and the required files for solving this tutorial.

1. Let’s start by opening Flash and creating a new file. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select “Document properties”)

Create file

2. Copy the movie clip „clip” in your Library; you can find it in the Library of the attached file.

Copy the clip to library

3. Right-click the „clip” file in the library and select „Linkage”. Tick the „Export for ActionScript” checkbox and then press OK.

Export for ActionScript

4. Open the Components and the Component Inspector panels.

Open the Components and the Component Inspector panels

5. From the Components panel, drag an instance of Scroll Area and four instances of Scrollbar on the stage. Give the Scroll Area the following values for its sizing and position properties:

Scroll area size and position parameters

6. Let’s connect the Scroll Area and the movie clip from the library. From the Component Inspector, the General tab, select Target - „clip” and Target Type – Library item. Leave everything else as it is:

Scroll Area General configuration

7. In the Behaviors tab, make the following changes:

Scroll Area Behavior configuration

8. Before we start editing the scrollbars, we have to copy the skins in the Library. Open the „Themes.fla” file (you received it when you bought the product) and copy the Library items from there into your file.

9. Now let’s edit the scrollbars; we will have two horizontal ones and two vertical ones. Just select each one and make the following changes, choosing horizantal Orientation for two and vertical Orientation for the other two; as well please select the scroll area and name the instance „area” as in the target fields of the scrollbars.

Scrollbar configuration

10. Now we will edit their sizing and position options. In the next image you will see their coordinates, first two being the horizontal ones and the last two, the vertical ones.