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

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

  先看效果:

点击这里下载源文件

  如果你看不到,底部也有链接,还有源文件。 

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

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

  这个会动的放射性渐变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对象。

时间: 2024-09-17 15:59:19

flash8水波制作简明实例-探篇的相关文章

css3制作网页实例:点击切换不同的CSS列表

文章简介:css3制作网页实例:点击切换不同的CSS列表. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met

WPS演示制作简明课堂内容提纲

用WPS演示制作简明课堂内容提纲在制作课件时经常需要一个十分明了的课堂内容提纲,特别是历史.政治.地理和生物等科目的课件,更加需要一个图文并茂.简单明了的内容提纲.为了做到这一点,我经常会想到一些网站上的Flash图片导航栏.那么可不可以用WPS演示做到这一点呢?下面就请大家仔细看下面的教程. 效果图: 一.首先创建基本要素: 1.两个圆角矩形,对齐 2.相关图片[导入前最好使用合适的中文重命名] 3.图片对齐.大小统一 4.插入选项按钮 二.后续步骤+动画设置 5.无关图片:退出--切出 6.

使用jQuery和CSS3制作数字时钟(CSS3篇)

原文地址:http://www.helloweba.com/view-blog-273.html 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light">     <d

JavaScript语言精粹经典实例(整理篇)_javascript技巧

数据类型 JavaScript 是 弱类型 语言,但并不是没有类型,JavaScript可以识别下面 7 种不同类型的值: 基本数据类型 1.Boolean 2.Number 3.String 4.null 5.undefined 6.Symbol Object 1.Array 2.RegExp 3.Date 4.Math 5.... 可以使用 typeof 判断数据类型,操作符返回一个字符串,但并非返回的所有结果都符合预期 typeof false // "boolean" type

Destoon模板制作简明教程_php实例

对于制作Destoon的模板来说,首先需要理解两个Destoon的概念:模板(template)和风格(skin).模板存放于系统template 目录,风格(系统界面的图片.css文件)存放于系统skin目录,也就是说,template放置页面文件,skin放置样式文件. Destoon模板制作过程: 首先,把template和skin文件夹下原有的default文件夹各复制拷贝一份,同时改名为newmoban,准备在系统自带的默认模版文件基础上修改成自己的模版. 然后,修改template和

PHP实现简易blog的制作_php实例

最近,有时间看了点PHP的代码.参考PHP100教程做了简单的blog,这里面简单的记录一下. 首先是集成环境,这里选用的WAMP:http://www.wampserver.com/en/ 首先通过,phpMyAdmin创建一张blog表. 纯界面操作,过程比较简单,需要注意的是id是主键,并且设置auto_increnent 选项,表示该字段为空时自增.其它字段就比较随便了,注意类型和长度即可. 创建数据连接     在./wamp/www/blog目录下创建conn.php文件. <?ph

Flash8滤镜制作文字视觉特效(适合初学)

初学|滤镜|特效 机器中安装了Flash8,今天给大家主要学习一下滤镜的知识,制作文字特效动画,适合初学者,高手略过! 先看效果: 点击这里下载源文件 新建立Flash文档,按Ctrl+J修改文档属性: 然后使用文字工具,设置如下,输入文字: 转变为影片剪辑元件: 再第15帧插入关键帧,然后打开属性面板,设置如下滤镜: 在第30帧插入关键帧,设置滤镜: 在第45帧处插入关键帧,然后设置Alpha为0%. 最后你估计知道了,创建补间动画吧! 论坛讨论交流学习:http://www.webjx.co

Flash8轻松制作星空飞越动画特效

特效 本教程是一个适合新手入门学习Actionscript的实例教程,高手就别看了!如果你刚刚接触AS就看一下吧! 还是老规矩,先看效果和源文件. 点击这里下载源文件 首先新建一个Flash文档. 建一影片剪辑,一个白色的圆从大到小水平运动的动画:首先把圆转变为图形元件:第一帧是宽和高为10的大圆.alpha为100:第30帧是一个宽和高为1px的小圆.alpha为0. 回到主场景,将刚刚制作好的影片剪辑拖到主场景第一帧,并命名实例名为:webjx,然后在第二帧插入帧. 新建一层,在第一帧加入如

关于PS印章制作的实例教程

常看到有人写一些关于印章的制作教程,但是发现他们的做法和我都不是很一样.今天又看到论坛里有人做了一个教程, 操作简单,但是效果不好.所以我就把我自己的制作方法写下来,虽然操作上工序比较多,但是相对更为真实一点. 闲言少叙,开始进入正题.我先以"蓝色理想"为内容来做. 下面教程先看第一张图:选字. 选择适合的字是做好印的前提,因为不是所有字体都能做出好的效果来的.我们看这里有五个常见的字体,分别是: 方正小篆.汉仪粗篆.经典方篆.经典角篆.经典印篆.从这里看以看出来,其中以修长的方正小篆