Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 

 
Creating
a Text Scroller
         written by kirupa chinnathambi

Ever tried creating a text scroller to scroll a few lines of text in Flash 5? If you haven't consider yourself lucky! Creating a text scroller in Flash 5 is the equivalent of writing the Declaration of Independence backwards from memory. Fortunately for us, Flash MX includes a built-in component that automatically creates a text scroller for the text you specify.

Of course, Flash MX doesn't make it that easy to create a text scroller. That's why this tutorial exists. The following is an example of the text scroller you will create by following my instructions:

[ you will create the above animation ]

Creating a Text Scroller:
The steps will explain how to setup the movie for creating the above animation:

  1. Create a new document in Flash MX by going to File | New. A new, blank Flash MX movie will be displayed.
     
  2. Modify the movie's width and height to 300 pixels by 200 pixels respectively.
     
  3. How can you have a text scroller without using any means of displaying text? You cannot! Click the Text Tool icon from the Tools panel on the left.
     
  4. Once you have clicked the Text Tool icon, draw a fairly large text box in your movie. Your movie should look like the following image:

[ results of having used the text tool ]

  1. After the text box has been drawn, click on the Arrow tool in your Tools panel. Now, click on the text box you just drew with your mouse pointer. You will notice that the properties panel changes to reflect the various options available for the text box.
     
  2. From the Properties panel, you will need to make some modifications to our text box. From the first drop-down menu, select Dynamic Text. Click the text field with the words '<Instance Name>'. Enter the word, scroller. From the Properties panel, set the font to Verdana size 10. Your Properties panel should look like the following image:

[ the modified text box properties panel ]

  1. We are not quite done modifying the Properties panel. Click the drop-down menu which says 'Single Line' and select the Multiline option.
     
  2. Lastly, you should see four alignment buttons toward the right of the Properties panel. Click the Center Justify button. The Center Justify button will be depressed:

[ the center justify button is pressed ]

  1. With the text box complete, the only thing missing is the text scroller. You should see a Components panel on your right. If you do not see the Components panel, go to Window | Components.
     
  2. From the Component panel, you will see the ScrollBar component displayed:

  1. Click on the ScrollBar component from the Components panel and drag-and-drop it ON your text box. The ScrollBar component should automatically resize itself to the size of your text box.
  1. Now, it is time to copy the text that will be scrolled. Highlight all the text in the scroll box and press Ctrl + C:

  1. Once you copied the entire text, it is time to paste the text into Flash. Click the Text Tool icon and click on the text box with the scroller. Your mouse cursor will change to look like a character input character (the vertical line). Paste the text you copied. Your text box should look like the following image:

[ the text box after the text has been pasted ]

  1. Save the file and preview it in your browser by going to File | Publish Settings | HTML.

You have just completed creating your text scroller. If you think this was tough, imagine how difficult it must have been to create a text scroller for Flash 5. As always, I have provided the source code to the animation you see above. Click the Download FLA link below to download the source file:

download fla

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components

Flash Templates
CSS Templates
Dreamweaver Templates

flash menus, buttons and components
Digicrafts Components The best flash components ever!
Entheos Flash Website Templates Buy and sell FLAs at Ultrashock!
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com Purchase & Download Flash Components
Learn how to advertise on kirupa.com