ActionScript绘制复杂样式按钮

分享FlashMicroUI by 达达 at 2010-02-11

MicroUI的纯AS代码绘图方式可以使Flash体积很小,但是第一个版本做得不够灵活,每套皮肤都需要自己重新实现一遍代码绘图。

新版本想做得灵活些,提供圆角、阴影、边缘、渐变效果等样式细节的定制选项,这样可能就会去掉皮肤功能,加入样式表功能。

晚上做了一个原型项目来验证可行性,用纯代码绘图,1:1仿造迅雷的皮肤下载按钮 :)

以下是效果对比:

迅雷截图 新绘图代码

新老绘图代码效果对比:

MicroUI 0.1版 新绘图代码

完整代码如下:

package  
{
    import flash.geom.Matrix;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.filters.DropShadowFilter;
    
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.display.GradientType;
    
    /**
     * A prototype for MicroUI
     * 
     * @author BG5SBK
     * @link www.microui.org
     */
    public class MicroUI_Prototype extends Sprite
    {
        public function MicroUI_Prototype() 
        {
            var matrix:Matrix = new Matrix();
            
            var button:MovieClip = new MovieClip();
            
            //The outter border
            matrix.createGradientBox(80, 23, Math.PI / 2);
            button.graphics.beginGradientFill(GradientType.LINEAR, [0x5BB5D8, 0x278FC6], [1, 1], [0, 255], matrix);
            button.graphics.drawRoundRect(0, 0, 80, 24, 8, 8);
            button.graphics.endFill();
            
            //The inner border
            matrix.createGradientBox(78, 21, Math.PI / 2);
            button.graphics.beginGradientFill(GradientType.LINEAR, [0x60C8F1, 0x5AAFE7], [1, 1], [0, 255], matrix);
            button.graphics.drawRoundRect(1, 1, 78, 22, 6, 6);
            button.graphics.endFill();
            
            //The background
            matrix.createGradientBox(76, 19, Math.PI / 2);
            button.graphics.beginGradientFill(GradientType.LINEAR, [0x44BDEE, 0x329ADE], [1, 1], [32, 255], matrix);
            button.graphics.drawRoundRect(2, 2, 76, 20, 4, 4);
            button.graphics.endFill();
            
            //The text
            var text:TextField = new TextField();
            text.textColor = 0xFFFFFF;
            text.text = "下载皮肤";
            text.selectable = false;
            text.mouseEnabled = false;
            text.mouseWheelEnabled = false;
            text.autoSize = TextFieldAutoSize.CENTER;
            text.x = (button.width - text.width) / 2;
            text.y = (button.height - text.height) / 2;
            
            button.addChild(text);
            
            //The shadow
            var shadow:DropShadowFilter = new DropShadowFilter(1, 90, 0xA7BCD6, 1, 2, 2);
            
            button.filters = [shadow];
            
            button.x = (stage.stageWidth - button.width) / 2;
            button.y = (stage.stageHeight - button.height) / 2;
            
            addChild(button);
        }
    }
}