Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to create a simple scroller with Creative Flash Scroller

In this tutorial we’re going to create a simple scroller where you’ll be able to scroll horizontally and vertically through images and text. 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.

This tutorial was made using:

Creative Flash Scroller

Creative Flash Scroller Creative Flash Scroller is a multipurpose Flash 8, Flash CS3 and Flash CS4 scroller that can scroll anything, can be placed anywhere in your Flash project, can be customized to suit your design and can be reused at any time. It comes with 3 components: Creative Classic Scroller (classic scroller with adjacent scrollbars), Creative Scroll Area (scroll area with no scrollbars), and Creative Scrollbar.

Find out more!

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

Create file

2. The next step is to import to stage the file “CFLS-BOX.png” (you can find it in the attached package).

Import to stage

Import to stage

3. Select the Text tool and insert some text on the stage. You can find as well the text to insert in the attached package under the name “text.txt” (Copy+Paste it in your text box). Make the text field 450 pixels wide. In the next image you can see how the ensemble of elements should look like.

Ensemble for symbol creation

Ensemble for symbol creation

4. Select both the image and the static text and convert them into a movieclip and name it “Layout” (you can do that by pressing F8 while both of them are selected).

Convert to symbol

Convert to symbol

5. Open the Components and the Component Inspector panels.

Open the Components and Component Inspector panels

Open the Components and the Component

Inspector panels

5. From the Components panel, drag an instance of Classic Scroller on the stage. Modify its properties in the following way:

Modify the scroller properties

Modify the scroller properties

6. In the component interface, leave its properties default for now except for choosing “Theme 1” as a skin. Save your file and preview it by pressing CTRL+Enter; it should look like this:

Preview your file

Preview your file

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.

Facebook comments:



Leave a Reply