Global Style Formats

You can use ActionScript to change the look of your components. Using ActionScript to change properties is often much easier than doing so manually or making your own graphics. Luckily, you can change attributes of components on an instance or global level — with the help of ActionScript. Most of these changes will be limited to colors, alignment, and text.

In Flash 8, you can control the look and feel of all components in your Flash movie by using the _global.style object.

1. Create a new layer, and rename it to global styles. Place this layer at the top of the layer stack.

2. On frame 1 of the global styles layer, open the Actions panel (F9), and add the code shown in Listing 33-4.

   Listing 33-4: An Example of Using the _global.style Object

   _global.style.setStyle("color", 0x336699);
   _global.style.setStyle("themeColor", "haloBlue")
   _global.style.setStyle("fontSize", 10);
   _global.style.setStyle("fontFamily", "Verdana");
   _global.style.setStyle("backgroundColor", 0xE2C7C7);
   

   Here, the setStyle() method is used to apply various style changes, from color to font face.

3. Save the Flash document as components_101.fla, and test it. All of the components will change to the new style settings.

Changing Styles for a Component Class

You can also create a custom style for each type of component in your Flash movie. For example, if you want all RadioButton components to use a specific font, you can write ActionScript code to do just that, without having to set a global style or change the style on each individual instance.

1. Open the components_101.fla file created in the previous section. Resave this document as components_102.fla.

2. Select frame 1of the global styles layer, and open the Actions panel. Add the code shown in Listing 33-5 to the existing code.

   Listing 33-5: Changing the Style of a Specific Component Class

   // Component class styling
   var styleRadio = _global.styles.RadioButton = new 
       mx.styles.CSSStyleDeclaration();
   styleRadio.setStyle("fontFamily", "Arial Black");
   

   This code creates a new CSSStyleDeclaration object named _global.styles. RadioButton, which is also the value for a variable named styleRadio. To create a new style object for any particular class of component, use this syntax format: _global.styles.ComponentClass, where ComponentClass is the class name of the component you're controlling with the style. Once you've established a new CSSStyleDeclaration object, you can use the setStyle() method with the same property names you can use with the _global.style object discussed in the previous section.

Changing Styles for Individual Instances

It is relatively easy to change the font color and face on individual component instances now that you understand style formats. You can accomplish this task by using single lines of ActionScript. Because this code uses fonts in the system, it is important to remember that a default system font will be displayed if your end-user does not have the particular font installed on his or her system.

1. Create a new Flash document, and save it as component_style.fla.

2. Rename Layer 1 to cbt. On frame 1 of this layer, add an instance of the Button component from the Components panel. In the Property inspector, name this instance cbt.

3. Make a new layer, and name it actions. On frame 1 of this layer, add the following lines of code in the Actions panel:

   var cbt:mx.controls.Button;
   cbt.setStyle("fontFamily", "Arial");
   cbt.setStyle("themeColor", "haloOrange");
   cbt.setStyle("fontWeight", "bold");
   cbt.setStyle("color", 0x333333);
   

   This will set your button font face as Arial, and the second line of ActionScript tells it to use the orange Halo theme. Line 3 sets the font style to bold for the label text, and line 4 sets the color of label text to dark gray.

   Tip

   There are three built-in halo themes: haloGreen, haloBlue, and haloOrange. The themes, by and large, control the outline color used by components.

4. Save the Flash document, and test it. The Button component instance should now have a different appearance.