ActionScript绘制复杂样式按钮
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); } } }