Changing Component Styles

 < Day Day Up > 

Components include code and graphics. However, you can change the styles that components use, such as the typeface or font weight. In addition, you can change the colors used in components. You can also create your own custom themes by editing every last graphic used in the components. The following sections show a little bit of code to apply text and color styles to all components used in your movie.

You can try any of these with the tasks from this hour. Or you can just drag a few components on the Stage and see the results. However, I suggest that you experiment by testing one example at a time so that you can see the impact of each script. You can type all these examples into the actions for Frame 1.

By the Way: Styles Only Work at Runtime

Note that you won't see any style changes until you test the movie.


Setting the Style of a Single Component Instance

You can affect a single instance by using this form:

 myInstance.setStyle("theStyle", value); 

You have to replace myInstance with the instance name of your component, replace "theStyle" with the supported style (found in the Help files), and replace value with an actual value. For example, if you had a RadioButton component instance named rb, you could use the following code to change the text color (style name "color") to red:

 rb.setStyle("color", 0xFF0000); 

By the Way: Hex Values

Notice that Flash uses the prefix 0x to signify that what follows is a hexadecimal (also called hex) value for color. You'll see the hex values for colors when you use any of Flash's color selection tools. However, those tools use # as the prefix for hex.


Setting the Style of One Component Type

You can affect all instances of a particular component by using this complex code:

 var myStyle = new mx.styles.CSSStyleDeclaration(); myStyle.color = 0x0000FF; _global.styles.CheckBox=myStyle; 

It's really only the second line where you can customize things. If you want to also affect another style, just insert a line like this:

 myStyle.fontFamily="Times New Roman"; 

To find what styles are supported, just search the Help file for "supported styles."

Setting the Style of All Components

The way you set a style for all instances of all components is shown here:

 _global.style.setStyle("theStyle", value); 

You can only change "theStyle" and value (to the style and value for the style you want to set). For example, the following code sets the color of all components' text to red:

 _global.style.setStyle("color", 0xFF0000); 

Using Themes

The topic of themes can become rather involved, but I want you to quickly notice that one style type is called themeColor. You can use any one of the following lines of code to change the overall theme color of your components:

 _global.style.setStyle("themeColor", "haloGreen"); _global.style.setStyle("themeColor", "haloOrange"); _global.style.setStyle("themeColor", "haloBlue"); _global.style.setStyle("themeColor", 0x00FF00); 

Naturally, you can apply the theme color to any single component type or instance by using the same basic syntax shown earlier this hour. Notice that the last line above uses a hex value, whereas the other three use one of the new preset halo colors.

     < Day Day Up > 


    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    Sams Teach Yourself Macromedia Flash 8 in 24 Hours
    ISBN: 0672327546
    EAN: 2147483647
    Year: 2006
    Pages: 235

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