分享
 
 
 

flash8水波制作简明实例-探篇

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

一直一来,flash8的水波制作都是比较让我向往的,网上也出了不少的教材,闪吧的高手HBB和xiankevin都出过相关的教程,不过当时我没时间学习,看源文件看的是一塌糊涂,到头来是今天看,明天忘。这几天学习flash新增的类,终于学到了DisplacementMapFilter滤镜类,一切豁然开朗,原来水波制作这么简单,下面是昨天学习,今天做的一个小实例。很简单,基本上三步走就完成了一个水波制作的雏形。明天再试试用BitmapData.perlinNoise方法加深一下印象。

先看效果:

首先我们需要找到一个背景(大小和场景相同),或者自己手绘一个,这里我用的是博客的图标。也可以用一张图片做成mc来代替。做好后,将这个mc拖入到场景中,中心对齐,并给它实例命名为pic

第二步新建一个mc,绘制一个黑白颜色的放射性渐变的圆,并把它做成动态的效果,效果看这里:

http://www.webjx.com/upfiles/20060221/20060221002112_2.swf

这个会动的放射性渐变mc,我们在库中给它添加标识符(就叫ball好了),你也可以不用这样做,后面的讲解中有可以选择的余地

第三步,再次新建一个mc,里面绘制一个和场景大小相同的矩形(注意这个矩形要与mc的场景中心进行“左上”对齐)如下图,这个矩形就是将来在pic那个图片效果上做水波的区域,如果你不绘制这个矩形,将来出来的效果就会感觉有个边缘,视觉上就比较假,当然如果你有心,完全有别的方法可以来解决这个问题。

接下来,如果你刚才懒的命名标识符,就可以在这个mc里新建一个层,把刚才的那个放射性渐变的mc(会动的那个)拖入进来,位置就放到这个矩形的中间。

如果你命名了标识符,就可以直接在帧上添加以下代码:

var depth:Number = this.getNextHighestDepth();

file://获取可用层级,返回一个数字

this.attachMovie("ball", "ball"+depth, depth);

file://加载库中的放射性渐变动画。

this["ball"+depth]._x = Stage.width/2;

file://确定位置。具体用什么参数,看你的个儿喜好啦。

this["ball"+depth]._y = Stage.height/2;

最后,回到主场景,这时主场景中已经有最初制作的实例名叫pic的背景(关的博客);现在只需把刚才制作的包含矩形的mc拖入进来,把它远远的扔到一边就可以了,下面是主场景帧上的代码:

file://by 关

file://禁止动画缩放。

Stage.scaleMode = "noScale";

file://导入相关的类,死记硬背下面三个import。

import flash.display.*;

import flash.filters.*;

import flash.geom.*;

file://创建一个bitmapdata对象,大小和放射性渐变的mc相同

var bit:BitmapData = (new BitmapData(mask._width, mask._height, true));

file://zjx、zjy是渲染动画时所使用的通道,数值为1、2、4、8,对应红、绿、兰、alpha通道。我看基本可以死记硬背就好。

var zjx:Number = 1;

var zjy:Number = 2;

file://sfx、sfy这两个数据可以改变水波的强度,即图像在x轴和y轴扭曲的程度。

var sfx:Number = 10;

var sfy:Number = 20;

file://逐帧调用,你也可以用setInterval来实现,因为那个放射性渐变是动态的,而bitmap对象要模仿它的话,就必须做到动态跟踪。

this.onEnterFrame = function() {

file://把放射性渐变的动画添加给bit,使之绘制出来。

bit.draw(mask);

file://设置一个DisplacementMapFilter滤镜对象,它有使图像扭曲的功能,这里就用到了zjx、zjy等变量。

var filter:DisplacementMapFilter = (new DisplacementMapFilter(bit, new Point(), zjx, zjy, sfx, sfy, "color", 0, 0));

file://场景中实例名为pic的元件使用新创建的滤镜,因为用到onEnterFrame,所以效果是动态滴:)

pic.filters = [filter];

};

ctrl+Enter就可以测试了。

最后总结出:

1.必须有一个动态的东东做波动的样子,BitmapData.perlinNoise 类就是更深层次的波动,明天再测试。

2.有一个BitmapData对象不断的对那个波动mc进行绘制。

3.需要波动的影像采用DisplacementMapFilter滤镜类,来源是绘制波动效果的BitmapData对象。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有