I介绍如何用ActionScript制作绚丽的特效——Silk.docxVIP

介绍如何用ActionScript制作绚丽的特效——SilkOn February 12, 2011, in Action Script, by James 前几天看到推出一个用HTML5做的很漂亮的特效Silk，经过三天的研究，我现在介绍一下如何用ActionScript写一个Flash版本。效果图如下：点击查看线上效果 (键盘X清屏，S停止，按住Shift更改风向)下载源文件 SilkFlash.zip (4KB)老样子，我们先来分析一下这个效果里有什么关键的技术问题需要解决：波浪线的画法波浪线间的填充效果颜色的过渡光效一、波浪线的画法这个效果中很重要的一个亮点就是一层层平滑的波浪，相信细心的朋友一定注意到了这里面的随机事件，每一条线都是一条随机路径，难点不在于如何选取随机点的位置，而是如何用一条平滑的线将它们连接起来。如图1中左图是一条随机线中的各个随机点，如果用直线连接那么就是一条条的折线，显然不是我们要的波浪线；如果如中图那样用曲线来连接，难点就是如何来确定曲线的控制点；所以我采用的方法是如右图那样，用每两个点的中点来做实际连接的锚点，而采用原来的随机点作控制点，这样既能保证平滑又可以确保曲线与随机点的方向一致，不至于最后出来的波浪线走样儿。图1，波浪线的画法找到了锚点和控制点后，用我在这篇文章介绍过的drawPath来画线，这里我就不多罗嗦了。下面就是随机和计算波浪线控制点的代码：//用来存储锚点和控制点的数组vargpd:Vector. Number = new Vector. Number ();for(var i:int=datas.length-1;i =0;i--){if(i 2){//打头的两个点运动幅度相对大一些datas[i].x += windX*1.05 + (1 - 2 * Math.random())*headRandomStep;datas[i].y += windY*1.05 + (1 - 2 * Math.random())*headRandomStep}else{//其余各点运动幅度相对小一些datas[i].x += windX + (1 - 2 * Math.random()) * fadeStep;datas[i].y += windY + (1 - 2 * Math.random()) * fadeStep;}if(i 0){//各点都朝着前一个点运动，宏观就是整体形状的萎缩datas[i].x += (datas[i-1].x - datas[i].x)/7;datas[i].y += (datas[i-1].y - datas[i].y)/7;}if(i datas.length-1){//计算中心点，并将其添加到数组中作为锚点坐标，实际随机点作为控制点坐标。var x2:Number = (datas[i].x + datas[i+1].x)/2;var y2:Number = (datas[i].y + datas[i+1].y)/2;varax:Number = datas[i+1].x;varay:Number = datas[i+1].y;if(i datas.length-2){gpd.push(ax);gpd.push(ay);}gpd.push(x2);gpd.push(y2);}}二、波浪线间的填充效果波浪线做好后，每两段相邻的波浪线之间应该是连续填充的，否则丝绸就变成粗线条的麻布了。我刚看到这个效果的时候就在想这个问题，仔细观察后发现波浪线之间的填充色有很强的渐变，而且在一些极端区域甚至可以看到细线。这让我确定了之前的一个猜测，那就是波浪线之间的填充是若干条细线，而不是整块填充色。也就是说，在画两条相邻的波浪线时，同时将它们中间的若干条过渡线补充进去，这样当过渡线足够多就会形成填充。方案一旦确定，实施的代码其实很简单：//设置过渡线的数目为20条varnumber:Number =20;for(var i:int=0;i number;i++){var g:Vector. Number = new Vector. Number ();for(var j:int=0;j gpd.length;j++){//将相邻两条线对应的两个点之间平均分为20份，然后依次赋给对应过渡线的相应点g.push(graphicsDatas[j]+i*(gpd[j] - graphicsDatas[j])/number);}//画图}三、颜色的过渡丝绸绚丽的色彩是整个效果最夺目的地方，它其实就是一条连续的光谱。可见光的光谱从长波到短波会依次经历彩虹的七个颜色：红、橙、黄、绿、青、蓝、紫。如果从RGB颜色通道上来看，就是下面的这六个阶段：0xFF0000（红） -