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

Home > Articles > Web Design & Development > Adobe Flash

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

This chapter is from the book

Customizing the Scrollbar

In this example, you'll create a scrollColors object whose properties define the colors to be used. That way, you can keep all of the scrollbar colors in one place (in the scrollColors object), and your assignment statements can remain the same in every card.

To choose your scrollbar colors:

  1. Open the Color Mixer (Window > Color Mixer).

  2. Click on a dark green area of the card using the Eyedropper tool. The Color Mixer will change to reflect your choice, showing the color, its hexdecimal value, and shades of color that match it.

  3. Record the hexadecimal value of the color you selected in the last step. You'll use it to set the darkest property of the scrollColors object, which is in frame 2 of the actions layer. Replace the pound sign with 0x (as in 0x9f9600).

  4. scrollColors = {lightest:0xa9a700, medium:0xb4ac00,
    darker:0x9f9600, darkest:0x8b7600}; trace(scrollColors.lightest.toString(16)); // test mcScroll.setStyleProperty("arrow", scrollColors.darker); mcScroll.setStyleProperty("face", scrollColors.lightest); mcScroll.setStyleProperty("shadow", scrollColors.darker); mcScroll.setStyleProperty("darkshadow", scrollColors.darkest); mcScroll.setStyleProperty("highlight", scrollColors.lightest); mcScroll.setStyleProperty("highlight3d", scrollColors.medium); mcScroll.setStyleProperty("scrollTrack", scrollColors.darker);

    Code Listing 3
    Define the scrollColors object to contain values that will be applied to the style properties of the scrollbar.

  5. To assign the three remaining colors for darker, medium, and lightest, either use the Eyedropper tool again and repeat steps 1 through 3, or click on the sliding color bar in the Color Mixer and record the hexadecimal values you select.

  6. Figure 10.4. Macromedia Flash's built-in components can be assigned custom colors either individually or globally. Using the Fill tool's eyedropper with the Color Mixer enables you to grab the hex value of any color easily and to find a range of related values (shown in the far right of the Color Mixer).

  7. Click frame 2 of the actions layer and open the Actions panel if it is not already open. Remove the comment marks (//) from the beginning of line 9 (the line in which scrollColors are assigned). Substitute the values you recorded in the previous step into this assignment statement.

After you've filled all of the scrollColors properties with your selected values, test the card to make sure it works. Save it and, if you like, compare it with card03final.fla on the accompanying CD-ROM. The files should be the same, except for the colors you selected for the scrollColors object.

  • + Share This
  • 🔖 Save To Your Account