当前页面位置: » 丰搜网 » 文档中心 » 详细内容
体验flash mx(4)：用代码绘图
还记得flash 4的时候action只是协助flash把动画做得更好，或增加一些普通的外部命令、简单的流程控制；到了flash 5已经可以作为一个较成熟的script运行环境了，不过很多人还是当它为矢量的photoshop来用；经过了不算太长的1年多，可爱的flash mx终于出现了，她要告诉我们的是——你只需要键盘就足够了。
从几何图形学来讲，所有的图形都可以用三角形表示，这个定理也适用于我们通常所看到的2d图片和3d图形。很多次，有人羡慕的说，阿，我要是可以用代码完成你的作品该多好啊？ok，我们给你flash mx，只要你不嫌累并且打字快，你也可以做到。确实，这是一个矛盾的时间效率话题，也许不同的人会有不同的解释，不过作为flash mx的教程，我可以主观地先告诉你flash mx可以做到怎样的程度，然后我们再讨论这个矛盾。
flash mx的画线功能更类似于小的时候学习用的logo语言（就是那个小乌龟）。macromedia公司把这些功能很好的嵌入了movieclip对象中，并且每条语句都十分有用，如果善加利用，甚至可以用这些来写出3d的引擎，相信在未来的几个月内会有这样的东西出现。好了，先不管未来，我们先看看她的绘画流程：
设置起点-〉从这个起点绘制到其他的点线条，并设置那个点为新的起点-〉填充颜色。
这个流程也基本是所有类似绘图引擎的过程，我们先用几行简单而且十分有用的代码来形象的说明这个流程（注意，今天不可以用手画，偷懒对自己可没好处……这句话今天相反）
新建一个文件，在主场景第一帧加入代码：
createemptymovieclip("drawobj",1);//这条语句在第一天已经出现，就是要动态建立一个movieclip。
drawobj.onmousedown=function(){this.l.neto(_root._xmouse,_root._ymouse)};
drawobj.linestyle(.1, 0x111111, 100);
效果是不是很酷？三行代码基本上跟windows画板差不多啦。我们主要是用了l.neto这个函数，它的主要功能是从当前起点绘制一条直线到目标点，当然，你只要给目标点的x和y坐标即可；但你知道这个还不行，需要给你要画的线条一种样式，这就是linestyle，我们在这里画的就是0.1厚度，灰黑色的，alpha为100（不透明）的线。（图1）
（图1，……不是画魔画的l）
ok，抓笔的人已经松开了吧。我们要在l.neto的基础上改进一下，加入如下代码：
createemptymovieclip("drawobj", 1);
movieclip.prototype.makebox = function(x, y, l) {
this.l.neto(x, y+l);
this.l.neto(x+l, y+l);
this.l.neto(x+l, y);
this.l.neto(x, y);
}; //init
with (drawobj) {
moveto(100,100);
beginfill(0x333333, 100);
linestyle(.1, 0x111111, 100);
makebox(100,100,100);
endfill();
}
我们定义的makebox如其名，就是画正方形的，它在我们的初始化部分会用到，l参数是边长。当程序初始化的时候，我们对drawobj进行操作，首先用moveto来改变它的位置，接着我们会用到fill；它包括两部分，一个是普通的beginfill，是设置填充的参数起点，当我们用makebox画好了正方形后，必须要用到endfill才可以更新当前的fill，否则什么beginfill也没什么意义（虽然我不加也照样更新）。（图2）
（图2）
再接再厉，我们再结合另一个方法来看看程序作出来的图形的魅力。加入代码：
createemptymovieclip("drawobj", 1);
drawobj.linestyle(.1, 0x111111, 100);
for (var i=0; i<=50; i+=.1) {
with (drawobj) {
moveto(random(300),random(300));
beginfill(random(1048576),random(100));
curveto(i*random(10),i*random(10),i*random(10),i*random(10));
endfill();
}
}
这里我们先抛弃所谓的程序执行效率，用感性的大脑来写程序。凭空想象可能发生的事情，如果不知道的话，就随便写几个random，然后动态改变颜色和alpha，最后用curveto方法来画曲线。值得注意的是curveto的后两个参数x轴曲线偏移和y轴曲线偏移，不要做的太大，否则会更慢……，程序写完后执行一下，n秒钟后出现了一幅图画，看起来还有点味道（图3）
（图3，我不知道是什么，我想毕加索也不知道）
看来,艺术的意义永远无法解释，但我们的程序还得继续往下写。上面说的fill方法的第一种是普通的
beginfill，只可以填充固定的颜色；而另一种就比较好用了，叫做b
egingradientfill，用途是填充过渡色。还是先来动手再说是怎么回事，加代码：
createemptymovieclip("drawobj", 1);
drawobj.linestyle(.1, 0x111111, 100);
for (var i=0; i<=100; i++) {
with (drawobj) {
cx=random(200);
cy=random(200);
makebox(cx,cy,random(100));
drawway=random(2) ===1 ? "linear" : "radial";
colorrange = [0x111111, 0xeeeeee];
alpharange = [random(100), random(100)];
ra = [0, random(255)];
colorchart = {a:random(100), b:0, c:0, d:random(100), e:0, f:random(100), g:random(100), h:random(100), i:1};
begingradientfill(drawway, colorrange, alpharange, ra, colorchart);
}
}
这里我们分别使用beginegradientfill的两种填充方式：linear线性填充和radial环行填充来演示了一些正方形组合在一起的样子。这种填充方式需要的数据比较多，而且都为数组形式，其格式是唯一的：begingradientfill(方式,颜色范围,alpha范围,过渡范围,过渡参数)，缺一不可；但是过渡参数的形势可以有两种，一种是以3*3矩阵表示，内容为[a,b,c,d,e,f,g,h,i]，分别表示填充的宽，x轴起点，y轴起点，明度，x轴偏移色，y轴偏移色，高，填充角度等填充参数；而另一种比较直观，是以[x轴起点;y轴起点;宽;高;填充角度]组成的数组，我比较喜欢这种方式，方便而且速度快一些。我们随机的放入一些数据来看看能形成什么样子，不过在这个过程中，我意外的发现如果我们先用makebox，再做fill，那么将不会用到endfill()来结束填充（这个endfill总感觉没什么用途，或者说没有它应该有的功能）。运行一下，又经过几十秒后，一幅很酷的类似某有名设计师的画面出现了……（图4）
（图4，真的眼熟……）
最后，如果你不喜欢这个样子，你可以用drawobj.clear()来清空你画的这些……
程序化的mask蒙版
flash mx现在已经可以在程序中直接定义两个mask的主从关系，让我们从一个例子来看看：（代码）
movieclip.prototype.makebox = function(x, y, l) {
this.l.neto(x, y+l);
this.l.neto(x+l, y+l);
this.l.neto(x+l, y);
this.l.neto(x, y);
};
createemptymovieclip("drager",2);
drager.linestyle(.1, 0x111111, 100);
drager.beginfill(0x333333, 100);
drager.makebox(0,0,30);
drager.endfill();
createemptymovieclip("jpgobj",1);
createemptymovieclip("loader",3);
loader.onenterframe=function(){
if(_root.jpgobj._width<>0){
_root.jpgobj.setmask
(_root.drager);removemovieclip(this)
}
};
jpgobj.loadmovie("boy.jpg");
drager.startdrag(true);
这个例子我们结合这几天所学的一些东西，而且还用到了那个小男孩。程序开始的时候会画出一个灰色的正方形，当然作为mask的movieclip颜色是无所谓的，接着我们再创建一个movieclip，作为被mask的对象，当然到这里理论上我们可以直接用命令来控制mask，但是，我们要考虑图片是否被读取的这个因素。而且，还是理论上我们可以用ondata这个事件来获取，但是f6播放器做的好象有问题……movieclip的ondata被错误的传递给了_root，而且还不是正确的时候传递的。那我们没办法，只好再增加一个loader movieclip作为判断是否读取得条件，当然，满足后需要自己释放自己所占有的内存，并且用setmask来遮盖我们所读取的图片；最后，把方块绑在鼠标上就完成了，整个流程看似基本上不会发生什么错误了……（图5）
（图5）
源文件：http://www.dnvs.net/tutorial/flash_mx/day4.zip
注：
flashmx的程序虽然基本上都可以写入第一帧，但是如果考虑时间效率的话，还是分批处理为妙，例如把初始化和最常用的action先处理，其他的可以放入.as或者别的帧。
