Scrolling
Dynamically Loaded Text
         by kirupa chinnathambi

One question that often appeared in my mailbox or on the forums regarded creating a text scroller that worked when text was loaded from an external text file. I had told users that it was not possible to create that effect until a user (Ged) e-mailed me with a link to Macromedia's tech note (no: 16142). In his link, I found out how to create the text scroller and make it work easily. So, here is the tutorial to help you out!

The following is an example of the animation you will have created by the end of this tutorial:

[ the text in the scroll box was loaded from a location on the server ]

Creating the Text Scroller:

  1. Create a new movie by going to File | New. Set the width and height of your movie to anything you choose.
     
  2. Click the Text Tool icon from the left. The Properties panel should appear. Select Dynamic Text from the drop-down menu on the bottom-left:

[ select Dynamic Text ]

  1. After you have selected "Dynamic Text", draw your text box. Make the text box large enough to contain several lines of text:

[ the white rectangle above is the text box ]

  1. Now that your text box is drawn, select the text box with your mouse pointer. In the Properties Panel, replace <instance name> on the left with the word scroller:

[ set the instance name of the dynamic text to scroller ]

From the Properties panel, make sure you select Multiline for the line type. That ensures your text wraps as opposed to displaying in one huge horizontal line.

  1. Now, make sure your Components panel is visible. To display the Components panel, go to Window | Components or press Ctrl + F7. The Components panel will be visible on the right.
     
  2. From the Components panel, drag and drop the Scrollbar Component on top of the text box you just created. The scrollbar will automatically resize and snap to your text box:

[ the scrollbar automatically snaps to the text box ]

  1. The final step to our Flash movie involves adding the action. Right click on a keyframe on your timeline and select Actions. The Actions dialog box will appear. Copy and paste the following code into the Actions dialog box:

[ copy and paste the above code into the Actions dialog box ]

  1. You are done with the Flash animation, but you have yet to create the text file from which all the text will be loaded from. The next section will help you to do just that: create the text file.

Creating the Text File:

  1. Open up an ASCII text editor. I will be using Notepad because I am on a Windows-based PC.
     
  2. Copy and paste the following text into Notepad:

[ copy and paste the above text into Notepad ]

  1. Now, the text should be visible in Notepad. Place your mouse cursor before the word "Hello" on the first line and press Enter or Return. Now, type the words kirupatext=:

[ enter the words "kirupatext=" above the words "Hello There!" ]

  1. Now, save this text file as kirupa.txt and place it in the SAME folder as that of your Flash animation.
     
  2. Preview the Flash animation in your browser. You will now see the text that you pasted into Notepad display in your text box. Best of all, the scrollers work!

ActionScript Explained
Not to leave you in the dark, I will briefly summarize what the major
lines of ActionScript stand for. For reference purposes, here is the copy of the code you pasted in Flash:

In the first line, I am creating a loadVars function to loadText, and in the next line I initialize loadText to load kirupa.txt when the variable first gets loaded (.load). With that, I tell Flash to load the variables, the content, from the file kirupa.txt.

In the next segment of code, I create a new function and apply the variables stored in loadText (from the kirupa.txt file) to the text scroller. Remember, that the text property of a text box specified what is displayed in the text box. Therefore, the the content in scroller.text equals what the variable kirupatext equals.

Remember that kirupa.txt is the name of the Text file you saved. The variable kirupatext is the text you added to the file in your ASCII Editor (notepad).

You have just completed the tutorial! As always, I have provided the source code for you to take a closer look at. Click the download source link below to download the Flash MX Flash File (FLA) for this effect.
 

download source for flash mx

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.