What's covered

Scrolling text in Flash CS3 Professional

There are several ways to create scrolling text in Flash CS3 Professional:

  • Use the ActionScript 3.0 TextArea component included with Flash CS3 Professional. If the TextArea is set to editable, then as soon as enough lines are entered, the UIScrollbar component will automatically appear on the right side of the TextArea. Vertical scrolling can be enabled/disabled only by using the verticalScrollPolicy method of fl.controls.TextArea.

  • Make dynamic or input text fields scrollable by using menu commands or the text field handle (see Flash CS3 Professional Help).

  • Add a ScrollBar component to a text field to make it scroll. This is useful in cases where the overhead of the TextArea component isn't needed

To create a scrolling text field in Flash CS3 Professional, do the following:

  1. Using the Text tool, create an instance of an input text field on the Stage.
  2. In the Properties Panel, assign the instance the following properties:
    Text type: "Input text"
    Instance name: "scroller"
    Line type: "Multiline"

    Note: Depending on design it may be helpful to also select Show Borders Around Text. 

  3. Open the Components panel.
  4. In the Tools panel, verify that Snap To Objects is on.
  5. Drag the UIScrollbar component, dropping it to the left or right side of the text field instance. It should snap to the text field. UIScrollbar can also be created dynamically via ActionScript.
    Note: At this point notice that selecting the scrollbar, then the Parameters tab of the Properties inspector will show you that the snapping automatically sets the scrollTargetName property to the name of the text field. In Flash Player this is how the scrollbar controls the text field.

  6. Choose Control > Test Movie. Enter enough text to fill the text field and the scrollbar should become enabled.

 

Scrolling text in Flash 8

To create a scrolling TextArea component in Flash 8, do the following:

  1. Drag a TextArea component from the Components panel to the Stage.
  2. In the Property inspector, enter an instance name.
  3. In the Property inspector Parameter's tab, set Editable and Wordwrap to true.
  4. Test the movie. When enough lines are entered to fill the component, the scrollbar will automatically appear.

To make standard dynamic text fields scrolling using ActionScript in Flash 8, see Flash 8 Help.

Scrolling text in Flash MX 2004

Flash MX 2004 did not ship with a scroll bar component. The recommended solution for creating scrolling text in Flash MX 2004 is to use the TextArea component or to use ActionScript to scroll the content of a text field. The TextArea component is the preferred method because it includes scrollbars with an automatic show/hide feature.

To create a scrolling TextArea component, do the following:

  1. Drag a TextArea component from the Components panel to the Stage.
  2. In the Property inspector, enter an instance name.
  3. In the Property inspector, set parameters as you wish. However, leave the text parameter blank, the editable parameter set to true, and the password parameter set to false.
  4. Test the movie and try entering text into TextArea component. When you have entered enough text the scroll bar will automatically appear in the field.

To use ActionScript to scroll a text field, do the following:

  1. Select the Text tool and create a text field on the stage. Leave room on the stage for buttons that can be used to scroll the text up and down.
  2. In the Property inspector, select Input Text as the type of text field and Multiline as the line type. You may want to select the Show Border option so the text field will be visible when you test the application.
  3. In the Property inspector, enter the instance name my_txt for the text field.
  4. Drag two button components to the stage and enter an instance name button1, and button2 respectively.
  5. Place the following code on button1:
    on(click){ _root.my_txt.scroll ++; // This will scroll the text up 1 line }

  6. Place the following code on button2:
    on(click){ _root.my_txt.scroll--; // This will scroll the text down 1 line }

  7. Test the movie and enter text into the text field. Once there is enough text to scroll, you can use the buttons to scroll up and down.

Keywords: text field; scroll; maxscroll; scrollbar; textarea; tn_19237

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy