in black and white
Main menu
Share a book About us Home
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics

Flash MX action script bible - Reinhardt R.

Reinhardt R. Flash MX action script bible - Wiley & sons , 2004. - 987 p.
ISBN: 0-7645-4354-7
Download (direct link): macractionscriptbiblefeb2004.pdf
Previous << 1 .. 336 337 338 339 340 341 < 342 > 343 344 345 346 347 348 .. 427 >> Next

_global.styles.Button.color = 0xFF0000;
However, nested items within the component instance will not inherit the styles this way, unless you use setStyle(). This won’t show up in a Button component, necessarily, but you’ll see it with other types of components such as, for example, ComboBox instances. The ComboBox drop-down is a nested List component. If you assign the color style value for a ComboBox style class using property syntax, you’ll see that the items in the drop-down do not inherit the value. But if you use setStyle(), the items are colored appropriately.
The technique of creating a class style object will work with almost all of the component classes. However, the following classes will not allow you to set a class style object: List, DataGrid, Tree, and Menu. With some of those classes, setting a class style object simply has no effect. With others, setting a class style object actually breaks all instances of the component. Instead, you can set a class style for all the aforementioned classes (as a group) by assigning style values to the _global.styles.ScrollSelectList style object. The ScrollSelectList style object already exists, and so you should not reinstantiate it. Instead, just assign the new values to the appropriate styles. For example:
_global.styles.ScrollSelectList.setStyle("color", "red");
The preceding code causes the text color to change to red for all List, DataGrid, Tree, and Menu i nstances.
Setting Global Styles
You can apply styles globally such that all component instances will apply the same styles (unless overridden by class style objects, style objects applied to the instances, or styles applied to the instances directly). The global style object is already instantiated for you, and it is accessible as
Notice that the global style object is named in the singular form, style, and not the plural form, styles. The _global.styles object is a container for class and custom style objects as detailed in the preceding sections. The global style object,, is different, so be careful to make sure you are using the correct object references because the difference of a single “s" will cause unexpected results.
Chapter 29 ♦ UI Component Style and Focus Management 739
The object is a CSSStyleDeclaration instance on which you can set the style properties just like any other style object with which you’ve worked thus far. For example:"color", "red");
Setting the global color style to red causes all components to display with red text. Applying style settings to the global style object is a good way to create a uniform, styled appearance in your application.
Practicing Applying Styles
In this exercise, you create a simple form using a few of the standard UI components. You then use ActionScript to apply style changes to the components — some global, some as a class style object, some as a custom style object applied to a component instance, and one directly on a component instance.
1. Open a new Flash document and save it as applyingStyles001.fla.
2. Open the Components panel, and drag one instance each of the following components onto the stage: ComboBox, List, and Button. Name these instances ccbRegion, clProducts, and cbtSubmit, respectively.
3. Drag two instances of the Label component onto the stage, naming them clblRegion and clblProducts.
4. Arrange the instances on the stage as shown in Figure 29-1, with clblRegion matching up with ccbRegion, and clblProducts matching up with clProducts.
Figure 29-1: The arrangement of the component instances on the stage
5. Rename the default layer to Form, and add a new layer named Actions.
6. Add the following ActionScript code to the first frame of the Actions layer:
import mx.styles.CSSStyleDeclaration; import mx.transitions.easing.Back;"color", 0xED5A0C);"themeColor", "haloOrange");"textSelectedColor", 0x9C3C07);"textRollOverColor", 0xC54A0A); _global.styles.Label = new CSSStyleDeclaration(); _global.styles.Label.setStyle("color", "red"); _global.styles.openStyle = new CSSStyleDeclaration();
740 Part VIII ♦ Using Components
_global.styles.openStyle.setStyle("openEasing", Back.easelnOut); _global.styles.openStyle.setStyle("openDuration", 2000); ccbRegion.setStyle("styleName", "openStyle"); cbtSubmit.setStyle("themeColor", OxFDFCCA); ccbRegion.dataProvider = [{label: "North", data:1}, ^
{label:"South", data: 2}, {label:"East", data: 3}, ^
{label:"West", data: 4}];v
clProducts.dataProvider = [{label: "Flash", data: "f"}, ^
{label: "Dreamweaver", data: "dw"}, {label: "Fireworks", ^ data: "fw"}, {label: "ColdFusion", data: "cf"}]; clblRegion.text = "Region:"; clblProducts.text = "Products:"; cbtSubmit.label = "Submit";
7. Test the movie. The form should look something like Figure 29-2. When you open and close the ComboBox, you should notice that it takes two seconds and that it does a slight bounce.
Previous << 1 .. 336 337 338 339 340 341 < 342 > 343 344 345 346 347 348 .. 427 >> Next