Flash CS3 Documentation

Using ActionScript 2.0 Components > Customizing Components > Combining skinning and styles to customize a component

Combining skinning and styles to customize a component

In this section, you will customize a combo box component instance using styles, themes, and skinning settings. The procedures demonstrate how to combine skinning with style settings to create a unique presentation for a component.

Creating a component instance on the Stage

The first part of this exercise requires you to create a ComboBox instance for customizing.

To create the ComboBox instance:

1. Drag a ComboBox component to the Stage.
2. In the Properties panel, name the instance my_cb.
3. In the first frame of the main Timeline, add the following ActionScript (make sure you are adding it to the frame and not the component, itself; the Actions panel should say "Actions - Frame" in the title bar):

   my_cb.addItem({data:1, label:"One"});
   my_cb.addItem({data:2, label:"Two"});
   

4. Select Control > Test Movie to see the combo box with the default style and skinning from the Halo theme.

Creating the new style declaration

Now, you need to create a new style declaration and assign styles to the style declaration. After you have all the styles you want in the style declaration, you can assign the new style name to the combo box instance.

To create a new style declaration and give it a name:

1. In the first frame of the main Timeline, add the following line at the beginning of your ActionScript (as a coding convention, you should place all import statements at the beginning of your ActionScript):

   import mx.styles.CSSStyleDeclaration;
   

2. On the next line, name the new style declaration and add it to the global style definitions:

   var new_style:Object = new CSSStyleDeclaration();
   _global.styles.myStyle = new_style; 
   

   After you assign a new style declaration to the _global style sheet, you can attach individual style settings to the new_style style declaration. For more information about creating a style sheet for groups for components, instead of style definitions for a single instance, see Setting custom styles for groups of components).

3. Attach some style settings to the new_style style declaration. The following style settings include style definitions available to the ComboBox component (see Using styles with the ComboBox component in the ActionScript 2.0 Components Language Reference for more a complete list) as well as styles from the RectBorder class, since the ComboBox component uses the RectBorder class:

   new_style.setStyle("textAlign", "right");
   new_style.setStyle("selectionColor", "white");
   new_style.setStyle("useRollOver", false);
   // borderStyle from RectBorder class
   new_style.setStyle("borderStyle", "none");
   

Assigning style definitions to the combo box

At this point, you have a style declaration containing a variety of styles, but you need to explicitly assign the style name to the component instance. You can assign this new style declaration to any component instance within your document in the following manner. Add the following line after the addItem() statements for my_cb (as a coding convention, you should keep all your combo box construction statements together):

my_cb.setStyle("styleName", "myStyle");

The ActionScript code attached to the first frame of the main Timeline should be as follows:

import mx.styles.CSSStyleDeclaration;

var new_style:Object = new CSSStyleDeclaration();
_global.styles.myStyle = new_style; 

new_style.setStyle("textAlign", "right");
new_style.setStyle("selectionColor", "white");
new_style.setStyle("useRollOver", false);
// borderStyle from RectBorder class
new_style.setStyle("borderStyle", "none");

my_cb.addItem({data:1, label:"One"});
my_cb.addItem({data:2, label:"Two"});
my_cb.setStyle("styleName", "myStyle");

Select Control > Test Movie to see the styled combo box:

Changing the combo box theme

Every user interface component lists the style properties you can set for that component (for example, all the style properties you can set for a ComboBox component are listed in Customizing the ComboBox component in the ActionScript 2.0 Components Language Reference). Within the table of style properties, a column titled "Theme" shows which installed theme supports each style property. Not all the style properties are supported by all the installed themes. The default theme for all user interface components is the Halo theme. When you change the theme to the Sample theme, you can use a different set of style properties (some properties may no longer be available if they are listed as Halo only).

To change the theme for the styled component:

1. Select File > Import > Open External Library, and select SampleTheme.fla to open the Sample theme library in Flash.

   This file is located in the application-level configuration folder:

   • In Windows: C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\ComponentFLA\
   • On the Macintosh: HD/Applications/Adobe Flash CS3/Configuration/ComponentFLA/
2. Drag the main SampleTheme (Flash UI Components 2 > SampleTheme) movie clip from the SampleTheme library to your document's library.

   The ComboBox component is a combination of several components and classes, and requires assets from those other components and assets, including the Border and ScrollBar assets. The simplest way to ensure that you have all the assets from a theme that you need is to drag all the theme's assets to your library.

3. Select Control > Test Movie to see the styled combo box:

   
   
   

Editing the combo box skin assets

To edit the appearance of a component, edit the skins that comprise the component, graphically. To edit the skins, you open the component's graphic assets from within the current theme, and edit the symbols for that component. Adobe recommends this approach because it doesn't remove or add symbols that other components might need; this approach edits the appearance of an existing component skin symbol.

When you edit a component skin symbol:

• All instances of that component will use new skins (but not custom styles unless you explicitly attach the styles to the instances), and some components dependent on that component will use the new skins.
• If you assign a new theme after you've edited your component skins, make sure you don't overwrite the existing "edited" skins (a dialog box asks if you want to overwrite the skins and gives you an opportunity to stop Flash from overwriting the skins).

In this section, you will continue to use the combo box from the previous section (see Changing the combo box theme). The following steps change the appearance of the down arrow that opens the combo box menu from an arrow to a circle.

To edit the combo box down arrow symbol:

1. In your document's library, open the ComboBox assets to see the movie clips that are the skins for the button that opens and closes the combo box instance at runtime. Specifically, open the Themes > MMDefault > ComboBox Assets > States folder in your document's library.

   The States folder contains four movie clips: ComboDownArrowDisabled, ComboDownArrowDown, ComboDownArrowOver, and ComboDownArrowUp. All four of these symbols are made up of other symbols. And all four use the same symbol for the down arrow (triangle), called SymDownArrow.

2. Double-click the ComboDownArrowDown symbol to edit it.

   You may need to zoom in, up to 800%, to see the details for the button.

3. Double-click the down arrow (black triangle) to edit it.

   NOTE

   Make sure you have the symbol SymDownArrow selected, so you are deleting only the shape inside the movie clip and not the movie clip symbol, itself.

   
   
   

4. Delete the selected down arrow (the black triangle shape, not the whole movie clip) on the Stage.
5. While still editing SymDownArrow, draw a circle in the place where the down arrow had been.

   To make the change more noticeable, consider drawing a circle that is a bright color, like blue, approximately 4 pixels x 4 pixels, and with an x coordinate of 0 and a y coordinate of -1 so it is centered.

   
   
   

6. Select Control > Test Movie to see the skinned combo box:

   
   
   

   In your document's library, if you select ComboDownArrowOver and ComboDownArrowUp, you'll see that they also have the blue circle instead of the black triangle, because they also use SymDownArrow for the down arrow symbol.

Flash CS3