Text Scrolling with the TextArea Component

Continuing from the previous Flash movie example with the digital video production presentation, you learn how to create basic scrolling text using the TextArea component in Flash 8. You can scroll text in Flash 8 with either the UIScrollBar or the TextArea component. We will demonstrate the use of the TextArea component for one item in the videoEquip symbol to get you started.

1. In the Flash document you created from the previous section, double-click the mcEquip instance on the Stage, at frame 10 of the content layer. Flash 8 switches to Edit mode.

2. Add a new layer, and rename it ctaDesc. (We use the prefix cta to designate a TextArea component, and the Desc is short for description.) Move this layer beneath the buttons layer, and select frame 1 of the ctaDescription layer. Now, open the Components panel (Ctrl+F7 or z+F7). In the UI Components nesting, drag an instance of the TextArea component to the Stage, to the right of the mcTape instance.

3. Use the Free Transform tool to stretch the component instance. This instance should accommodate several lines of text, as shown in Figure 20-17. The size of the instance should match the size of the text area you wish to display in the scrolling text window. In the Property inspector, name the TextArea instance ctaDesc. In the Parameters tab of the inspector, change the html setting from false to true. The html setting controls whether or not the instance should interpret HTML tags. Also, change the editable setting to false; the user should not be able to change the contents of the text field at run time.

Figure 20-17: This text field will display the text associated with the first video item.

Now, you'll need to supply some text to the ctaDesc instance. You can specify text directly in the text parameter of the instance in the Property inspector, but for this project, you'll learn how to format HTML text that is assigned in ActionScript to the TextArea component. Open the item_1.rtf document in a text editor such as WordPad or TextEdit. This file is located in the ch20/text folder of this book's CD-ROM. Now, open the item_1_formatted.txt document on the CD-ROM, and compare it to the item_1.rtf version. (You may want to enable word wrapping in your text editor so that you can see all of the text in the TXT file.) You'll notice that all of the text in the TXT file is specified in one continuous nonbreaking line. Moreover, any carriage returns in the item_1.rtf have been replaced with <br/> tags in the TXT version. Some characters, such as the double quotes around the word "data," have been escaped in the TXT file — that is, the character is preceded by a backslash (\). These special formatting characters ensure that ActionScript will correctly display the text.

4. Select all of the text in the item_1_formatted.txt file, and copy it. Later in this exercise, you'll paste the text into your own ActionScript code.

5. On the videoEquip timeline, create a new layer and rename it actions - text. Place this layer at the top of the layer stack. Select frame 1 of the new layer, and open the Actions panel (F9, Option+F9 on Mac). In the Script pane, type the following code:

    ctaDesc.text = ""; 

6. Between the pair of double quotes you typed in Step 5, paste (Ctrl+V or z+V) the copied text into the Script pane. Initially, the text should be displayed on one line, but you can choose Word Wrap in the options menu of the Actions panel to see all of the text, as shown in Figure 20-18.

7. Save the Flash document as main_500.fla, and test it (Ctrl+Enter or z+Enter). Click the Video Equipment navigation button, and try the TextArea component. If the text is not displaying or scrolling, go back to the authoring environment and double-check the ActionScript code on frame 1 of the actions text layer. Do not proceed with any steps until the TextArea component is functioning properly.

8. Now, you're ready to set up the text for the second item on the videoEquip timeline. Select frame 2 of the actions text layer, and press F7 to insert an empty keyframe. Add the same actions and text as shown in Steps 5 and 6, but this time, copy and paste the text from the item_2_formatted.txt file (located in the ch20/text folder of this book's CD-ROM).

9. Save your Flash document again, and test it (Ctrl+Enter or z+Enter). When you navigate to the Video Equipment section, you should be able to click the Next button to see the text for item 2.

10. Repeat Step 8 for frames 3, 4, 5, and 6 of the actions - text layer. When you are finished, you should have six separate action keyframes, one per item on the timeline.

11. Save your Flash document again, and test it (Ctrl+Enter or z+Enter). When you go to the Video Equipment section, you should be able to click the Next button to reach each video item's description field, and the field should be scrollable.

Figure 20-18: The Actions panel displaying the code to assign text to the TextArea component

The next step in real production would be to finesse the artwork and to add transitional effects between each video item. In the next section, we show you how to add a custom Fade component that we created for your use in this exercise.

Tip 

If you want the scroll bar's position to reset for each new item, add the following ActionScript code after you set the text property on each frame:

 ctaDesc.vPosition = 0; 

The vPosition property controls the vertical position of the scroller. Setting it to zero resets the position to the top. So, if the user scrolls to the bottom of one description and presses the Next button, the next item's description will read from the top. This extra line of code was added to the main_500.fla file found on the book's CD-ROM.

On the CD-ROM 

You can find the completed document, main_500.fla, in the ch20 folder of this book's CD-ROM.