收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
积木学院 > 网页设计 > Flash > 正文

Flash MX 新的闪烁世界(第四天)

来源:互联摘选 日期:2006-03-01 12:32

Flash MX – 新的闪烁世界(第四天)

  还记得Flash 4的时候Action只是协助Flash把动画做的更好,或一些普通的外部命令,简单的流程控制;到了Flash 5的时候呢,已经可以作为一个较成熟的Script运行环境了,不过很多人还是当它为矢量的Photoshop来用(Flash都在哭啊);经过了不算太长的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.lineto(_root._xmouse,_root._ymouse)};

drawobj.linestyle(.1, 0x111111, 100);

  效果是不是很酷?三行代码基本上跟Windows画板差不多啦(先吹下)。我们主要是用了lineTo这个函数,它的主要功能是从当前起点绘制一条直线到目标点,当然,你只要给目标点的x和y坐标即可;但你知道这个还不行,需要给你要画的线条一种样式,这就是linestyle,我们在这里画的就是0.1厚度,灰黑色的,Alpha为100(不透明)的线。(图1)



(图1,……不是画魔画的L

Ok,抓笔的人已经松开了吧。我们要在lineto的基础上改进一下,加入如下代码:

createEmptyMovieClip("drawobj", 1);

Movieclip.prototype.makeBox = function(x, y, l) {

this.lineto(x, y+l);

this.lineto(x+l, y+l);

this.lineto(x+l, y);

this.lineto(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,只可以填充固定的颜色;而另一种就比较好用了,叫做beginGradientFill,用途是填充过渡色。还是先来动手再说是怎么回事,加代码(今天怎么总写代码?不要逃避,看下去◎):

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.lineto(x, y+l);

this.lineto(x+l, y+l);

this.lineto(x+l, y);

this.lineto(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)

  阿~,今天是最累的,本以为可以在24点以前完成,结果我写到11点的时候,我bro打电话让我出去Disco,结果第二天早上5点多才回家……但还是坚持写完了……我也快死亡了……明天见……(睡)

  源文件:点击下载

Tips:

  FlashMX的程序虽然基本上都可以写入第一帧,但是如果考虑时间效率的话,还是分批处理为妙,例如把初始化和最常用的Action先处理,其他的可以放入.as或者别的帧

(出处:www.Gimoo.net)

推荐阅读

 

热点信息

 
强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号