用AS绘图.docx
《用AS绘图.docx》由会员分享，可在线阅读，更多相关《用AS绘图.docx（13页珍藏版）》请在冰豆网上搜索。
用AS绘图
用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;
}
上面画的图形全部是直线的，这时我们又想画点花儿什么的，需要用到曲线，有画曲线的方法吗？
有，下面就来学习
[next]
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中同样有这家伙。
[next]
beginGradientFill（）方法：
该方法可实现渐变填充。
参数：
fillType:
―线性渐变用"linear"，放射渐变用"radial"。
colors:
―用于渐变色的RGB十六进制颜色值的数组；例如，红色为0xFF0000，蓝色为0x0000FF。
可以至多指定15种颜色。
对于每种颜色，请确保在alphas和ratios参数中指定对应值。
alphas:
―colors数组中对应颜色的Alpha值数组；有效值为0到100。
如果值小于0，则Flash使用0。
如果值大于100，则Flash使用100。
ratios:
―颜色分布比例数组；有效值为0到255。
即渐变中每种颜色的比例值，可以理解为颜色面板中，渐变色的滑块的位置。
比如在colors参数为：
[0xFF0000,0x0000FF],本参数为：
[250,255]，那么就相当于在混色器中的这种情况：
matrix:
―一个转换矩阵：
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:
[可选]―在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;
差不多了，再做两个练习，一个是涂鸦板的制作，一个是动态引导线的效果。
[next]
涂雅板的制作:
效果如下，在左边选择颜色和粗细后，可在右边绘图。
按下图画好图形,并将每个图形转换为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;;
}
[next]
鼠绘引导线:
效果如下:
用鼠标画一条引导线,小球将按引导线运动.
画一个球,或者你喜欢的任何玩意儿，转换为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（）;
};
}
};
升级会员 