First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: extendstudio | Website: http://www.extendstudio.com
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 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 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.

12. Press CTRL+ Enter for the final preview. Done! Visit www.extendstudio.com for more tutorials.
» Level Basic

Added: 2010-04-16
Rating: 7.25 Votes: 4
(10 being the highest)
» Author
www.extendstudio.com
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.