Create a Flash Scroller AS3 in 5 Steps

In this tutorial we will create a short example together – an example in which I would like to highlight some important aspects of the program's functionality and usability; also, we will use all the three parts of our product and like this you will understand fully how it can be applied.

1. Let's start by opening Flash and creating a new AS3 file; the first thing we need is to have the Creative Flash Scroller component installed. If you have any problems installing the component, please refer to the "How to install an extension tutorial". (For CS3 users, in order to set-up the frame rate, right-click the stage and select "Document properties").

Create file

Create an AS3 file

2. Import to Stage an image from your local machine. You can as well import it to library, then drag it to stage.

Import to stage

Import image to stage

3. Convert the image to Movie Clip. Press F8 or go to Modify/Convert to Symbol in the upper Flash menu.

Convert to symbol

Convert to symbol (movie Clip)

4. Open the Components and the Component Inspector panels from the Window tab of the top menu. At this point you need to decide if you want to make the Scroll using a single component that creates a scrolling area and scrollbars automatically (using the Classic Scroller AS3) or create the scroll manualy from independent components: ScrollArea AS3 and Vertical&Horizontal Scrollbars.

Open the Components and Component Inspector panels

Open the Components and Component

Inspector panels

Creating a complete Flash scroller using the Classic Scroller AS3 component

1. From the Components panel, drag an instance of the Classic Scroller AS3 on the stage over the Movie Clip you have created previously. It will autosnap and take its target automatically. Open the Components Inspector if you want to do any optional settings to the scroller. If not, you can preview your movie by pressing CTRL+Enter and you are done!

Check target association

Check target association

Creating a manual Flash scroller using the ScrollArea and the Scrollbar individual components

(if you didn't create the scroller using the Classic Scroller AS3 component)

1. From the Components panel, drag an instance of the ScrollArea AS3 on the stage over the Movie Clip you have created previously. It will autosnap and take its target automatically. Open the Components Inspector if you want to do any optional settings to the scroll area.

2. Depending on the size of the Movie Clip and the size of the Scroll area, you might want to add Horizontal or Vertical Scrollbars (or both). To add them, open the Components Panel and drag a Vertical or Horizontal component over the ScrollArea component on the stage. They should autosnap and take their target automatically. Open the Components Inspector if you want to do any optional settings to the scrollbars.

3. You can preview your movie by pressing CTRL+Enter and you are done (save the AS3 file)!

Further reading: