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 scroll area 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).
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 double 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
Creative Flash Scroller AS3 Skins and copy a theme from the library. I liked theme 5 so Ill copy theme5. Go to you file's library and paste the theme. Delete the theme from the stage, and make sure you dont 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 weve 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.
12. Press CTRL+ Enter for the final preview. Done! Visit www.extendstudio.com for more tutorials.
|» Level Basic|
Rating: 7.25 Votes: 4
|Download the files used in this tutorial.|
|Download (0 kb)|
|More help? Search our boards for quick answers!|