|< 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.
Setting the Style of a Single Component Instance
You can affect a single instance by using this form:
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:
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:
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:
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 >|