自定义 Button 组件

对 Button 组件使用样式
对 Button 组件使用外观

在创作过程中和运行时，可以在水平和垂直方向上将 Button 组件变形。在创作时，在舞台上选择组件并使用“任意变形”工具或任何“修改”>“变形”命令。在运行时，可使用 setSize() 方法或 Button 类的任何适用属性，如 height 、 width 、 scaleX 和 scaleY 。

调整按钮大小不会更改图标或标签的大小。Button 的边界框对应于 Button 的边框，它同时也指定了实例的点击区域。如果您增加实例的大小，也就增加了点击区的大小。如果边框太小而无法容纳标签，标签会被裁剪以适合边框。

如果 Button 的图标比该 Button 本身还大，则图标会延伸到 Button 的边框外。

对 Button 组件使用样式

Button 的样式通常指定在绘制各种状态下的组件时 Button 的外观、图标、文本格式和填充的值。

以下过程在舞台上放置两个 Button，并在用户单击其中一个 Button 时将这两个 Button 的 emphasized 属性都设置为 true 。它还会在用户单击第二个 Button 时将其 emphasizedSkin 样式设置为 selectedOverSkin 样式，以便这两个 Button 在相同状态下显示不同的外观。

创建一个 Flash 文件 (ActionScript 3.0)。
将两个 Button 拖到舞台上（一次拖动一个），并分别为它们指定实例名称 aBtn 和 bBtn 。在“属性”检查器的“参数”选项卡中，将它们的标签分别指定为 Button A 和 Button B。

将以下代码添加到时间轴第 1 帧的“动作”面板上：

bBtn.emphasized = true; 
aBtn.emphasized = true; 
bBtn.addEventListener(MouseEvent.CLICK, Btn_handler); 
function Btn_handler(evt:MouseEvent):void { 
    bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin"); 
}

选择“控制”>“测试影片”。
单击其中一个按钮，查看每个按钮上 emphasizedSkin 样式的效果。

对 Button 组件使用外观

对应于不同状态 Button 组件分别使用以下外观。若要编辑一个或多个外观来更改 Button 的外观，请双击舞台上的 Button 实例，打开其外观调色板，如下图所示：

Button 外观

如果按钮已启用，当指针移动到它的上方时，它会显示指针经过状态。在按下按钮时，按钮将接收输入焦点并显示按下状态。当松开鼠标后，按钮又返回到指针经过状态。如果鼠标按下时指针移离按钮，按钮会恢复到原始状态。如果将 toggle 参数设置为 true ，将用 selectedDownSkin 显示按下状态，用 selectedUpSkin 显示弹起状态，用 selectedOverSkin 显示经过状态。

如果 Button 被禁用，不管用户进行什么交互操作，它都会显示其禁用状态。

若要编辑一个外观，请双击该外观以在元件编辑模式下打开它，如下图所示：

元件编辑模式下的 Button

此时，您可以使用 Flash 创作工具将该外观编辑为您喜欢的样式。

以下过程更改 Button 的 selected_over 外观的颜色。

创建新的 Flash 文件 (ActionScript 3.0)。
将一个 Button 从“组件”面板拖到舞台上。在“参数”选项卡中，将 toggle 参数设置为 true 。
双击该 Button 打开其外观调色板。
双击 selected_over 外观，在元件编辑模式下打开它。
将缩放控制设置为 400%，以便放大图标进行编辑。
双击背景，直至其颜色显示在“属性”检查器的“填充颜色选择器”中。
在“填充颜色选择器”中选择颜色 #CC0099 以将其应用于 selected_over 外观的背景。
单击舞台上方编辑栏左侧的“返回”按钮，返回到文档编辑模式。
选择“控制”>“测试影片”。
单击按钮，使其处于选中状态。

将鼠标指针移动到 Button 上方时，selected_over 状态应按下图所示显示。

显示使用修改颜色的 selected_over 外观的 Button