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);
		}
	}
}
posted @ 2010-02-11 23:16  达达  阅读(1123)  评论(0编辑  收藏  举报