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