使用 ActionScript 绘制 Accordion 标题

"光晕"主题和"范例"主题中的默认标题针对所有状态均使用同一外观元素,并通过 ActionScript 绘制实际图形。"光晕"实现使用 RectBorder 类的扩展及自定义绘制 API 代码绘制状态。"范例"实现使用相同的外观和相同的 ActionScript 类作为 Button 外观。

为了创建用作外观并提供不同状态的 ActionScript 类,外观可以读取其 borderStyle 样式属性来确定状态。下表显示了为每种外观设置的边框样式:

属性

边框样式

falseUpSkin falseup
falseDownSkin falsedown
falseOverSkin falserollover
falseDisabled falsedisabled
trueUpSkin trueup
trueDownSkin truedown
trueOverSkin truerollover
trueDisabledSkin truedisabled

创建 ActionScript 自定义 Accordion 标题外观:

  1. 选择"文件">"新建"并选择"ActionScript 文件"。
  2. 将以下 ActionScript 复制到文件中:
    import mx.skins.RectBorder;
    import mx.core.ext.UIObjectExtensions;
    
    class RedGreenBlueHeader extends RectBorder
    {
     static var symbolName_str:String = "RedGreenBlueHeader";
     static var symbolOwner_obj:Object = RedGreenBlueHeader;
     
     function size():Void
     {
      var color_num:Number; // 颜色
      var borderStyle_str:String = getStyle("borderStyle"); // Accordion 的属性
    
      // 定义每种选项卡状态下 Accordion 中的每个选项卡的颜色。
      switch (borderStyle_str) {
       case "falseup":
       case "falserollover":
       case "falsedisabled":
        color_num = 0x7777FF;
        break;
       case "falsedown":
        color_num = 0x77FF77;    
        break;
       case "trueup":
       case "truedown":
       case "truerollover":
       case "truedisabled":
        color_num = 0xFF7777;
        break;
      }
    
      // 清除默认样式并绘制自定义样式。
      clear();
      lineStyle(0, 0, 100);
      beginFill(color_num, 100);
      drawRect(0, 0, __width, __height);
      endFill();
     }
     
     // 外观所需内容
     static function classConstruct():Boolean
     {
      UIObjectExtensions.Extensions();
      _global.skinRegistry["AccordionHeaderSkin"] = true;
      return true;
     }
     static var classConstructed_bl:Boolean = classConstruct();
     static var UIObjectExtensionsDependency_obj:Object = UIObjectExtensions;
    }
    

    此类根据边框样式创建方框:为假弹起、滑过及禁用状态创建蓝色框;为正常按下状态创建绿色框;为展开子项创建红色框。

  3. 保存该文件。

    对于本示例,将该文件命名为 RedGreenBlueHeader.as

  4. 选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
  5. 将该文件保存在 AS 文件所在的文件夹中。
  6. 选择"插入">"新建元件",并将它命名为 AccordionHeaderSkin
  7. 如果高级视图未显示出来,则单击"高级"按钮。
  8. 选择"为 ActionScript 导出"。

    标识符将自动填写为 AccordionHeaderSkin

  9. 将类设置为 RedGreenBlueHeader
  10. 确保"在第一帧导出"处于选中状态,然后单击"确定"。
  11. 在"场景 1"中,将一个 Accordion 组件拖到舞台上。
  12. 设置 Accordion 属性,使其显示多个子项。

    例如,将 childLabels 设置为 [One,Two,Three] 数组,将 childNames 设置为 [one,two,three] 数组。

  13. 选择"控制">"测试影片"。