Modifying Components


We have already discussed how to alter the color, alpha, or brightness of your component, allowing you to match it to the content on your production. It is a bit more complicated, but not difficult, to change more than just the symbol's effects in the Property inspector. There are three ways in which you can change the look and feel of Flash 8 components:

  • Use the Styles API

  • Apply a theme

  • Modify or replace a component's skins

For the purposes of this introduction to components, you'll learn how to change the look of components using styles.

Cross-Reference 

For more information on themes and changing components' skins, search the Flash 8 Help panel with the terms "customizing components."

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.

On the CD-ROM 

Open the components_100.fla document from the ch33 folder of this book's CD-ROM to test this new feature.

  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

    image from book
     _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); 
    image from book

    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.

On the CD-ROM 

You can find the components_101.fla document in the ch33 folder of this book's CD-ROM.

Cross-Reference 

Search the Flash 8 Help panel for "supported styles" to see the various style properties that can be set and changed with ActionScript.

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

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

    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.

Cross-Reference 

Using custom font faces and embedded fonts with buttons is covered in the last section, "Using Embedded Fonts with Components."

  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.

On the CD-ROM 

In the ch33 folder of this book's CD-ROM, you can find the completed file, component_style.fla.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net