来谈谈：Flash as进门(16)：用AS绘制各类图形-Flash actionscript

仓酷云

用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了FutureWave，并将其改名为Flash。后又被Adobe公司收购。
本例持续解说AS的基本常识，明天我们来进修FlashAS进门系列教程第七课：影片剪辑第10节用AS画图，教程具体解说了使用AS绘制各类图形的办法，对Flash的AS编程有乐趣的伴侣能够到论坛与作者交换。
上一篇文章：Flashas进门(15)：filters类滤镜
用AS画图
AS2.0这我们供应了一些画图办法，使用这些办法，我们能够绘制一些图形。上面来熟悉一下这些办法。起首是画直线，要画线应先断定线的范例等，AS供应的是：
lineStyle()办法：该办法断定线条的范例。
经常使用格局：MC.lineStyle(粗细，色彩，通明度)。该办法另有别的一些参数，本文就不先容了。
好比：my_mc.lineStyle(1,0xff0000,100)
这就指了然线条粗细为1，色彩是白色，通明度为100%。
有了线条款式后就能够画直线了，起首将画笔移到要入手下手画直线的肇端点上，AS供应了：
moveTo（）办法：该办法将画笔移到起画点上。
用法：MC.moveTo(x,y);
起画点有了，就能够画线了，AS供应了：
lineTo()办法：该办法将从起画点到尽头画一条直线，并将起画点移到尽头。
用法：MC.lineTo(x,y)
有了下面的三个办法就能够画直线了，上面就画一条：
this.lineStyle(1,0xff0000,100);
this.moveTo(0,0);
this.lineTo(200,200);
测试影片，下面的代码画了一条从（0，0）到（200，200）的白色直线。
上面扩大一下，画个三角形：
this.lineStyle(1,0xff0000,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
我想我们绘画，一定不会宁愿只画一些线条，还想画一些外形，上面的办法对我们这类希望供应了大概。
beginFill()办法：该办法从字面上就可以了解，入手下手添补。
用法：MC.beginFill(色彩，通明度)
endFill()办法：用beginFill()中的色彩添补图形。
好比将下面的三角形填上蓝色：
this.lineStyle(1,0xff0000,100);
this.beginFill(0x0000ff,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
ebdFill();
测试影片，会看到一个白色笔触蓝色添补的三角形。
假如想要无笔触的三角形，那末下面第一句不要就好了。
看起离开今朝为止，我们已自以为已学会了用AS画图了，很想伎痒画点甚么玩艺儿，好吧，就满意你吧，上面我们来画一个五星吧^_^

用矩形工具画一个与舞始一样年夜的玄色矩形。为何要画这个？很复杂，玄色背景下红五星要悦目些。为何不间接将文档的背景致设为玄色？由于良多网站拔出的swf文件默许是通明的，好比我们论坛。固然你完整能够连这个玄色矩形都用AS来完成。

将以下代码输出到帧举措面板中：

this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x=Stage.width/2;
wx_mc._y=Stage.height/2;
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1=eval("wx1"+i);
wx1._rotation=i*72;
}
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x=Stage.width/2;
xg_mc._y=Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc=eval("xg"+j);
xg1_mc._rotation=j*10;
}
测试影片，效果出来了。
代码剖析：
起首创立一个空的MC“wx_mc”用来绘制五星。并将wx_mc放到舞中心。
this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x=Stage.width/2;
wx_mc._y=Stage.height/2;
接上去画一个白色三角形，从上面的代码中能够看到，三角形的右下角在wx_mc的注册点上，即舞台中心，这一点很主要，由于我们前面要扭转这个三角形。
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
接上去，持续绘图又画了一个三角形，这个三角形与第一个三角形恰好程度相反，如许就构成了五星的一只角，而这个三角形的色彩比第一个三角形略深，如许就构成了平面感。
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
有了一只角了，要构成五星就复杂了，复制5份，然后每份扭转360/5x份数，五星就绘成了。
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1=eval("wx1"+i);
wx1._rotation=i*72;
}
五星画好了，还想加些光芒，那又新建一个MC，用来画光芒，就在五星核心画一条直线，然后复制直线36份，每10度放一份就好了。用一样的办法画第二层光芒。
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x=Stage.width/2;
xg_mc._y=Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc=eval("xg"+j);
xg1_mc._rotation=j*10;
}
下面画的图形全体是直线的，这时候我们又想画点花儿甚么的，必要用到曲线，有画曲线的办法吗？有，上面就来进修


curveTo()办法：该办法画一条由起画点经把持点到尽头的一条曲线。
用法：MC.curveTo(把持点x,把持点y,尽头x,尽头y);
有了画曲线的办法那就画个花儿吧。

代码：

this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x=Stage.width/2;
mh_mc._y=Stage.height/2;
mh_mc.beginFill(0xff0000,100);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc=eval("mh"+i);
mh1_mc._rotation=i*72;
}
实践上这个花的画法跟五星差未几，只是这个曲直线的罢了。
如今成绩又来了，这花的色彩不睬想，是纯色的，在flash创作工具中另有个叫甚么突变添补的家伙，能够弄出些更好的效果，在AS中一样有这家伙。


beginGradientFill（）办法：该办法可完成突变添补。
参数：fillType:D线性突变用"linear"，放射突变用"radial"。
colors:D用于突变色的RGB十六进制色彩值的数组；比方，白色为0xFF0000，蓝色为0x0000FF。能够最多指定15种色彩。关于每种色彩，请确保在alphas和ratios参数中指定对应值。
alphas:Dcolors数组中对应色彩的Alpha值数组；无效值为0到100。假如值小于0，则Flash利用0。假如值年夜于100，则Flash利用100。
ratios:D色彩散布比例数组；无效值为0到255。即突变中每种色彩的比例值，能够了解为色彩面板中，突变色的滑块的地位。好比在colors参数为：[0xFF0000,0x0000FF],本参数为：[250,255]，那末就相称于在混色器中的这类情形：
matrix:D一个转换矩阵：
flash.geom.Matrix类包含createGradientBox()办法，经由过程该办法能够便利地设置矩阵，以便用于MovieClip类的beginGradientFill()办法。
用法：起首必要导进flash.geom.Matrix类
importflash.geom.*
然后，创立一个flash.geom.Matrix类的实例，再挪用createGradientBox办法：
matrix=newMatrix();
matrix.createGradientBox（突变局限的宽，突变局限的高，扭转，x轴偏向的偏移量，y轴偏向的偏移量）;
x轴偏向的偏移量：通常是要添补的外形的x减往突变局限的宽。
y轴偏向的偏移量：通常是要添补的外形的y减往突变局限的高。
依据外形可调。
这里边的4个参数想一下突变添补工具就分明了。
focalPointRatio:[可选]D在FlashPlayer8中增加。一个数字，把持突变核心的地位。值0暗示核心位于中央。值1暗示核心位于突变圆的一条界限上。值-1暗示核心位于突变圆的另外一条界限上。小于-1或年夜于1的值将被舍进为-1或1。
有了这个办法我们就想把那朵花弄成桃花了，利用由白色到粉白色的放射添补。
效果：

代码：

importflash.geom.*;
this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x=Stage.width/2;
mh_mc._y=Stage.height/2;
varcolor:Array=[0xFF0000,0xfee7f8];
varalph:Array=[100,100];
varrotio:Array=[0,255];
varmatrix=newMatrix();
matrix.createGradientBox(40,100,Math.PI,-20,-40);//这里要添补的外形注册点是（0，0）如许就算出了-20，和-40（调剂后的）
mh_mc.beginGradientFill("radial",color,alph,rotio,matrix);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc=eval("mh"+i);
mh1_mc._rotation=i*72;
}
this.createEmptyMovieClip("hz_mc",0);
hz_mc._x=Stage.width/2;
hz_mc._y=Stage.height/2;
hz_mc.lineStyle(6,663333,100);
hz_mc.moveTo(0,0);
hz_mc.curveTo(-5,110,0,160);
this.createEmptyMovieClip("hy_mc",this.getNextHighestDepth());
hy_mc._x=Stage.width/2;
hy_mc._y=Stage.height/2;
color=[0x0e730d,0x06db2b];
matrix.createGradientBox(60,20,Math.PI,10,50);
hy_mc.beginGradientFill("radial",color,alph,rotio,matrix);
hy_mc.moveTo(0,70);
hy_mc.curveTo(35,40,70,50);
hy_mc.curveTo(35,90,0,70);
hy_mc.endFill();
hy_mc.duplicateMovieClip("hy1_mc",this.getNextHighestDepth());
hy1_mc._xscale=-100;
hy1_mc._x=hy_mc._x-6;
hy1_mc._y=hy_mc._y+10;
差未几了，再做两个实习，一个是涂鸦板的制造，一个是静态引诱线的效果。


涂雅板的制造:
效果以下，在右边选择色彩和粗细后，可在右侧画图。

按下丹青好图形,并将每一个图形转换为MC.

登录/注册后可看大图

实例称号:

玄色-hs_mc;
白色-hongs_mc;
橙色-cs_mc;
黄色-huans_mc;
绿色-lus_mc;
蓝色_nans_mc;
紫色-zs_mc;
年夜园-m6_mc;
二园-m4_mc;
三园_m3_mc;
幺园-m1_mc;
新拔出一层,翻开帧举措面板,输出:
varcolor=0x000000;
vardx=1;
varh:Boolean=true;
hs_mc.onRelease=function(){
color=0x000000;
}
hongs_mc.onRelease=function(){
color=0xFF0000;
}
cs_mc.onRelease=function(){
color=0xFF9900;
}
huans_mc.onRelease=function(){
color=0xFFFF00;
}
lus_mc.onRelease=function(){
color=0x00FF00;
}
nans_mc.onRelease=function(){
color=0x0000FF;
}
zs_mc.onRelease=function(){
color=0xFF00FF;
}
m1_mc.onRelease=function(){
dx=1;
}
m3_mc.onRelease=function(){
dx=3;
}
m4_mc.onRelease=function(){
dx=4;
}
m6_mc.onRelease=function(){
dx=6;
}
onMouseDown=function(){
if(_xmouse>170){
h=true;
}
lineStyle(dx,color,100);
moveTo(_xmouse,_ymouse);
}
onMouseMove=function(){
if(_xmouse<170){
h=false;
}
if(h){
lineTo(_xmouse,_ymouse);
}
}
onMouseUp=function(){
h=false;;
}

鼠绘引诱线:

效果以下:用鼠标画一条引诱线,小球将按引诱线活动.

画一个球,大概你喜好的任何玩艺儿，转换为MC,实例称号为:ball_mc.
然后在帧举措面板中输出:
vara:Array;

this.onMouseDown=function(){
this.lineStyle(1,0x0000ff,100);
a=newArray();
a.push(_xmouse,_ymouse);
this.moveTo(_xmouse,_ymouse);
this.onMouseMove=function(){
a.push(_xmouse,_ymouse);
this.lineTo(_xmouse,_ymouse);
};
};
this.onMouseUp=function(){
deletethis.onMouseMove;
varz:Number=newNumber();
this.onEnterFrame=function(){
ball_mc._x=a[z++];
ball_mc._y=a[z++];
if(z>a.length){
deleteonEnterFrame;
this.clear();
};
}
};

使用AdobeActionScript3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。

广告本身无法看到网址链接，不利于网站本身的搜索引擎优化，对增加网站排行的权重没有意义。

Flash流行的主要原因是它使用了矢量图形（与位图相反）。因为这种图形格式比位图小得多，而且在缩放时对图形质量影响不大，所以很适合对带宽要求很高的Web。

作为奖赏，你可以使用关键祯动画支持和tweening- 两个最主要的节省时间的方式。本质上，关键祯是动画中显著事件发生的位置。

单纯的做动画而言，flash动画与传统动画有很多差别，这里会为你介绍什么是flash与flash与传统动画相比具有的优点和缺点，而进一步了解flash动画

仓酷云

随着动画的日益发展壮大，动画片在世界范围影响里越来越大，广告、网页、电影各个方面都应用到了动画。

Flash是一种以向量图方式制成的网页动画,相比MPEG,AVI等的影片的档案大小就小很多.

向量图有一个特点,就是放大后的图像是不会改变的. 点阵图 向量图Flash的应用，还有再不断在完善的Action Script脚本语言。