- What are Components?
- OK, Which Components Do I Get with Flash MX 2004?
- Binding an Array to a Component in Flash MX 2004
- Controlling the Halo Theme for Flash MX 2004 Components
- Building an Application with Components
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Controlling the Halo Theme for Flash MX 2004 Components
Some of my favorite features in Flash MX 2004 are the enhanced components. If you are running Flash MX 2004 Professional, you now have 30 components.
You see that the new components look a lot spiffier than the generic functional components in Flash MX. The new design theme for the components is called Halo.
Well, let's get started. You need some components on the Stage. I am using the following:
|
Component |
Name |
|
ComboBox |
myCBX |
|
DateField |
myDataField |
|
Button |
myButton |
|
Button |
myBtn2 |
|
DataGrid |
myGrid |
Preview your movie when you have these components on the Stage. The ComboBox and DataGrid are not doing too much, so add the following ActionScript that will populate the two components with some data. You can use the array you created above:
// Array of States myStatesArray = new Array();
myStatesArray.push({data:"AL", label:"Alabama"});
myStatesArray.push({data:"AK", label:"Alaska"});
myStatesArray.push({data:"AZ", label:"Arizona"});
myStatesArray.push({data:"AR", label:"Arkansas"});
myStatesArray.push({data:"CA", label:"California"});
myStatesArray.push({data:"CO", label:"Colorado"});
myStatesArray.push({data:"DE", label:"Delaware"});
myStatesArray.push({data:"DC", label:"Dist. Of Columbia"});
myStatesArray.push({data:"FL", label:"Florida"});
myStatesArray.push({data:"GA", label:"Georgia"});
myStatesArray.push({data:"GU", label:"Guam"});
myStatesArray.push({data:"HI", label:"Hawaii"});
myStatesArray.push({data:"ID", label:"Idaho"});
myStatesArray.push({data:"IL", label:"Illinois"});
myStatesArray.push({data:"IN", label:"Indiana"});
myStatesArray.push({data:"IA", label:"Iowa"});
myStatesArray.push({data:"KS", label:"Kansas"});
myStatesArray.push({data:"KY", label:"Kentucky"});
myStatesArray.push({data:"LA", label:"Louisiana"});
myStatesArray.push({data:"ME", label:"Maine"});
myStatesArray.push({data:"MD", label:"Maryland"});
myStatesArray.push({data:"MA", label:"Massachusetts"});
myStatesArray.push({data:"MI", label:"Michigan"});
myStatesArray.push({data:"MN", label:"Minnesota"});
myStatesArray.push({data:"MS", label:"Mississippi"});
myStatesArray.push({data:"MO", label:"Missouri"});
myStatesArray.push({data:"MT", label:"Montana"});
myStatesArray.push({data:"NE", label:"Nebraska"});
myStatesArray.push({data:"NV", label:"Nevada"});
myStatesArray.push({data:"NH", label:"New Hampshire"});
myStatesArray.push({data:"NJ", label:"New Jersey"});
myStatesArray.push({data:"NM", label:"New Mexico"});
myStatesArray.push({data:"NY", label:"New York"});
myStatesArray.push({data:"NC", label:"North Carolina"});
myStatesArray.push({data:"ND", label:"North Dakota"});
myStatesArray.push({data:"OH", label:"Ohio"});
myStatesArray.push({data:"OK", label:"Oklahoma"});
myStatesArray.push({data:"OR", label:"Oregon"});
myStatesArray.push({data:"PA", label:"Pennsylvania"});
myStatesArray.push({data:"RI", label:"Rhode Island"});
myStatesArray.push({data:"SC", label:"South Carolina"});
myStatesArray.push({data:"SD", label:"South Dakota"});
myStatesArray.push({data:"TN", label:"Tennessee"});
myStatesArray.push({data:"TX", label:"Texas"});
myStatesArray.push({data:"UT", label:"Utah"});
myStatesArray.push({data:"VT", label:"Vermont"});
myStatesArray.push({data:"VI", label:"Virgin Islands"});
myStatesArray.push({data:"WA", label:"Washington"});
myStatesArray.push({data:"WV", label:"West Virginia"});
myStatesArray.push({data:"WI", label:"Wisconsin"});
myStatesArray.push({data:"WY", label:"Wyoming"});
// Binding
myCBX.dataProvider = myStatesArray;
myGrid.dataProvider = myStatesArray;
Now preview.
OK, you can see content in the fields. What if you don't like the default color background of the components?
There are two ways you can change the color and style formats for a component. You can use a new theme or programmatically modify the halo theme with ActionScript. Themes are new to Flash MX 2004. The default theme is halo.
To give you an idea of how this works, select Frame 1, open the Actions Panel, and add the following line of ActionScript:
_global.style.setStyle("themeColor", "haloGreen");
Now preview your movie. You see that the animation and transition color scheme are now changed to green. To do this, you use the Style Class library. The setStyle method applies a style formatting to a style attribute within the halo theme.
For instance, you can add the following ActionScript to apply additional formatting:
_global.style.setStyle("fontSize", 12); _global.style.setStyle("fontFamily", "_sans");
Preview your movie. You see that the new styles have been applied.
Here, I have been using the _global object to apply styles universally to every object. You can be more specific. Each component can have styles applied individually. All you need to do is call the component and set a style.
Earlier, you named all the components on the Stage. Now, add the following ActionScript to see the individual components change styles:
myCBX.setStyle("themeColor", "haloOrange"); myDataField.setStyle("themeColor",
"haloBlue"); myButton.setStyle("themeColor", "haloGreen"); mybtn2.setStyle("color",
"0xFF00FF"); mybtn2.setStyle("themeColor", "0xFF00FF");
I've have only just touched on the number of styles you can apply to a component. Here is the complete list:
|
Style |
Description |
|
backgroundColor |
The background of a component. This is the only color style that doesn't inherit its value. The default value is transparent. |
|
borderColor |
The black section of a three-dimensional border or the color section of a two-dimensional border. The default value is 0x000000 (black). |
|
borderStyle |
The component border: either none, inset, outset, or solid. This style does not inherit its value. The default value is solid. |
|
buttonColor |
The face of a button and a section of the three-dimensional border. The default value is 0xEFEEEF (light gray). |
|
color |
The text of a component label. The default value is 0x000000 (black). |
|
disabledColor |
The disabled color for text. The default color is 0x848384 (dark gray). |
|
fontFamily |
The font name for text. The default value is _sans. |
|
fontSize |
The point size for the font. The default value is 10. |
|
fontStyle |
The font style: either normal or italic. The default value is normal. |
|
fontWeight |
The font weight: either normal or bold. The default value is normal. |
|
highlightColor |
A section of the three-dimensional border. The default value is 0xFFFFFF (white). |
|
marginLeft |
A number indicating the left margin for text. The default value is 0. |
|
marginRight |
A number indicating the right margin for text. The default value is 0. |
|
scrollTrackColor |
The scroll track for a scroll bar. The default value is 0xEFEEEF (light gray). |
|
shadowColor |
A section of the three-dimensional border. The default value is 0x848384 (dark gray). |
|
symbolBackgroundColor |
The background color of check boxes and radio buttons. The default value is 0xFFFFFF (white). |
|
symbolBackgroundDisabledColor |
The background color of check boxes and radio buttons when disabled. The default value is 0xEFEEEF (light gray). |
|
symbolBackgroundPressedColor |
The background color of check boxes and radio buttons when pressed. The default value is 0xFFFFFF (white). |
|
symbolColor |
The check mark of a check box or the dot of a radio button. The default value is 0x000000 (black). |
|
symbolDisabledColor |
The disabled check mark or radio button dot color. The default value is 0x848384 (dark gray). |
|
textAlign |
The text alignment: either left, right, or center. The default value is left. |
|
textDecoration |
The text decoration: either none or underline. The default value is none. |
|
textIndent |
A number indicating the text indent. The default value is 0. |
As you might suspect, you can dynamically change styles on the fly with ActionScript. You have already added two buttons to the Stage, so let's go ahead and add a listener that will react when the buttons are selected.
Add the following ActionScript:
myListener = new Object(); myListener.click = function (evt){
myGrid.setStyle("themeColor", "haloBlue"); } myListener2 = new
Object(); myListener2.click = function (evt){
myGrid.setStyle("themeColor", "haloOrange"); }
myButton.addEventListener("click", myListener);
mybtn2.addEventListener("click", myListener2);
Selecting the buttons now dynamically changes the style of the grid. The only caveat to this is that you can't dynamically change _global styles.
As you can see, the halo theme has a lot of styles you can control and manipulate. This can give you a range for creating applications. As you become more confident with the tool, you can think about building and constructing your own theme outside of the halo theme to build and design your own skins for Flash.