来一发Flash教程：经由过程实例进修AS（四）――画折扇 (1)

Flash是一个非常优秀的矢量动画制作软件，它以流式控制技术和矢量技术为核心，制作的动画具有短小精悍的特点，所以被广泛应用于网页动画的设计中，以成为当前网页动画设计最为流行的软件之一。
本文由中国教程网sanbos原创，转载请保存此信息！
申明：文中有关常识点的先容用粗体字显现
比来，出了好几个鼠绘教程，看来人人进修绘画的热忱很高，我也来凑个热烈，明天我们也来画点啥，画一个折扇吧。他们的是鼠绘，我们不必鼠标画，来一个纯AS的，叫甚么？代码绘？管他哦，年夜杂绘都行。仍是先看看效果，上面是纯AS的折扇：

[1]200806/12938_2.html>[2]200806/12938_3.html>[3]200806/12938_4.html>[4]200806/12938_5.html>[5]200806/12938_6.html>[6]200806/12938_2.html>下一页

</P>

即然是纯AS的，那末就在第一帧翻开举措面板，入手下手写代码吧。

起首的两句：
importflash.geom.*
importcom.darronschall.DynamicRegistration;

起首引进两个类，第一个是我们在前面的矩阵要用到它，第二个是一个静态改动注册点的类。import是引进的意义，我只需记着要用到矩阵就要引进下面第一个类，要静态改动注册点就要引进第二类就好了。

起首画扇梗，先剖析一下，以下图：

登录/注册后可看大图

要画扇梗，起首要断定这四个点的坐标，先说a点，扇子要放场景两头，那末a点的x就应当是在场景中央偏右一点，a点的y值就应当在场景的下半部了。为了断定a的坐标我们就要找加入景的中央，以是接上去我如许写：
varpx:Number=Stage.width/2;//场景中央的x
varpy:Number=Stage.height/2;//场景中央的y
varax:Number=px+30;;
varay:Number=py+100;
Staege能够了解为舞台，width是宽度，height是高度。
那末下面这４句就应当了解了吧。接上去看b点，我们在断定某点的坐标时，一直以离它比来的一点作参考，就好断定了。那末离b点比来的是a点。从图上看，b点的x值比a点稍在一点点，b点的y值是扇梗下真个宽度，以是，接上去的是：
varbx:Number=ax+5;
varby:Number=ay-10;
c点：bxCcx=扇梗的长度，能分明吗？从图上看，扇梗上斜着的，也就是说c的地位比b的地位略高。以是：
varcx=bx-250;
varcy=by-100;
d点，从图上看，d点比c点稍偏左，而dyCcy=扇梗的上端宽度。以是：
vardx=cx-5;
vardy=cy+18;
这中个点就断定了，实践这些点都是也许的数字，画出来后，假如图形不划定规矩再作调剂就好了。
如今入手下手画扇梗，起首在创立一个mc：
this.createEmptyMovieClip("sg",0);
这句：createEmptyMovieClip()：创立一个空的mc，括号中两个参数，第一个用引号引发的是mc的称号，逗号前面是深度。
有了下面一句，一个叫sg的mc被创立，然后我们就能够用sg来绘扇梗了：
sg.lineStyle(1,0x6c6146,100);
sg.beginFill(0xfbf2d0,100);
sg.moveTo(ax,ay);
sg.lineTo(bx,by);
sg.lineTo(cx,cy);
sg.lineTo(dx,dy);
sg.lineTo(ax,ay);
sg.endFill();
下面几句语句先容：
lineStyle()：断定线条的的款式，括号中３个参数，分离是：粗细、色彩、通明度
beginFill()：入手下手添补，括号中２个参数分离是：添补色彩、通明度
moveTo(x，y)：将画笔移到括号中的x，y坐标处
lineTo(x,y)：从画笔地点地位入手下手画一条直线到括号中的x,y坐标处，并将画笔停止在这里。假如上面另有lineTo()那末将这里向上面的lineTo中的x,y画直线。
endFill()：停止添补，这时候将会这图形填上色。假如你画的不是一个闭合图形，那末将主动闭合添补。
画到如今第一条扇梗就画好了，这时候应测试影片，看看画出的扇梗是不是切合请求，假如不合错误，就调剂下面各点的x,y坐标，直到切合请求。如图：

登录/注册后可看大图

200806/12938.html>上一页200806/12938.html>[1][2]200806/12938_3.html>[3]200806/12938_4.html>[4]200806/12938_5.html>[5]200806/12938_6.html>[6]200806/12938_3.html>下一页

</P>接上去我们来画别的的扇梗，我们接纳复制扭转的体例来画别的的扇梗。但这里有个成绩，用AS画出的图形它的注册点上其左上角，用复制扭转的办法明显不可。办理的举措，就只能是改动mc的注册点，幸亏我们在网上找到一个能够静态改动注册点的类：DynamicRegistration，关于这个类的教程，请拜见我在论坛中的“静态改动注册点“的教程。翻开的扇子底边并非一条直线，而是向上斜的，其夹角也许是１５０度，我们的扇梗以１５度画一条，恰好能够画１０条，上面的代码完成了别的扇梗的绘制：
for(vari=1;i<11;i++){
sg.duplicateMovieClip("sg"+i,i);
varfzsg=eval("sg"+i);　//eval将括号中的”sg”+i酿成了sgi
DynamicRegistration.initialize(fzsg);
fzsg.setRegistration(ax-20,ay-14);　//将注册点改到了ax-20,ay-14的中央。
fzsg._rotation2=i*15;
}
如今测试影片看到的应当是如许的效果：

登录/注册后可看大图

扇梗画好了，如今我们画扇面，起首仍是先断定几个点的坐标：

登录/注册后可看大图

e点用d点作参考：ex-dx=　扇面的高度；由于扇梗是倾斜的，以是e点应比d点略向下一些。
h点：x坐标应是场景中央，即hx=px；py-hy＝ex-dx;
f点、g点、i点f均参考下面的办法断定。f、g点的地位要注重一下，应当要把最初一根扇梗显露来，不要挡住。
sma、smb则分离在两段园弧的两头。
再次申明，这些点的地位其实不非常正确，画好后测试景片，不合错误再调剂，就跟鼠绘一样，你在用鼠绘画的时分也不会往准确盘算，哪一笔该画到甚么地位。那末有无准确的点呢，这个固然是存在的。良多AS画图教程城市先容如何往盘算这些点。又是数字盘算，又是多少常识，三角函数，写了一年夜堆，能懂的人未几。仅管这些常识都是学过的，最少我都还给先生了。以是我们不必往盘算，我们用十分先辈的仪器来丈量这些点的地位，那就是眼睛。
我们注重到，扇面中呈现了弧形，而下面的lineTo只能画直线，以是我们要用到画弧线的办法：
curveTo(x１,y１,x２,y２)：这是画弧线的办法，它是从画笔地点地位画一条经由过程（x1,y1）到（x2,y2）的弧线。

好，如今能够画扇面了：
varex=dx+150;
varey=dy+55;
varfx=ax+60;
varfy=ay-32;
vargx=fx+158;
vargy=fy-29;
varjx=dx-15;
varjy=dy-5;
varhy=ay-150;
varhx=ax-10;
varix=ax+10;
variy=ay-260;
varsmax=gx-40;
varsmay=gy-170;
varsmbx=jx+80;
varsmby=jy-170;
this.createEmptyMovieClip("sm",11);//注重，由于扇梗将１～１０的深度占了，以是这里的深度应当是１１.d下面的深度数字应当d年夜。

sm.beginFill(0xffffff,100);
sm.moveTo(ex,ey);
sm.curveTo(hx,hy,fx,fy);
sm.lineTo(gx,gy);
sm.curveTo(smax,smay,ix,iy);
sm.curveTo(smbx,smby,dx,dy);
sm.lineTo(ex,ey);
sm.endFill();
画出的扇面应当如上图的模样，不合错误就调剂。

200806/12938_2.html>上一页200806/12938.html>[1]200806/12938_2.html>[2][3]200806/12938_4.html>[4]200806/12938_5.html>[5]200806/12938_6.html>[6]200806/12938_4.html>下一页

</P>接上去，画暗影，断定如图K点的地位，然后就能够画了。

登录/注册后可看大图

varkx=ex+13;
varky=ey-8;

this.createEmptyMovieClip("yy",20);
yy.beginFill(0x000000,10);
yy.moveTo(ex,ey);
yy.lineTo(kx,ky);
yy.lineTo(cx,cy);
yy.lineTo(dx,dy);
yy.lineTo(ex,ey);
yy.endFill();
for(varj=21;j<30;j++){
yy.duplicateMovieClip("yy"+j,j);
varfzyy=eval("yy"+j);
DynamicRegistration.initialize(fzyy);
fzyy.setRegistration(ax-20,ay-14);
fzyy._rotation2=(j-20)*15;
}
如今测试效果如图。

登录/注册后可看大图

应当说扇子已画好了，不外纯红色的扇面的点欠好看？在扇面上再画点啥粉饰一下？好的，我们先画一点花，再给它整上一首诗怎样？实在人人都看到了，最初弄出来的效果好象更差了，管的哦，我们的目标是进修AS，弄点这些器材，我也才好先容别的的一些内容。
先画花枝，以下图断定各点地位，然后能够画了。

登录/注册后可看大图

varhzax=ex;
varhzay=ey-40;
varhzbx=hzax;
varhzby=hzay-100;
varhzcx=hzax+10;
varhzcy=hzay-150;
varhzdx=hzcx-10;
varhzdy=hzay-180;
varhzex=hzax-10;
varhzey=hzay-5;
varhzfx=hzax-3;
varhzfy=hzay-100;
varhzgx=hzax+50;
varhzgy=hzay-130;
varhzhx=hzax+25;
varhzhy=hzay-110;
varhzix=hzax-2;
varhziy=hzay-50;
varhzjx=hzax-10;
varhzjy=hzay-30;
varhzkx=hzax-50;
varhzky=hzay-100;
this.createEmptyMovieClip("hz",30);
hz.beginFill(0x4d2b2b,100);
hz.moveTo(hzax,hzay);
hz.curveTo(hzbx,hzby,hzcx,hzcy);
hz.curveTo(hzdx,hzdy,hzex,hzey);
hz.lineTo(hzax,hzay);
hz.endFill();
hz.lineStyle(3,0x4d2b2b,100);
hz.moveTo(hzfx,hzfy);
hz.curveTo(hzhx,hzhy,hzgx,hzgy);
hz.moveTo(hzix,hziy);
hz.curveTo(hzjx,hzjy,hzkx,hzky);

200806/12938_3.html>上一页200806/12938.html>[1]200806/12938_2.html>[2]200806/12938_3.html>[3][4]200806/12938_5.html>[5]200806/12938_6.html>[6]200806/12938_5.html>下一页

</P>上面画花，画一个５瓣花图形，地位在那都行，由于随后我们会挪动它。按下图断定各点坐标：

登录/注册后可看大图

这里要先容一个突变添补，因花瓣我们要用放射添补。
beginGradientFill(fillType,colors,alphas,ratios,matrix)：这个命令会发生一个突变添补，括号中的参数为：
　第１个是添补类形，就是线性仍是放射类，线性为：LINEAR,放射类为RADIAL。
　第２个是一个数组，内里是要用到的色彩。数组是一些数据的组合，还记得我们在第一个实习中提到的变量吗？在内存平分了良多房间来寄存变量，房间中只能有一个数据，记得在那边我举例说，房间华夏来是３，如今５来了，一脚将３踢了进来，由于房间中只能住一个数据。如今是文化社会，不兴如许干。因而５来了，跟３签了合租协定，因而３和５都住进了这个房间，房间中就不止一个数据了，这时候我们将这个房间叫数组。数组的声明是如许的：
　　　　　　var数组称号:Array=[数构成员１，数构成员２，。。。。。。]
好比本例中我们要用到的色彩数组：我们在用到的放射添补要用到两种色彩：
　　　　　　　　varcolors:Array=[0xfc3f3f,0xfdd2ce];
第３个参数也是一个数组，它内里装的是色彩数组中各个色彩的通明度。
第４个参数仍是一个数组，它理面装的是色彩组数中各个色彩的比率。
第５个参数是一个矩阵，用划定突变添补的一些设置。不必怕，很复杂。要利用矩阵，必需引进geom类，这个我们已在代码的第一行举行了。然后，必要声明一个矩阵如：
matrix=newMatrix()
然后必要用createGradientBox办法来创立矩阵，格局为：
矩阵称号。createGradientBox（添补宽度，添补高度，添补的扭转（弧度），添补中央点x值，添补中央点y值）。是否是很复杂呢？假如你看其余书，对括号中的参数他们不是如许注释的，我如许注释是来自于理论，也能让人人一看就分明。说假话，为这个突变我弄了一夜，头都痛了，一直没法完成突变添补，都是纯色。最初终究总结出矩阵中最初两个参数是添补中央点坐标，为我拍手吧。书上为何就不申明白呢？他们把它叫做：程度挪动，垂直挪动。

200806/12938_4.html>上一页200806/12938.html>[1]200806/12938_2.html>[2]200806/12938_3.html>[3]200806/12938_4.html>[4][5]200806/12938_6.html>[6]200806/12938_6.html>下一页

</P>好了，如今能够画花了：
varfillType:String="radial";
varcolors:Array=[0xfc3f3f,0xfdd2ce];
varalphas:Array=[100,100];
varratios:Array=[0,255];
varthax=px+10;
varthay=py-5;
varthbx=px;
varthby=py-10;
varthcx=px-5;
varthcy=py-20;
varthdx=px-10;
varthdy=py-10;
varthex=px-20;
varthey=py-5;
varthfx=px-15;
varthfy=py;
varthgx=thfx-5;
varthgy=thfy+5;
varthhx=thfx+5;
varthhy=thfy+5;
varthix=px+5;
varthiy=py+10;
matrix=newMatrix();
matrix.createGradientBox(50,50,Math.PI,thax-55,thay-25);
this.createEmptyMovieClip("th",41);
th.beginGradientFill(fillType,colors,alphas,ratios,matrix);
th.moveTo(px,py);
th.curveTo(thax,thay,thbx,thby);
th.curveTo(thcx,thcy,thdx,thdy);
th.curveTo(thex,they,thfx,thfy);
th.curveTo(thgx,thgy,thhx,thhy);
th.curveTo(thix,thiy,px,py);
th.endFill();
花画好了，如今就要将它移到花枝上，先将注册点改到花的的中央，然后中，设置花的x,y值，将花移到花枝上。再实行几回复制，复制多少朵花，分离挪动花枝的响应地位。
DynamicRegistration.initialize(th);
th.setRegistration(thax-10,thay);
th._x2=hzax+50;
th._y2=hzay-130;
th.duplicateMovieClip("th1",40);
DynamicRegistration.initialize(th1);
th1.setRegistration(thax-10,thay);
th1._x2=hzax+40;
th1._y2=hzay-140;
th.duplicateMovieClip("th2",42);
DynamicRegistration.initialize(th2);
th2.setRegistration(thax-10,thay);
th2._x2=hzax+35;
th2._y2=hzay-120;
th.duplicateMovieClip("th3",43);
DynamicRegistration.initialize(th3);
th3.setRegistration(thax-10,thay);
th3._x2=hzkx;
th3._y2=hzky;
th.duplicateMovieClip("th4",44);
DynamicRegistration.initialize(th4);
th4.setRegistration(thax-10,thay);
th4._x2=hzkx+10;
th4._y2=hzky+5;
th.duplicateMovieClip("th5",45);
DynamicRegistration.initialize(th5);
th5.setRegistration(thax-10,thay);
th5._x2=hzcx-3;
th5._y2=hzcy+10;
th.duplicateMovieClip("th6",46);
DynamicRegistration.initialize(th6);
th6.setRegistration(thax-10,thay);
th6._x2=hzcx;
th6._y2=hzcy+20;
th.duplicateMovieClip("th7",47);
DynamicRegistration.initialize(th7);
th7.setRegistration(thax-10,thay);
th7._x2=hzcx-20;
th7._y2=hzcy+30;
如今测试效果应当是如许的：

登录/注册后可看大图

扇面右侧另有点空，弄首诗吧。这个静态创立的文本框，我还真拿它没举措，竖排没法完成，一设置扭转，人家来性情，不见了，所认只好如许了。固然，假如你晓得如何办理，但愿能在前面跟帖解说一下，我将不堪感谢，给你加分分。
最初的诗如许完成：
this.createTextField("stext",51,px+80,py-70,120,100);
varstxt:TextFormat=newTextFormat();//声了然一个文本框格局
stxt.size=18;//设置笔墨巨细
stxt.bold=true;//设置字体为粗
stext.text="团扇薄不摇，窈窕摇蒲葵。相怜中道罢，定是阿谁非。"
stext.setTextFormat(stxt);//将文本框格局使用于文本框
stext.wordWrap=true;//设置文本框能够主动换行。
这句：createTextField("stext",51,px+80,py-70,120,100);创立一个文本框，括号中的参数分离是：第１个参数：文本框的称号。第２个参数：深度；第３、４个参数：文本的x、y坐标，第５、６个参数：文本的宽高。
与本文相干会商请到这里与作者交换：</STRONG>http://bbs.jcwcn.com/viewthread.php?tid=169260
</p>

200806/12938_5.html>上一页200806/12938.html>[1]200806/12938_2.html>[2]200806/12938_3.html>[3]200806/12938_4.html>[4]200806/12938_5.html>[5][6]

flash影片的后缀名为.swf，该类型文件必须有flash播放器才能打开（包括各大浏览器，视频播放器），且播放器的版本须不低于FLASH程序自带播放器的版本。

Flash也支持alpha通道，这会使设计者高兴。没有太多的技术性，alpha通道是附加在图像上的信息-允许图像以不同的方式渲染。

常见的富媒体广告形式有横幅广告(BANNER,旗帜广告)按钮广告(BUTTON)弹出窗口广告(pop-up ads,弹窗)浮动广告(floting ads,飘浮广告,floaters)插播式广告(Interstitial)全屏广告(full screen)　

商业上的优势——品牌flash的创造；公司企业的flash宣传；flash技术在电视的应用

用户在观看广告的时候，无法通过正常点击鼠标来查看广告的尺寸、字节数、所链接的URL广告本身信息。

流技术让用户在下载的同时看到动画（与全部下载后再观看相反）。但是这也不是什么新技术 - Web一出现就有这种技术了。

商业上的优势——品牌flash的创造；公司企业的flash宣传；flash技术在电视的应用

考虑到实际的效果，这些专业的网站并不会去单纯追求技术本身，广告设计是否FLASH不是目的，关键是获得最好的宣传效果。

在计算机出现之前，动画制作者必需手工绘制即使差别很小的不同祯的图像。当然，非自动的，一祯祯的动画在很多情况下仍然很有用，Flash也允许这样做。