将外观颜色链接到样式

使用第 2 版组件框架可轻松地将外观元素中的可视资源链接到在组件上使用外观设置的样式。要将影片剪辑实例注册到样式或将整个外观元素注册到样式,请在外观的时间轴中添加 ActionScript 代码来调用 mx.skins.ColoredSkinElement.setColorStyle(targetMovieClip, styleName)

将外观链接到样式属性:

  1. 如果已对文档应用了"范例"主题,请跳到第 5 步。
  2. 选择"文件">"导入">"打开外部库",然后选择 SampleTheme.fla 文件。

    此文件位于应用程序级别的配置文件夹中。要了解此文件在您的操作系统上的确切位置,请参阅关于主题

  3. 在主题的"库"面板中,选择 Flash UI Components 2/Themes/MMDefault,然后将文档中任意组件的 Assets 文件夹拖到文档的库中。

    例如,把 RadioButton Assets 文件夹拖到目标库中。

  4. 如果将单个组件的 Assets 文件夹拖到该库中,请确保将每个组件的 Assets 元件都设置为"在第一帧导出"。

    例如,RadioButton 组件的 Assets 文件夹名为 RadioButton Assets;它具有一个名为 RadioButtonAssets 的元件,该元件包含所有单个资源元件。如果将 RadioButtonAssets 元件设置为"在第一帧导出",所有单个资源元件也将在第一帧导出。

  5. 双击要修改的任何外观元件,在元件编辑模式下打开元件。

    例如,打开 States/RadioFalseDisabled 元件。

  6. 如果要着色的元素是图形元件而不是影片剪辑实例,请使用"修改">"转换为元件"将其转换为影片剪辑实例。

    对于本示例,将中心图形(图形元件 RadioShape1 的实例)更改为影片剪辑元件;然后将其命名为 Inner Circle。无需选择"为 ActionScript 导出"。

    最好(但不是必须)将新创建的影片剪辑元件移动到正在编辑的组件资源的 Elements 文件夹中。

  7. 如果在上一步中将图形元件转换为影片剪辑实例,则为该实例指定一个名称,以便在 ActionScript 中可以将其作为目标。

    对于本示例,将实例命名为 innerCircle

  8. 添加 ActionScript 代码来将外观元素或其包含的影片剪辑实例注册为着色的外观元素。

    例如,将下面的代码添加到外观元素的时间轴。

    mx.skins.ColoredSkinElement.setColorStyle(innerCircle, "symbolBackgroundDisabledColor");
    

    在本示例中,您使用已经与"范例"样式中现有的样式名称相对应的颜色。如果可能,最好使用与正式的层叠样式表标准或由"光晕"和"范例"主题提供的样式相对应的样式名称。

  9. 重复执行第 5 步至第 8 步,直到编辑完所有要更改的外观。

    对于本实例,对 RadioTrueDisabled 外观重复这些步骤,然后删除该图形并将现有的 Inner Circle 元件拖到 RadioTrueDisabled 外观元素中,而不是将现有图形转换为影片剪辑。

  10. 编辑完该外观元件之后,单击舞台顶部编辑栏左侧的"返回"按钮,返回到文档编辑模式。
  11. 将该组件的一个实例拖到舞台上。

    对于本示例,将两个 RadioButton 组件拖到舞台上,并将其中一个设置为选中,为了查看所做的更改,使用 ActionScript 将两个组件都设置为禁用。

  12. 向文档添加 ActionScript 代码,以在组件实例上或全局级别上设置新的样式属性。

    对于本示例,在全局级别上设置属性,如下所示:

    _global.style.setStyle("symbolBackgroundDisabledColor", 0xD9D9D9);
    
  13. 选择"控制">"测试影片"。