Creative Flash Scroller

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.

In this tutorial we will use a scroller but a little differently than before; we will instanciate and configure it from ActionScript. 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")

2. In the enclosed files, you can find an image called „test_image.png”; save it on your computer and import it to the stage.

3. It should have the following placing properties:

4. Convert the image to a movie clip by pressing F8; name it „clip”.

5. Now it's time to copy in our Library the elements we will need; open Components, Component Inspector and Library panels. From the Components panel, drag instances of Creative Scroll Area and Creative Scrollbar into your Library; as well, copy the Extend Studio themes into the Library.

6. In order that everything will be clear, I attach an image which shows the Library at this time:

7. The next step is to insert the necessary code; select the first frame, open the Actions panel and paste the following code:

var scrollObj:Object = new Object();
scrollObj.target = 'clip';
scrollObj.baseWidth = 250;
scrollObj.baseHeight = 250
scrollObj._x = 150;
scrollObj._y = 75;
scrollObj.scrollBehavior= 'Mouse Absolute';
this.attachMovie("Creative Scroll Area", "scrollArea", 10, scrollObj);


var hscrollbarObj:Object = new Object();
hscrollbarObj._targetInstance="scrollArea";
hscrollbarObj.autoPos=true;
hscrollbarObj.skin="theme1";
hscrollbarObj.orientation="Horizontal";
this.attachMovie("Creative Scrollbar", "hscroll", 20, hscrollbarObj);


var vscrollbarObj:Object = new Object();
vscrollbarObj._targetInstance="scrollArea";
vscrollbarObj.autoPos=true;
vscrollbarObj.skin="theme1";
vscrollbarObj.orientation="Vertical";
this.attachMovie("Creative Scrollbar", "vscroll", 30, vscrollbarObj);

I will explain in a few words what I did here; in the first block of text I set some parameters for the Scroll Area (target, size, position and behavior) and then I instanciated the object. The next two blocks of text deal with the scrollbars – the horizontal respectivelly, the vertical ones; here as well, I set some parameters – target, skin, orientation. All the ActionScript reference you can find in the ActionScript dictionary. We have to set also the autoPos parameter as true, otherwise the scrollbars will pe place at (0,0) coordinates.