Using styles with the RectBorder class

You can set style properties to change the appearance of a RectBorder instance. A RectBorder instance uses the following styles:

The styles available on a particular RectBorder instance depend on the theme in use and the border style set on the component. The following interactive demonstration shows the relationship between theme, border style, and available color style properties.

The four special Halo styles--default, alert, dropDown, and menuBorder--have some lines whose colors cannot be set through styles. You can modify these colors only by creating a custom theme and modifying the appropriate ActionScript within the custom RectBorder implementation.

To set a border style using setStyle:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Drag a TextArea component to the Stage and give it the instance name my_ta.
  3. In the first frame of the main timeline, add the following ActionScript to the Actions panel:
    my_ta.setStyle("borderStyle", "alert");
    

    NOTE

    You can set the borderStyle to "alert" because you are using the default theme (Halo). If you are using a different theme, then the four "special" Halo styles, including "alert", may not be available.

  4. Select Control > Test Movie to test the SWF file.

To set multiple border styles as parameters of the createClassObject method:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. In the first frame of the main timeline, add the following ActionScript to the Actions panel:
    createClassObject(mx.controls.TextArea, "my_ta", 1, {borderStyle: "menuBorder", themeColor: "0x990000"});
    

    For more information, see UIObject.createClassObject(). Or, if you want to set multiple styles and apply them to more than one component instance, you can establish a new style declaration containing the style settings, and then attach that style declaration to the component instances (see Setting custom styles for groups of components in Using ActionScript 2.0 Components).

  3. Select Control > Test Movie to test the SWF file.

To set a border style using the Sample theme:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Drag a Button component to the Stage, and give it the instance name my_btn.

    You can also create the instance by using ActionScript, as follows (be sure to drag a Button component to the library first):

    createClassObject(mx.controls.Button, "my_btn", 1);
    
  3. Select File > Import > Open External Library.
  4. Open the SampleTheme.fla file, located in:
    • Windows: \Program Files\Adobe\Flash CS3\ language\Configuration\ComponentFLA\
    • Macintosh: HD/Applications/Adobe Flash CS3/Configuration/ComponentFLA/
  5. In the SampleTheme.fla library, find the Button assets movie clip in Flash UI Components > Themes > MMDefault > Button Assets > Button Skin and drag it to the library of your current document.
  6. In the first frame of the main timeline, add the following ActionScript to the Actions panel:
    my_btn.setStyle("buttonColor", "0xFFFFFF");
    my_btn.setStyle("borderStyle", "solid");
    my_btn.setStyle("borderColor", "none");
    

    NOTE

    If you plan to set multiple styles and need to improve the performance of the component at runtime, you can set a custom style declaration containing those styles and then attach the custom style declaration to the component instance (see Setting custom styles for groups of components in Using ActionScript 2.0 Components).

    Or you can append these settings to createClassObject, as follows:

    createClassObject(mx.controls.Button, "my_btn", 1, {buttonColor: "0xFFFFFF", borderStyle: "solid", borderColor: "none"});
    
  7. Select Control > Test Movie to test the SWF file.

    Notice that even with a "borderColor" of "none", the button has a gray border. In this case, "none" does not mean transparent, it means a neutral gray.