Flash教程：通过实例学习AS（四）——画折扇 (1)

【 tulaoshi.com - 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'>下一页

即然是纯AS的，那么就在第一帧打开动作面板，开始写代码吧。

首先的两句：
import flash.geom.*
import com.darronschall.DynamicRegistration;

首先引入两个类，第一个是我们在后面的矩阵要用到它，第二个是一个动态改变注册点的类。import是引入的意思，我只需记住要用到矩阵就要引入上面第一个类，要动态改变注册点就要引入第二类就行了。

首先画扇梗，先分析一下，如下图：

要画扇梗，首先要确定这四个点的坐标，先说a点，扇子要放场景中间，那么a点的x就应该是在场景中心偏右一点，a点的y值就应该在场景的下半部了。为了确定a的坐标我们就要找到场景的中心，所以接下来我这样写：
var px:Number = Stage.width/2;//场景中心的x
var py:Number = Stage.height/2;//场景中心的y
var ax:Number = px+30;;
var ay:Number = py+100;

Staege可以理解为舞台，width是宽度，height是高度。

那么上面这４句就应该理解了吧。接下来看b点，我们在确定某点的坐标时，始终以离它最近的一点作参考，就好确定了。那么离b点最近的是a点。从图上看，b点的x值比a点稍在一点点，b点的y值是扇梗下端的宽度，所以，接下来的是：
var bx:Number = ax+5 ;
var by:Number= ay - 10;
c点：bx – cx = 扇梗的长度，能明白吗？从图上看，扇梗上斜着的，也就是说c的位置比b的位置略高。所以：
var cx = bx -250;
var cy = by-100;
d点，从图上看，d点比c点稍偏左，而dy – cy = 扇梗的上端宽度。所以：
var dx = cx-5;
var dy = 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'>下一页

接下来我们来画其它的扇梗，我们采用复制旋转的方式来画其它的扇梗。但这里有个问题，用AS画出的图形它的注册点上其左上角，用复制旋转的方法显然不行。解决的办法，就只能是改变mc的注册点，好在我们在网上找到一个可以动态改变注册点的类：DynamicRegistration，关于这个类的教程，请参见我在论坛中的“动态改变注册点“的教程。打开的扇子底边并不是一条直线，而是向上斜的，其夹角大概是１５０度，我们的扇梗以１５度画一条，刚好可以画１０条，下面的代码完成了其它扇梗的绘制：
for (var i = 1;i11;i++){
sg.duplicateMovieClip("sg"+i,i);
var fzsg = 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）的弧线。

好，现在可以画扇面了：
var ex = dx +150;
var ey = dy + 55;
var fx = ax +60;
var fy = ay - 32;
var gx = fx + 158;
var gy = fy - 29;
var jx = dx - 15;
var jy = dy - 5;
var hy = ay -150;
var hx =ax-10 ;
var ix = ax +10;
var iy = ay -260;
var smax = gx - 40;
var smay = gy -170;
var smbx = jx+80;
var smby = jy-170;

this.createEmptyMovieClip("sm",11);//注意，因为扇梗将１～１０的深度占了，所以这里的深度应该是１１.赿上面的深度数字应该赿大。

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'>下一页

接下来，画阴影，确定如图K点的位置，然后就可以画了。

var kx = ex +13;
var ky = 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 (var j = 21;j30;j++){
yy.duplicateMovieClip("yy"+j,j);
var fzyy = eval("yy"+j);
DynamicRegistration.initialize(fzyy);
fzyy.setRegistration(ax-20, ay-14);
fzyy._rotation2 = (j-20)*15;
}

现在测试效果如图。

应该说扇子已画好了，不过纯白色的扇面的点不好看？在扇面上再画点啥点缀一下？好的，我们先画一点花，再给它整上一首诗如何？其实大家都看到了，最后弄出来的效果好象更差了，管的哦，我们的目的是学习AS，弄点这些东西，我也才好介绍其它的一些内容。

先画花枝，如下图确定各点位置，然后可以画了。

var hzax = ex ;
var hzay = ey - 40;
var hzbx = hzax ;
var hzby = hzay - 100;
var hzcx = hzax +10;
var hzcy = hzay -150;
var hzdx = hzcx -10;
var hzdy = hzay - 180;
var hzex = hzax -10;
var hzey = hzay - 5;
var hzfx = hzax-3;
var hzfy = hzay-100;
var hzgx = hzax + 50;
var hzgy = hzay - 130;
var hzhx = hzax + 25;
var hzhy = hzay - 110;
var hzix = hzax - 2;
var hziy = hzay - 50;
var hzjx = hzax - 10;
var hzjy = hzay - 30;
var hzkx = hzax - 50;
var hzky = 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'>下一页

下面画花，画一个５瓣花图形，位置在那都行，因为随后我们会移动它。按下图确定各点坐标：

这里要介绍一个渐变填充，因花瓣我们要用放射填充。

beginGradientFill(fillType, colors, alphas, ratios, matrix)：这个命令会产生一个渐变填充，括号中的参数为：
　第１个是填充类形，就是线性还是放射类，线性为：LINEAR,放射类为RADIAL。
　第２个是一个数组，里面是要用到的颜色。数组是一些数据的组合，还记得我们在第一个练习中提到的变量吗？在内存中分了很多房间来存放变量，房间中只能有一个数据，记得在那里我举例说，房间中原来是３，现在５来了，一脚将３踢了出去，因为房间中只能住一个数据。现在是文明社会，不兴这样干。于是５来了，跟３签了合租协议，于是３和５都住进了这个房间，房间中就不止一个数据了，这时我们将这个房间叫数组。数组的声明是这样的：
　　　　　　var 数组名称:Array = [数组成员１，数组成员２，。。。。。。]
比如本例中我们要用到的颜色数组：我们在用到的放射填充要用到两种颜色：
　　　　　　　　var colors:Array = [0xfc3f3f, 0xfdd2ce];
第３个参数也是一个数组，它里面装的是颜色数组中各个颜色的透明度。
第４个参数还是一个数组，它理面装的是颜色组数中各个颜色的比率。
第５个参数是一个矩阵，用规定渐变填充的一些设置。不用怕，很简单。要使用矩阵，必须引入geom类，这个我们已经在代码的第一行进行了。然后，需要声明一个矩阵如：
matrix = new Matrix()
然后需要用createGradientBox方法来创建矩阵，格式为：
矩阵名称。 createGTulaoshi.comradientBox（填充宽度，填充高度，填充的旋转（弧度），填充中心点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'>下一页

好了，现在可以画花了：

var fillType:String = "radial";
var colors:Array = [0xfc3f3f, 0xfdd2ce];
var alphas:Array = [100, 100];
var ratios:Array = [0, 255];
var thax = px +10;
var thay = py - 5 ;
var thbx = px;
var thby = py - 10;
var thcx = px - 5;
var thcy = py-20;
var thdx = px -10;
var thdy = py -10;
var thex = px - 20;
var they = py - 5;
var thfx = px - 15;
var thfy = py;
var thgx = thfx -5;
var thgy = thfy +5;
var thhx = thfx+5;
var thhy = thfy+5;
var thix = px+5;
var thiy = py+10;
matrix = new Matrix();
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);
var stxt:TextFormat = new TextFormat();//声明了一个文本框格式
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坐标，第５、６个参数：文本的宽高。

与本文相关讨论请到这里与作者交流：http://bbs./viewthread.php?tid=169260

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]