使用 ActionScript 绘制 Button 外观

"光晕"主题和"范例"主题中的默认外观针对所有状态均使用同一外观元素,并通过 ActionScript 绘制实际图形。"光晕"实现使用 RectBorder 类的扩展以及某些自定义绘图代码来绘制状态。"范例"实现使用与"光晕"主题相同的外观和 ActionScript 类,并使用 ActionScript 代码设置不同的属性来更改 Button 的外观。

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

属性

边框样式

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

创建 ActionScript 自定义的 Button 外观:

  1. 选择"文件">"新建"并选择"ActionScript 文件"。
  2. 将以下 ActionScript 复制到文件中:
    import mx.skins.RectBorder;
    import mx.core.ext.UIObjectExtensions;
    
    class RedGreenBlueSkin extends RectBorder
    {
        static var symbolName:String = "RedGreenBlueSkin";
        static var symbolOwner:Object = RedGreenBlueSkin;
        
        function size():Void
        {
            var c:Number; // 颜色
            var borderStyle:String = getStyle("borderStyle");
    
            switch (borderStyle) {
                case "falseup":
                case "falserollover":
                case "falsedisabled":
                    c = 0x7777FF;
                    break;
                case "falsedown":
                    c = 0x77FF77;                
                    break;
                case "trueup":
                case "truedown":
                case "truerollover":
                case "truedisabled":
                    c = 0xFF7777;
                    break;
            }
    
            clear();
            var thickness = _parent.emphasized ? 2 : 0;
            lineStyle(thickness, 0, 100);
            beginFill(c, 100);
            drawRect(0, 0, __width, __height);
            endFill();
        }
        
        // 外观所需内容。
        static function classConstruct():Boolean
        {
            UIObjectExtensions.Extensions();
            _global.skinRegistry["ButtonSkin"] = true;
            return true;
        }
        static var classConstructed:Boolean = classConstruct();
        static var UIObjectExtensionsDependency = UIObjectExtensions;
    }
    

    此类根据边框样式创建方框:为假弹起、滑过及禁用状态创建蓝色框;为正常按下状态创建绿色框;为展开子项创建红色框。正常情况下将绘制极细边框;若是强调按钮,则绘制粗边框。

  3. 保存该文件。

    对于本示例,将文件命名为 RedGreenBlueSkin.as。

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

    标识符将自动填写为 ButtonSkin

  10. 将"类"设置为 RedGreenBlueSkin
  11. 确保"在第一帧导出"处于选中状态,然后单击"确定"。
  12. 将 Button 组件拖到舞台上。
  13. 选择"控制">"测试影片"。