Create a Flash text scroller tutorial

Creative Flash Scroller documentation

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.

How to create a Flash text scroller with no coding

In this tutorial we will create a basic Flash text scroller using vertical and horizontal scrollbars without coding. It comes handy when you have a lot of text to display and you want to create a scrollarea that the user can scroll down or even left to right using the navigation keys, touch scroll or mouse wheel (unfortunately mouse wheel does not work on MAC).

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

To make the scroller faster and without coding, we are going to use Creative Flash Scroller AS3 - a Flash component that makes scrolling very easy. But first let's have a look at the results:

This is the result

Requirements

Flash CS3 or CS4
Creative Flash Scroller AS3 (you can download a free trial from here)

Installing the Creative Flash Scroller AS3 component

After you download the component, unzip the content and doouble click on the .mxp file. This will install the component via the Adobe Extension Manager and make it available in the Components Panel in Flash. Here is a short Download and Install Creative Flash Scroller AS3, and a how to locate the Creative Flash Scroller AS3 components in the Flash working environment.

Adding the text you need to be scrolled

1. Open Flash and create a new AS3 file. Open from window : components and Component Inspector.

2. For this tutorial I went to www.lipsum.com and generate some dummy text paragraphs.

3. Go into Flash select the text tool, change the font to Arial, the size to 14 px, the style to bold and drag a text area, and paste the text. Change the type of text to dynamic text. Go to paragraph and in the Behavior section select Multiline. Place the text at 0,0 coordinates.

4. Convert the text to symbol by pressing F8. Enter the name "text1", leave it to movie clip. Click export for Action Script and make sure the Export in frame 1 is also selected, and then press OK.

5. From the Components tab add a Classic Scroller AS3 to the stage over the text movie clip.

6. Select the Classic Scroller and open the Component Inspector panel. Target should be InstanceName_0 (that is the instance name for the symbol text1) . For the target type use "Stage item".

Changing the Scroller skins

7. Changing the scroller skins using the embedded skins library. Go to Commands-> Creative Flash Scroller AS3 Skins and copy a theme from the library. I liked theme 5 so I’ll copy theme5. Go to you file's library and paste the theme. Delete the theme from the stage, and make sure you don’t delete it from the library.

From Skins select Theme5 (or the theme that you copied). Deselect "use default skin colors" and choose a color, let's say #333333 and leave everything else the same.

8. Press CTRL+ Enter for a quick preview of what we’ve done so far. We should only have a vertical scrollbar, with a gray color on it and a motion blur effect when scrolling.

9. Double click the text symbol, and position the text to X:0 and Y:0. Double click outside the symbol and position the symbol also at 0,0.

10. Press CTRL+ Enter for a quick preview to see if the text was placed correctly.

11. Resize the Classic Scroller to a width of 300px and press CTRL+ Enter to see the both scrollbars in action.

11. Change the color to a light blue #0099FF and preview it. Now we only have to change the blur level. Go to behavior tab, and find blur level and set it to low.