Flash与组件：Button

这几天没有心思去写代码，心情有点反复，忽然有很多烦恼总是围绕自己，整天好像昏昏顿顿地总是觉得很闷，但是无奈一直强迫自己去写，每天都这样。有很多想法都想去做，但是发现写了一下又放下了，没有去跟进。唯有写一点记录一下，当是练习。因为程序涉及到层面不大，只是一种渐变的按钮效果，看起来在交互上还是差了很多。这种只能说很小的东西。

采用绘图API 渐变效果填充，有一些人喜欢用位图结合一起使用，看起来特别酷，但是个人比较少去涉及到那种境界，还有很多事情很多事情去跟进去专注，有很多想学的东西，但是都分心不到太多。

主要用到beginGradientFill这个方法：里面带有几个参数，看起来需要对参数慢慢调节，这些调节有时候需要输出效果才能知道好的效果，但是as3 没有提供这种调节工具，不过可以自己尝试写一个。

渐变效果形式之后，再加一层白色透明的圆角矩形，这样看起来就有发光效果出现。当然这只是一种思路，你可以封装它来完成其他交互。

如鼠标等等。

有个效果 是最近看过但是还不清楚如何制作，那就是在鼠标交互过程中，按钮产生发光，是在内部进行发光。看起来很漂亮的。按钮的作用是用来交互，我们在平时使用的时候知道这一点就行，这个只是一个小小渐变按钮制作过程。没有什么大技巧。但是适合用到渐变这种手法 确实对编程产生一系列的美感作用，相反不好的效果就是会带来计算是复杂 ，增加cpu运算，各有利弊。看大家权重。

渐变也可以用到倒影方面应用，这个使用已经得到广泛使用了。不妨可以加以去体现。

package
{
import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.geom.*;
import flash.text.*;

public class Main extends Sprite
{

public function Main()
{
init();
}

//创建按钮
private function init():void
{

var buttonA:Sprite=creatButton([0x8000FF,0xCE9DFF],100,50);
var buttonB:Sprite=creatButton([0x333333,0x999999],100,50);
var buttonC:Sprite=creatButton([0xFF8000,0xFFBC79],100,50);

buttonA.x=200;
buttonA.y=50;
addChild(buttonA);

buttonB.x=100;
buttonB.y=200;
addChild(buttonB);

buttonC.x=100;
buttonC.y=250;
addChild(buttonC);

}

//通过渐变效果和绘制矩形的办法，来创建按钮，同时添加发光的效果
private function creatButton(colors:Array,width:Number,height:Number,fontSize:int=15):Sprite
{
var shape:Sprite=new Sprite();

var colors:Array=colors;
var alphas:Array=[1,1];
var ratios:Array=[0,255];
var matrix:Matrix=new Matrix();
matrix.createGradientBox(width,height,-Math.PI /2);

//创建渐变填充
shape.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix);//渐变按钮
shape.graphics.drawRoundRect(0,0,width,height,15,15);
shape.graphics.endFill();
shape.graphics.beginFill(0xffffff,0.15);
shape.graphics.drawRoundRect(0,0,width,height/2,15,15);
shape.graphics.endFill();
shape.filters=[new DropShadowFilter(2,45,0,0.5,2,2)];

//创建按钮文本标签
var label:TextField=new TextField();
label.defaultTextFormat=new TextFormat("黑体",fontSize,0xffffff,true);
label.text="BUTTON";
label.selectable=false;
label.mouseEnabled=false;

label.x=shape.width*0.18;
label.y=shape.height*0.3;

shape.addChild(label);
return shape;

}
}
}