Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Applying the Scrollbar

In previous versions of Flash, you had to program a scrollbar manually if you wanted a scrolling text field. Flash MX makes that enhancement much easier. You'll walk through the steps for using the built-in scrollbar component and customize its color scheme to match the movie.

The scrollbar is a specialized movie clip that is associated with an instance of a text field. For the association to work, the text field must have an instance name. Other than this, all you have to do is drag an instance of the scrollbar from the Components panel onto the text field, and you've got a scrolling text box.

  1. In card03.fla that you just created, select Window > Components to open the Components panel if it is not already open. Unlock the message layer and select the text field.

  2. In the Property inspector, assign it an instance name of mcMessage and a Var value of message.

  3. As previously mentioned, the text field must have an instance name for a scrollbar to be associated with it. Additionally, you need to give it a variable name

    Figure 10.3. Add a scrollbar to your text field by simply giving the text field an instance name (in the Property inspector) and then dragging the scrollbar component into the text field from the Components panel.(message) so that a value can be assigned to the message in frame 1 before the text field itself even exists.

  4. With the message layer still selected, drag the scrollbar component from the Components panel and drop it on the text field.

  5. It is easiest if you don't attempt to line up the edge of the component with the edge of the field. The two will align automatically if you drop the component in the middle of the target text field.

    Check the Property inspector. You will see that the scrollbar component has a Target TextField property that has been set to mcMessage. The component and text field have been associated.

  6. In the Property inspector, enter mcScroll as the instance name of the scrollbar.

  7. Click frame 2 of the actions layer and open the Actions panel if it is not already open.

  8. NOTE

    Frame 2 contains four sections of code, each beginning with a comment line:

    • The first section checks to see if the card was opened from outside the movie (that is, by the recipient) by looking at the fromBrowser variable. If so, the Close button is not needed and is set to invisible.

    • The second section sets the text property of the text field to the value of the variable message. This is necessary to make the scrollbar work with the text field.

    • The third section creates an object that will define the colors used to customize the scrollbar. The line that defines the colors is commented out for now; you'll be setting that later in this section.

    • The final section of code in frame 2 hides the scrollbar if scrolling is not needed with this code. The maxscroll property of a text field is equal to the number of lines in the field when the whole message is placed in it, minus the maximum number of lines the field can display at its given height, plus 1. It can only be accessed in the frame following the one in which the value of the field is set. Here you use it to "turn off" the scrollbar when it is not needed by making it invisible.

    Now let's test the scrollbar. Frame 1 of the actions layer has the default message text that will be used in the text field. First you should modify the text so that it is long enough to cause the text field to scroll.

  9. Select frame 1 of the actions layer in card03.fla and open the Actions panel. Locate this line:

  10. message = "Jack, \tThanks so much to you and Jane for looking after the boys for us last weekend.
    Hope you have a great time camping! \t- Al
  11. Add another sentence in the middle of the message variable and test the movie.

  12. A gray scrollbar should appear and should allow scrolling through the message.

  13. Remove the extra sentence from the text field assignment and retest the movie.

  14. The scrollbar should no longer be visible.

The scrollbar will blend in with your greeting card even better if you customize its colors. You can use one of the scrollbar's scriptable methods, setStyleProperty(), to do this.

  • + Share This
  • 🔖 Save To Your Account