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);
}
}
}

浙公网安备 33010602011771号