《介绍如何用ACTIONSCRIPT制作绚丽的特效——SILK》由会员分享，可在线阅读，更多相关《介绍如何用ACTIONSCRIPT制作绚丽的特效——SILK（15页珍藏版）》请在金锄头文库上搜索。
1、介绍如何用介绍如何用 ActionScriptActionScript 制作绚丽的特效制作绚丽的特效SilkSilkOn February 12, 2011, in Action Script, by James 前几天看到 推出一个用 HTML5 做的很漂亮的特效 Silk，经过三 天的研究，我现在介绍一下如何用 ActionScript 写一个 Flash 版本。效果图如下：点击查看线上效果 (键盘 X 清屏，S 停止，按住 Shift 更改风向) 下载源文件 SilkFlash.zip (4KB)老样子，我们先来分析一下这个效果里有什么关键的技术问题需要解决： 波浪线的画法 波浪线间的
2、填充效果 颜色的过渡 光效一、波浪线的画法一、波浪线的画法 这个效果中很重要的一个亮点就是一层层平滑的波浪，相信细心的朋友一定注 意到了这里面的随机事件，每一条线都是一条随机路径，难点不在于如何选取 随机点的位置，而是如何用一条平滑的线将它们连接起来。如图 1 中左图是一 条随机线中的各个随机点，如果用直线连接那么就是一条条的折线，显然不是 我们要的波浪线；如果如中图那样用曲线来连接，难点就是如何来确定曲线的 控制点；所以我采用的方法是如右图那样，用每两个点的中点来做实际连接的 锚点，而采用原来的随机点作控制点，这样既能保证平滑又可以确保曲线与随 机点的方向一致，不至于最后出来的波浪线走样儿。
3、图 1，波浪线的画法找到了锚点和控制点后，用我在这篇文章介绍过的 drawPath 来画线，这里我就 不多罗嗦了。下面就是随机和计算波浪线控制点的代码：/用来存储锚点和控制点的数组 var gpd:Vector. = new Vector.();for(var i:int=datas.length-1;i =0;i-) if(i 0) /各点都朝着前一个点运动，宏观就是整体形状的萎缩 datasi.x += (datasi-1.x - datasi.x)/7; datasi.y += (datasi-1.y - datasi.y)/7; if(i = new Vector.(); for(va
4、r j:int=0;j 0xFFFF00（黄）- 0x00FF00（绿） - 0x00FFFF（蓝绿） - 0x0000FF（蓝） - 0xFF00FF（紫）所以 RGB 的变化规律是这样的，当 R 达到 0xFF，开始增加 G 的值；当 G 增加到 0xFF，开始减小 R 的值，减小到 0 后增加 B 的值；当 B 到达 0xFF 开始减小 G 的值，达到 0 值后增加 R 的值，然后减小 B 的值完成一个光谱循环。用程序描述 就是下面的代码：var speed:Number = 0xFF/80;if(r 0) if(g =0xFF) r-=speed; else if(b=0xFF) r
5、+=speed; else if(b=0) g+=speed; if(g 0) if(b =0xFF) g-=speed; else if(r =0xFF) g +=speed; else if(r=0) b+=speed; if(b 0) if(r =0xFF) b-=speed; else if(g=0xFF) b +=speed; else if(g=0) r+=speed; r = Math.max(Math.min(0xFF,r),0); g = Math.max(Math.min(0xFF,g),0); b = Math.max(Math.min(0xFF,b),0); color
6、Transform.color = (r = new Vector.(4); /*定义每一次绘制动作是起笔还是落笔*/ graphicsPathCommand0 = GraphicsPathCommand.MOVE_TO; graphicsPathCommand1 = GraphicsPathCommand.LIVE_TO; graphicsPathCommand2 = GraphicsPathCommand.LIVE_TO; graphicsPathCommand3 = GraphicsPathCommand.LIVE_TO;/*定义点坐标*/ var datas:Vector. = new
7、 Vector.(8); /第一个点(10,10)的坐标 datas0 = 10; datas1 = 10; /第二个点(20,20)的坐标 datas2 = 20; datas3 = 20; /第三个点(20,30)的坐标 datas4 = 20; datas5 = 30; /第四个点(10,10)的坐标 datas6 = 10; datas7 = 10;/绘制 graphics.drawPath(graphicsPathCommand,datas);这样三个点就被连接成一个闭合三角形。如果你对 ActionScript 的绘图 API 比 较熟悉，那么就可以以此类推出代替 curveTo
8、来绘制曲线的写法，不同的是 datas 的数量要多出将近一倍，因为增加了曲线锚点的信息。如图 3 所示，左 边的图表示 graphicsPathCommand 的顺序，右边的图表示 datas 的内容与顺序， 除了添加关键点（黑色点）的坐标外还要添加每一个曲线锚点（蓝色点）的坐 标。图 3，绘制曲线的参数定义顺序从图中我们可以归纳出结论：在绘制曲线的时候，如果关键点个数为在绘制曲线的时候，如果关键点个数为 N N，则，则 graphicsPathCommandgraphicsPathCommand 的元素个数为的元素个数为 N+1N+1，datasdatas 的元素个数为的元素个数为(2*N+
9、1)*2(2*N+1)*2。程 序中的代码如下：graphicPathCommand = new Vector.(atomCount+1); datas = new Vector.(atomCount*4 + 2); for(var i:int=0;i=pDrop.mass) drop.merge(pDrop); return true; else pDrop.merge(drop); return true; else if(Math.abs(drop.x - pDrop.x)drop.y return true; else if(drop.y pDrop.y return true; 融合
10、主体： public function merge(pDrop:Drop):void mass += pDrop.mass * .75; pDrop.beMerged(this); resetTimer(); 被融合水珠： public function beMerged(pDrop:Drop):void isMerged = true; mergeParent = pDrop; resetAtoms(); .if(isMerged) mass *= .8; vx = (mergeParent.x - x)/5; vy = (mergeParent.y - y) /5; vx *= .98;
11、vy *= .98;x +=vx; y +=vy;四，流动算法：四，流动算法： 挂壁有两种状态：挂壁和流动。当质量相对小时，水珠与玻璃的附着力大于水 珠的重力，水珠表现为挂壁而静止不动；当质量较大时，重力大于附着力，水 珠便沿着玻璃向下流动。水珠向下流动的过程中由于附着力表现为对流体各个附着点的阻力，导致各个 附着点的相对位置发生变化，宏观看来就是水珠的形状发生变化，形状变化导 致水珠重心偏移，运动方向和速度发生变化，其变化周期不衡定。我们没有必 要将变形和运动改变计算得与自然界中发生的一般无二，只要抓住两个特点即 变形和变速，便可以描绘出流动的特征。水珠变形： 刚才我们已经分析了如何使用关键
12、点结合曲线来绘制水珠。所以只要改变关键 点的位置便可以完成水珠的变形。下面代码表示了一个关键点的位置是如何计 算的：/利用质量与半径的关系求出半径 radius = Math.sqrt(mass / Math.PI); /求出理想状态下此关键点的角度 var angle:Number = Math.PI *2 * (index+.5)/neighborCount) - Math.PI/2; /求出理想状态下角度与运动方向角的偏移量 var angleDistance:Number = .5- Math.abs(pVAngle - angle)/2; /算出此关键点的目标坐标位置 ax = ra
13、dius * (1+Math.random() * angleDistance ) * Math.cos(angle+(pVAngle - angle)/30); ay = radius * (1+Math.random() * angleDistance ) * Math.sin(angle+(pVAngle - angle)/30); /朝着目标坐标运动 x += (ax + mass/100 * (1- Math.random()*2) - x) / 3; y += (ay + mass/100 * (1- Math.random()*2) - y) / 3;图 4，水珠的变形如图 4
14、所示，a,b,c,d,e 为 5 个关键点，蓝色圆为已知半径在理想状态下的的 范围，蓝色箭头为运动方向，A 为运动方向角，B 为关键点 b 与运动方向角的偏 移量。则 b 点目标方向增量与 B 成正比，b 点的离心半径偏移量与 B 成正比。 红色点 b即为 b 点的目标点，同理得出其他各点的目标点。从图上可以看出运 动方向影响了水珠的形状。变速算法： 水珠流动的特征可以用这样的规律来模拟，在某一个时间点算出一个速度组 （vx,vy)，然后用 timer 来算出下一个时间点。这样在每一个时间点都会改变 速度，同时保证在两个时间点间的时间段内速度方向不变。代码如下：if(getTimer() -
15、startTime timeStep) resetTimer(); . private function resetTimer():void startTime = getTimer(); /当水珠足够大时才开始流动 if(mass 80) vx = .5 *(1-Math.random()*2); vy = .5 + Math.random()*5; /设置水珠流动速度上限 vy = Math.min(vy,8); /计算下一个时间点 timeStep = Math.random() * 1000+2000; 五，滑痕效果：五，滑痕效果： 水珠流动时会在玻璃上留下一道滑痕，这条滑痕是本例的效
16、率瓶颈，因为它是 多重位图滤镜的相互作用的结果。我们先分析一下滑痕的特征，滑痕接近水珠 的部分厚度比较大，所以有透镜效果；远离水珠的部分没有厚度和透镜效果， 但是可以在玻璃上擦出一条干净透明的轨迹，随后这条轨迹慢慢消失。这样的 安排虽然与自然规律相比显得比较极端，但是却可以描绘出很动感的流体画面。靠近水珠的透镜部分实际上是水珠的残影，由于我们需要同时保留残影清晰的 边缘和它的渐行渐远的特性，所以不能使用卷积滤镜。这里使用的是一个数组 来保存一定数量的历史残影位图，然后一次重绘。如下面的代码：for(var i:int=0;idropBitmapDatas.length;i+) var level:Number = (i/dropBitmapDatas.len
