How to personalize your scroller

In this tutorial we're going to place a Classic Scroller over a movie clip and modify many properties of the Scroller. This will become the first personalized Scroller we create, but by playing and trying out different options, you can find all of them and the ones you prefer for different occasions. 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 and CS4 users: in order to set-up the frame rate, right-click the stage and select "Document properties")

Create file

Create file

2. Import to stage the attached image „CMFX.jpg” an place it at coordinates: X=0, Y=0.

Import_to_stage

Import to stage

3. Convert the image to a movie clip by pressing F8 and name it „clip”.

Convert to symbol

Convert to symbol

4. Open the Components and Component Inspector panels.

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 Classic Scroller onto the stage, over the movieclip. Place it in X=0, Y=0 coordinates and resize it to 300x300, the dimension of the „.fla” file. For the next step we'll start to modify the parameters of the Scroller.

6. Open the Component Inspector with the Classic Scroller selected and perform the highlighted changes:

Configure the General tab

Configure the General tab

Configure the Behavior tab

Configure the Behavior tab

Configure the Borders tab

Configure the Borders tab

Now I will explain you a little what changes we just did; firstly, we started by choosing the skin - „Theme 1” - for our scrollbars. Then we chose their colors, some that will create an harmonious appearance with the image and the border around the scroller. The scrolling type is Mouse absolute, with a short smoothing duration (only 10 frames) and no blurring effect. As a border, we chose a simple blue one with a 20-pixel thickness.

7. Preview your file by pressing CTRL+Enter.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.