Scrolling

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 ]

3. 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 ]

4. 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.

5. 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.
    
6. 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 ]

6. 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:

loadText = new loadVars(); loadText.load("kirupa.txt"); //creating the loadVarsText function loadText.onLoad = function() { scroller.text = this.kirupatext; };

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

8. 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.

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:

loadText = new loadVars(); loadText.load("kirupa.txt"); //creating the loadVarsText function loadText.onLoad = function() { scroller.text = this.kirupatext; };

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

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!