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 are going to use custom cursors with Creative Flash Scroller. We will use some previously created movie clips for them and assign one cursor for each scrolling behavior. You can find everything that you need in order to do this tutorial in the attached file. One thing which I would like to remind you is that in order to do the tutorial you need the Creative Flash Scroller component installed on your computer; if you encounter any problems doing that, please refer to the „How to install an extension” tutorial.

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

1. The first thing we need to do is to create our Flash file; set the frame rate to 35. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select "Document properties")

2. From the library of the attached „.fla” file, copy all the movie clips and paste them into your file's library.

3. Drag an instance of „clip” on the stage and set the following coordinates for it.

4. In the next image I will show you the movieclips we will use as custom cursors; after that, I will connect them with the scrolling behavior each of them is for. Their names are not random and they follow the naming procedure Creative Flash Scroller has; in the future, if you want to create your own custom scrollers, follow this naming procedure.

The „cursorABS” will be used with „Mouse absolute” behavior; the next two cursors will be used with „Mouse relative” behavior – when the cursor will be in the „No Mouse Scroll” area the red one will be shown, otherwise, the blue one. The last two are for touch-scrolling behaviors; when you move over the image the first will be shown while when you grab-and-drag, the second one will take its place.

5. The next thing you should do is to export all the cursors for ActionScript. As you copied them from my file, this should already be done, but check anyway. Right-click each of them and select „Linkage”; in the window which appears, the checkbox „Export for ActionScript” should be selected. The names for ActionScript should follow the Creative Flash Scroller naming procedure. You can see an example of how the Linkage panel should look below:

6. Let's insert the scroller now. Open the Component and Component Inspector panels.

7. From the Components panel, select an instance of Classic Scroller and drag it on the stage. Place it at the following coordinates:

8. Select the scroller and open the Component Inspector panel. In the Behavior panel, select the „Use custom cursor” checkbox. One more thing I think would be helpful to specify is that I left al the other options in their default state.