TechNote (Archived)

How to create scrolling text in Flash MX

The examples in this TechNote demonstrate the use of the ScrollBar object found in the Flash UI Components panel. Before reading this TechNote you should be comfortable with creating dynamic text fields in Macromedia Flash MX, using the ScrollBar component and working in Expert mode in the Actions panel.

Note: the Macromedia Flash Player 6 plug-in is required to view the example movies.

Download the Windows example file: scrolling_text_mx.zip (54K)
Download the Macintosh example file: scrolling_text_mx.sit (42K)

Creating a scrollable text field in Flash MX

The following instructions will guide you through creating your own scrollable text field in Flash MX. Please read each step carefully, and make sure to complete each task in the sequence listed below:

1	Create the Text Field
	Create a new Flash document. ( File > New) Select the Text tool from the tool bar. Click and drag a text box on the stage.

2	Setting the parameters of the text field
	Open the Properties panel. (CTRL + F3) Set the Text type to Dynamic Text. Set the Line type to Multiline. Leave the other settings at their default setting.

3	Adjust the size of the text box
	Make sure the Text tool is active. Click directly on the text box that you created on the stage. This allows you to adjust the size of the text box. You may adjust the size of the text box as needed by using the adjustment handle. Note: DO NOT use the scale tool to resize your text box!

4	Adding the new Scroll Bar component in Flash MX
	After creating the text box, open on the Components Panel (or press F11) and click the ScrollBar component. Next, you must determine where to place the scroll bar. The following diagram will gives a guideline of where your scroll bar will appear, based on the region in which the scroll bar component is dropped. The red X separates the text box into 4 regions. For this tutorial, drag and drop the scroll bar component on the right region of the text box. Dragging and dropping the scroll bar component to one of the regions in your text box will determine whether the scrolling will be vertical or horizontal.

5	Adding text for scrolling
	Select the Text tool. Type several lines of text so that the text box begins to scroll your text up as you advance to each new line. When you're satisfied with the contents, test the movie by selecting Control > Test Movie or using keyboard shortcuts: Windows: (Control + Enter) Macintosh: (Command + Return)

6	Adjusting the size of the new scrolling text box (optional)
	Select the Text tool. Click directly on the text box to edit it. Look at the the bottom right corner of the text box. The adjustment handle has changed to a solid black color. You may adjust the size of the text box by dragging on the black adjustment handle.
7	Notice that the scroll bar component does not conform to the new size of its text box counterpart. To resize the scroll bar component, simply drag and drop the scroll bar back into a desired region on the text box. It will automatically resize itself to fit the text box.

External text and the Flash MX ScrollBar Component

Depending on your specific needs, it may be necessary to load text from an external file into a dynamic text field in Flash MX. The following example and steps illustrate one way to add this functionality to Flash movies.

Loading external text to a dynamic text field

An example of external text using the ScrollBar component.

Download Windows source file dynamic_text_MX.zip (44K)
Download Macintosh source file dynamic_text_MX.sit (44K)

In Macromedia Flash 5 and earlier, data from an external text source was loaded using the loadVariables command. The dynamic text field is given a variable name, and the text file contains text that sets that variable name. For example, if the text field variable name is myText, the text file may look like this (spaces have been URL encoded):

myText=This%20is%20a%20lengthy%20variable.

Loading text into a dynamic text field in Flash MX is done differently. Text is an ActionScript object, so a text field can have both a variable name and an instance name (see Flash MX Text fields have instance names and variable names, TechNote 16184).

Flash MX also introduces a more sophisticated action for loading external data called loadVars(). These two methods are combined to load external text to a scrolling text field created using the ScrollBar component.

1	Create a scrolling dynamic text field using the techniques described above. Note: Do NOT give the text field a variable name, instead give it an instance name. In this example the instance name is scroller and set the line type popup menu to multiline.
2	Create an external text file to hold the data. In this example the text file is named test.txt, and is in the same directory as the final SWF. The format of the text should be name=value pairs, separate by ampersands. For example, in this sample file the text file begins"var1=All dynamic..."
3	Next add the ActionScript to load the external text file. This script uses the new loadVar() action, and is assigned as a frame script. //Create a new instance of the loadVars object and assign it to a variable loadVarsText = new loadVars();
4	Load external text into the loadVars object: loadVarsText.load("test.txt");
5	Check for a successful load of the data. If the data is loaded, the text method of the Text object can be used to assign the data to the text field: //assign a function which fires when the data is loaded:loadVarsText.onLoad = function (success){ if (success){ trace ("done loading"); //Now that we know the data is loaded, //set the text content of the Text Field //with the instance name "scroller" equal to the //contents of the variable scroller.text = this.var1; }else{ trace ("not loaded"); } } Note: It is not absolutely necessary to assign the text to the Text field instance at this time. This could be done in a later frame, but it is a good idea to create a function to insure that the data has loaded. In this example the data is held inside the loadVarsText object, so it can be called at any time using: scroller.text = loadVarsText.var1

Using HTML formatting
To use html formatting with dynamically loaded text use the TextField.htmlText property. This allows Flash MX to parse the HTML tags that are contained in the loaded text.

There are two parts to this process:

1	Set the TextField.html property to true to identify the text field as having HTML formatting. Using the above example: scroller.html = true;
2	Use the TextField.htmlText property instead of TextField.text to set the variable: scroller.htmlText=this.var1; The final script for dynamically loaded text with HTML formatting //assign a function which fires when the data is loaded:loadVarsText.onLoad = function (success){ if (success){ trace ("done loading"); //Now that we know the data is loaded, //set the text content of the Text Field //with the instance name "scroller" equal to the //contents of the variable scroller.html = true;scroller.htmlText = this.var1; }else{ trace ("not loaded"); } }

Set the TextField.html property to true to identify the text field as having HTML formatting. Using the above example:

scroller.html = true;

Use the TextField.htmlText property instead of TextField.text to set the variable:

scroller.htmlText=this.var1;

The final script for dynamically loaded text with HTML formatting

 //assign a function which fires when the data is loaded:loadVarsText.onLoad = function (success){ if (success){ trace ("done loading"); //Now that we know the data is loaded, //set the text content of the Text Field //with the instance name "scroller" equal to the //contents of the variable
		

	 scroller.html = true;scroller.htmlText = this.var1; }else{ trace ("not loaded"); } }

Additional information
If you would like to customize the look of the scroll bar component, please see the Components section of the Using Flash MX manual.

For instructions on creating scrolling text in Flash 5, see the sample scrolling buttons and scrollbar in the sample file located in the Flash 5 applicationâ”select Help > Samples > Advance buttons. Scrolling text is also covered on most of the third partyFlash tutorial sites.

If you would like to create scrolling text for Flash 4, see How to create Scrolling Text in Flash 4 (TechNote 14156). This method will also work in Flash MX, but it requires much more work than setting up a Scroll Bar component in Flash MX. Please note that the scroll property is deprecated in Flash MX, and may not exist in future versions of Flash. Flash MX includes the scroll property in order to support Flash 4 and Flash 5 FLA's.