《Flash AS影片剪辑用AS绘图.docx》由会员分享,可在线阅读,更多相关《Flash AS影片剪辑用AS绘图.docx(10页珍藏版)》请在三一办公上搜索。
1、Flash AS 影片剪辑用AS绘图 Flash AS 影片剪辑第10节用AS绘图 用AS绘图 AS2.0这我们提供了一些绘图方法,利用这些方法,我们可以绘制一些图形。下面来认识一下这些方法。首先是画直线,要画线应先确定线的类型等,AS提供的是: lineStyle 方法:该方法确定线条的类型。 常用格式:MC.lineStyle(粗细,颜色,透明度)。该方法还有其它一些参数,本文就不介绍了。 比如:my_mc. lineStyle(1,0xff0000,100) 这就指明了线条粗细为1,颜色是红色,透明度为100%。 有了线条样式后就可以画直线了,首先将画笔移到要开始画直线的起始点上,AS提
2、供了: moveTo方法:该方法将画笔移到起画点上。 用法:MC.moveTo(x,y); 起画点有了,就可以画线了,AS提供了: lineTo方法: 该方法将从起画点到终点画一条直线,并将起画点移到终点。 用法:MC.lineTo(x,y) 有了上面的三个方法就可以画直线了,下面就画一条: this.lineStyle(1,0xff0000,100); this.moveTo(0,0); this.lineTo(200,200); 测试影片,上面的代码画了一条从到的红色直线。 下面扩展一下,画个三角形: this.lineStyle(1,0xff0000,100); this.moveTo(
3、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,
4、200); this.lineTo(300,200); this.lineTo(250,300); this.lineTo(200,200); ebdFill; 测试影片,会看到一个红色笔触蓝色填充的三角形。 如果想要无笔触的三角形,那么上面第一句不要就行了。 看起来到目前为止,我们已经自认为已学会了用AS绘图了,很想跃跃欲试画点什么玩意儿,好吧,就满足你吧,下面我们来画一个五星吧_ next 用矩形工具画一个与舞始一样大的黑色矩形。为什么要画这个?很简单,黑色背景下红五星要好看些。为什么不直接将文档的背景色设为黑色?因为很多网站插入的swf文件默认是透明的,比如我们论坛。当然你完全可以连这个
5、黑色矩形都用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);
6、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;i5;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_
7、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;j37;j+) xg_mc.duplicateMovieClip(xg+j,this.getNextHighestDepth); xg1_mc = eval(xg+j); xg1_mc._rotation = j*10; 测试影片,效果出来了。 代码分析: 首先创建一个空的MC“wx_mc”
8、用来绘制五星。并将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); w
9、x_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;i5;i+)
10、 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.lineStyl
11、e(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;j37;j+) xg_mc.duplicateMovieClip(xg+j,this.getNextHighestDepth); xg1_mc = eval(xg+j); xg1_mc._rotation = j*10; 上面画的图形全部是直线的,这时我们又想画点花儿什么的,需要用到曲线,有画曲线的方法吗?有,下面就来学习 next curveTo 方法:该方法画
12、一条由起画点经控制点到终点的一条曲线。 用法: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);
13、mh_mc.curveTo(20,-25,0,0); mh_mc.endFill; for(i=0;i5;i+) mh_mc.duplicateMovieClip(mh+i,this.getNextHighestDepth); mh1_mc = eval(mh+i); mh1_mc._rotation= i*72; 实际上这个花的画法跟五星差不多,只是这个是曲线的而已。 现在问题又来了,这花的颜色不理想,是纯色的,在flash创作工具中还有个叫什么渐变填充的家伙,可以搞出些更好的效果,在AS中同样有这家伙。 next beginGradientFill方法:该方法可实现渐变填充。 参数:fil
14、lType: 线性渐变用linear,放射渐变用radial。 colors: 用于渐变色的 RGB 十六进制颜色值的数组;例如,红色为 0xFF0000,蓝色为 0x0000FF。可以至多指定 15 种颜色。对于每种颜色,请确保在 alphas 和 ratios 参数中指定对应值。 alphas: colors 数组中对应颜色的 Alpha 值数组;有效值为 0 到 100。如果值小于 0,则 Flash 使用 0。如果值大于 100,则 Flash 使用 100。 ratios: 颜色分布比例数组;有效值为 0 到 255。即渐变中每种颜色的比例值,可以理解为颜色面板中,渐变色的滑块的位置
15、。比如在colors参数为:0xFF0000,0x0000FF,本参数为:250,255,那么就相当于在混色器中的这种情况: matrix: 一个转换矩阵: flash.geom.Matrix 类包括 createGradientBox() 方法,通过该方法可以方便地设置矩阵,以便用于 MovieClip 类的 beginGradientFill 方法。 用法:首先需要导入flash.geom.Matrix类 import flash.geom.* 然后,创建一个flash.geom.Matrix类的实例,再调用createGradientBox方法: matrix = new Matrix;
16、 matrix.createGradientBox; x轴方向的偏移量:一般为要填充的形状的x减去渐变范围的宽。 y轴方向的偏移量:一般为要填充的形状的y减去渐变范围的高。 根据形状可调。 这里边的4个参数想一下渐变填充工具就清楚了。 focalPointRatio: 可选 在 Flash Player 8 中添加。一个数字,控制渐变焦点的位置。值 0 表示焦点位于中心。值 1 表示焦点位于渐变圆的一条边界上。值 -1 表示焦点位于渐变圆的另一条边界上。小于 -1 或大于 1 的值将被舍入为 -1 或 1。 有了这个方法我们就想把那朵花搞成桃花了,使用由红色到粉红色的放射填充。 效果: 代码:
17、 import flash.geom.*; this.createEmptyMovieClip(mh_mc,this.getNextHighestDepth); mh_mc._x = Stage.width /2; mh_mc._y = Stage.height/2; var color:Array = 0xFF0000,0xfee7f8; var alph:Array= 100,100; var rotio:Array = 0,255; var matrix = new Matrix; matrix.createGradientBox(40,100,Math.PI,-20,-40);/这里要
18、填充的形状注册点是这样就算出了-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;i170) h=true; lineStyle(dx,color,100); moveTo(_xmouse,_ymouse); onMouseMove = function if(_xmouse a.length) delete onEnterFrame; this.clear;