Creative Flash Scroller

Download a free trial of   Creative Flash Scroller
Buy Creative Flash Scroller
 

Creative Flash Scroller documentation

box 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 create a custom skin for our Scroller; we will try to obtain a „Marine” look by using the Scroller's customizability. I want to start by reminding you that, in order for the tutorial to work, you need to do one thing. You have 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).

  This tutorial was created for AS3 ( Flash Action Script 3 )  as3

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

Create file

2. In order for us to create a custom skin for a Scrollbar, we need to create its elements on the stage, and then save them as movie clips in the Library under specific names (you can read more about the naming procedure in the Complete Product's Documentation). The elements of the Scrollbar are: the scrolling buttons (up/left, down/right), the track and the knob. In order to create the shapes we need, we'll use three graphic tools: the Oval tool, the Rectangle Primitive tool and the Line tool.

Graphic tools

Graphic tools

3. Select the Rectangle Primitive tool and create a rectangle on the screen. Change its properties as in the next image; the colors used are: black (#000000) for the fill and blue (#0000FF) for the stroke.

Rectangle primitive

Rectangle

4. Now let's create the track; select the Line tool and draw a light-blue (#0066FF) line on the stage. Modify its properties as in the following image:

Line

Line

5. The final element we will use is the one which controls the scrolling – the button. Select the Ellipse tool and draw on the stage a small circle with the following properties:

Ellipse

Ellipse

Note that the colors for the circle are the same as the colors for the rectangle. Now select the circle by double-clicking it (be careful to select both the fill and the stroke) and press Copy, then Paste, in order to create another identical circle on the stage.

6. Now we'll deal with converting the shapes into movie clips and giving them proper names. Name them like this: one of the circles – btnl_up_marine, the other one - btnr_up_marine, the rectangle – knob_up_marine and the line – track_up_marine. For each of the skin element there are three states (up, over and down) but in order for the skin to work we need only one to exist – the others will be taken from it; for simplicity, we will use only one state (up).

7. Let's take a look at the stage now. The zoom level is set to 400%, in order to see better the elements; this is how one of our scrollers will look like:

Custom skin elements

Custom skin elements

8. Now we are almost done; let's work a bit on our Library and then we can finish. From the enclosed „.fla” file's Library, copy the „clip” element into your file's Library. As well create a new folder called „Marine” and put all the four Scrollbar elements inside.

Skin folder

Skin folder

9. The next step is to export all these elements for ActionScript. Select them one by one (each four), right-click them, select Linkage and check the Export for ActionScript check-box.

10. Now if you have something left on the stage, delete it. Drag on the stage an instance of the „clip” movie clip; open the Components and Component Inspector panels and drag an instance of Classic Scroller over „clip” (X=75, Y=75).

Open the Components and Component Inspector panels

Open the Components and Component Inspector panels

11. Let's configure the scroller the way we want. Open the general tab from the Componenet Inspector and press on „Click here to create your custom skin!”; write „marine” in the Skin name field and click OK. Leave everything else as it is and preview your file.

Custom skin window

Custom skin window

Creative Flash Scroller

box 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.

windows xp
windows vista
windows seven
apple mac os
• OS : Creative Flash Scroller is supported by multiple OS from Windows XP to Windows 7 and any Mac OS X 10 or greater.
 
Creative Flash Scroller
for AS2 works on:
flash 8
flash cs3 flash cs4 flash cs5
 
Creative Flash Scroller
for AS3 works on
flash cs3 flash cs4 flash cs5
 
In order to view the
results you need at least:
flash player 8
Adobe Flash
Player 8,9 for AS2
flash player 10
Adobe Flash
Player 10 for AS3