通过组合外观与样式设置来自定义组件

在此部分中，您将使用样式、主题和外观设置来自定义一个组合框组件实例。该过程演示如何将外观设置与样式设置组合在一起，以创建独特的组件表现形式。

在舞台上创建组件实例

此练习的第一部分要求您创建一个用于自定义的 ComboBox 实例。

创建 ComboBox 实例：

将 ComboBox 组件拖动到舞台上。
在"属性"面板中，将该实例命名为 my_cb。
在主时间轴的第一帧中，添加以下 ActionScript（请确保将其添加到该帧，而不是组件本身；"动作"面板应在标题栏中显示"动作 - 帧"）：
```
my_cb.addItem({data:1, label:"One"});
my_cb.addItem({data:2, label:"Two"});
```
选择"控制">"测试影片"来查看使用"光晕"主题中的默认样式和外观设置的组合框。

创建新的样式声明

现在，您需要创建新的样式声明，然后为其指定各个样式。在样式声明中指定了所有想要的样式后，您就可以将新样式名称指定给组合框实例。

创建新的样式声明，并命名它：

在主时间轴的第一帧中，在您的 ActionScript 的开头添加以下一行代码（将所有 import 语句放置在 ActionScript 的开头是一种编码规范，您应遵守它）：
```
import mx.styles.CSSStyleDeclaration;
```
在下一行中，命名该新样式声明，然后将其添加到全局样式声明：
```
var new_style:Object = new CSSStyleDeclaration();
_global.styles.myStyle = new_style; 
```
将新样式声明指定给 _global 样式表后，您可以将各个样式设置附加到 new_style 样式声明。有关创建组件组的样式表（而不是单个实例的样式定义）的详细信息，请参阅为成组的组件设置自定义样式。
将一些样式设置附加到 new_style 样式声明。以下样式设置包括可用于 ComboBox 组件的样式定义（请参阅《ActionScript 2.0 组件语言参考》中的"对 ComboBox 组件使用样式"以获得更完整的列表），以及 RectBorder 类中的样式，因为 ComboBox 组件使用 RectBorder 类：
```
new_style.setStyle("textAlign", "right");
new_style.setStyle("selectionColor", "white");
new_style.setStyle("useRollOver", false);
// RectBorder 类中的 borderStyle
new_style.setStyle("borderStyle", "none");
```

将样式定义指定给组合框

此时，您有了一个包含多种样式的样式声明，但是您需要将样式名称显式指定给组件实例。您可以用以下方法将此新样式声明指定给文档中的任何组件实例。在 my_cb 的 addItem() 语句后添加下行代码（将组合框构造语句放在一起是一种编码规范，您应遵守它）：

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

附加到主时间轴第一帧的 ActionScript 代码应如下：

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);
// RectBorder 类中的 borderStyle
new_style.setStyle("borderStyle", "none");

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

选择"控制">"测试影片"查看应用样式后的组合框：

应用样式后的组合框

更改组合框主题

每个用户界面组件都列出了您可为其设置的样式属性（例如，可为 ComboBox 组件设置的所有样式属性都在《ActionScript 2.0 组件语言参考》的"自定义 ComboBox 组件"中列出）。在样式属性表中，标题为"主题"的列显示已安装的主题分别都支持哪些样式属性。不是所有的已安装主题都支持所有的样式属性。所有用户界面组件的默认主题都为"光晕"主题。将主题更改为"范例"主题时，您可以使用其它样式属性集（列为"仅光晕"的属性将不再可用）。

更改已应用样式的组件的主题：

选择"文件">"导入">"打开外部库"，然后选择 SampleTheme.fla 在 Flash 中打开"范例"主题库。
此文件位于应用程序级别的配置文件夹中：
- 在 Windows 中：C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\ComponentFLA\
- 在 Macintosh 中：HD/Applications/Adobe Flash CS3/Configuration/ComponentFLA/
将主影片剪辑 SampleTheme（"Flash UI Components 2">"SampleTheme"）从 SampleTheme 库拖到您的文档库中。
ComboBox 组件是一些组件和类的组合，因此需要其它此类组件和资源中的资源，其中包括 Border 和 ScrollBar 资源。确保拥有所需主题中的所有资源的最简单方法是将该主题的所有资源都拖到库中。
选择"控制">"测试影片"查看应用样式后的组合框：

编辑组合框外观资源

要编辑组件的外观，请以绘图方式编辑构成该组件的外观。要编辑外观，请打开当前主题中组件的图形资源，然后编辑该组件的元件。Adobe 推荐使用此方法，因为此方法不会删除或添加其它组件可能需要的元件；此方法可以编辑现有组件外观元件的外观。

注意

可以但不推荐编辑组件的源类文件，它将使该组件将具有不同名称的元件用作外观，您可以以编程方式更改外观元件中的 ActionScript（有关自定义的 ActionScript 和外观元件的示例，请参阅《ActionScript 2.0 组件语言参考》中的"自定义 Accordion 组件"）。但是，由于一些组件（包括 ComboBox 组件）与其它组件共享资源，因此编辑源文件或更改外观元件名称可能产生意外的结果。

编辑组件外观元件时：

该组件的所有实例都将使用新的外观（但不是自定义的样式，除非将样式显式附加到实例），并且一些依赖于该组件的组件也将使用新的外观。
如果在编辑组件外观后指定新主题，请确保不要覆盖现有已编辑的外观（有一个对话框会问您是否要覆盖外观，它使您可以阻止 Flash 覆盖外观）。

在此部分中，您将继续使用前一部分中的组合框（请参阅更改组合框主题）。以下步骤将打开组合框菜单的向下箭头的外观从箭头更改为圆。

编辑组合框的向下箭头元件：

在文档库中，打开 ComboBox 资源，查看在运行时打开和关闭组合框实例的按钮的外观影片剪辑。具体地说，就是在文档库中打开"Themes">"MMDefault">"ComboBox Assets">"States"文件夹。
"States"文件夹包含四个影片剪辑：ComboDownArrowDisabled、ComboDownArrowDown、ComboDownArrowOver 和 ComboDownArrowUp。这四个元件都是由其它元件组成的。并且这四个元件都将称为 SymDownArrow 的同一元件用于向下箭头（三角形）。
双击 ComboDownArrowDown 元件编辑它。
您可能需要进行放大（最大至 800%）以便查看该按钮的细节。
双击向下箭头（黑色三角形）编辑它。

注意

请确保选中元件 SymDownArrow，以便只删除影片剪辑中的该形状，而不是影片剪辑元件本身。
删除舞台上的所选向下箭头（黑色三角形形状，而不是整个影片剪辑）。
继续编辑 SymDownArrow，在向下箭头曾经所在的位置绘制一个圆。
为了使更改更明显一些，考虑绘制亮色（如蓝色）的圆，大小大约为 4 x 4 像素，x 坐标为 0，y 坐标为 -1，这样它就居中了。
选择"控制">"测试影片"查看应用外观后的复选框：

在文档库中，如果选择 ComboDownArrowOver 和 ComboDownArrowUp，您将会看到它们用蓝色的圆代替了黑色三角形，原因是它们也将 SymDownArrow 用于向下箭头元件。