马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
用于设计和编辑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开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。 |