（转） [Flash/Flex] 用柏林噪音和滤镜制作翻腾的火焰效果----Flash AS3效应

最新推荐文章于 2018-08-22 17:02:00 发布
最新推荐文章于 2018-08-22 17:02:00 发布
阅读量172 收藏
点赞数

下图展示的是通过柏林噪声和一些滤镜制作的火焰效果。这个效果是从舞台底部燃起的熊熊烈火。这个效果使用了BitmapData里的perlinNoise方法，以及ColorMatrixFilter和DisplacementMapFilter两个滤镜，点击截图下面的链接，可以在新窗口中查看运行的效果。

 

http://www.flashandmath.com/flashcs5/fire/fire.html

 

http://files.cnblogs.com/wonderKK/fire.zip

点击上面的链接下载完整的源文件，源码中已做好注释，也可以在源码的基础上轻松的自定义效果。

 

效果是如何实现的

 

效果实现的基本思路是通过柏林噪声实现扭曲而不是柏林噪声显示。柏林噪声扭曲效果随着时间平滑的移动。在AS3Flash: Low CPU Clouds Animation - Perfect for Mobile effect这个效果中，我们同样使用了这个思想。在ScrollingPerlinNoise类中，我们创建了一个准确的柏林噪声扭曲效果，然后利用bitmap复制方法随着时间平滑的移动这个扭曲效果，这一点跟clouds效果里一样。

 

下面一步步介绍了火焰的制作过程，不过你也可以打开源文件，体验一下效果，这样目的会更加明确。在main.fla中的onEnter方法中，可以看到绘制和滤镜的每个步骤，这些也已做好注释。

 

下面是火焰效果创建的详细步骤：

 

 

· ScrollingPerlinNoise类的两个实例(我们叫做“clouds”)用来创建火焰。它们是随时间移动的灰度的柏林噪声。这两朵clouds会以不同的方向进行移动，来产生分散的移动的效果。实际上一朵clouds也是可以的，但是用两朵clouds实现的火焰效果会更好。

 

· 在火焰中绘制一个用渐变填充的半椭圆形，让它的顶部更加圆润，而且平滑的淡出。

 

· 现在给灰度的图片加上火的颜色。这一点我们通过BitmapData的palleteMap方法来实现，这和我们在中AS3WoodTexture Class - Apply Wood Texture to Any Display Object example实现木质纹理的方法是一样的。但是在这个效果中我用了一个比较聪明的方法，用ColorMatrixFilter滤镜将颜色转换成红黄白。ColorMatrixFilter在颜色通道值基础上，与它的multipliers和offsets属性进行计算得到最终的颜色值。深灰色转换成红色；灰色转换成黄色，因为红色和绿的混合；浅灰色转换成白色，因为颜色通道里的值都已经被加到最大值255了。

 

· 给clouds填充完颜色红，我为它添加了模糊效果，特别是在y方法模糊值更大，整页可以将颜色延伸到整个图片。

 

· 然后使用DisplacementMapFilter扭曲火焰，让效果更加逼真。DisplacementMapFilter应用于另外一个ScrollingPerlinNoise实例中。因为clouds的不断移动，扭曲效果会随时间不断变化。

 

· 最后，再加另外一个小小的模糊给火焰效果做一下润色。

 

绘制和滤镜的步骤看起来非常复杂，但是它只是诸多滤镜和柏林噪声试验效果之一，试着修改一下源文件，看看你能否发现其他更好的效果。

原文链接：http://www.flashandmath.com/flashcs5/fire/index.html

weixin_33725807
关注
柏林噪声生成
12-01
柏林噪声C++类，结构清晰，只有一个头文件和一个CPP文件
[转] [Flash/Flex] 使用Flare3D来实现Flash 3D的推箱子游戏原型---纹理
03-22
这篇教程主要介绍如何使用Flare3D在Flash/Flex环境中创建一个3D推箱子游戏的原型，重点关注3D纹理的应用。Flare3D是一个强大的工具，它为Flash开发者提供了将2D内容转换为3D场景的能力，使得在Flash平台上开发复杂的...
柏林噪声
weixin_30888413的博客
08-22 384
柏林噪声是一个非常强大算法，经常用于程序生成随机内容，在游戏和其他像电影等多媒体领域广泛应用。 转载于:https://www.cnblogs.com/panchanggui/p/9518850.html...
[转]as3.0 用代码设置“调整颜色”滤镜
AS3
07-21 247
[url=http://bbs.9ria.com/viewthread.php?tid=88034&extra=page%3D1%26amp%3Borderby%3Ddateline%26amp%3Bfilter%3D2592000]http://bbs.9ria.com/viewthread.php?tid=88034&extra=page%3D1%26amp%3Borderby...
收集几个AS3频谱代码SoundMixer.ComputeSpectrum()
帆软爱好者的专栏
10-12 2427
各大音乐社区api接口（MP3&LRC）   as3 频谱代码一段 收集几个AS3频谱代码SoundMixer.ComputeSpectrum()   2010-08-10 19:15:18|  分类： ActionScript |  标签：
AS3.0实现图像的扭曲
weixin_30883777的博客
05-19 264
1 import flash.display.Sprite; 2 import flash.display.Loader; 3 import flash.net.URLRequest; 4 import flash.events.Event; 5 import flash.display.Bitmap; 6 import flash.display.BitmapDat...
as3-parse-xlsx.zip_FlashMX/Flex源码_FlashMX_
08-11
"FlashMX/Flex源码"提示我们这个项目可能使用了Adobe Flash Professional MX或者Flex SDK来开发，这两个工具都支持AS3编程。 在描述中，“AS3解析Excel文件（xlsx）”指出了主要的技术点，即使用AS3语言处理xlsx...
new-media.zip_FlashMX/Flex源码_FlashMX_
08-11
描述中的“有一个视频很好很强大”可能指的是压缩包内包含一个具有显著特性的视频文件，可能是使用Flash MX或Flex技术制作的。这样的视频可能包含高级动画效果、交互功能或者复杂的媒体集成，展示了Flash MX或Flex的...
source-archive.zip_FlashMX/Flex源码_Others_
08-10
"FlashMX/Flex源码"表明这是与Flash MX和Flex相关的编程资源，"Others"可能意味着除了核心的as3term源码外，还可能包含其他辅助文件，如文档、示例代码或者构建脚本等，这些都可能对理解和使用as3term有所帮助。...
Rush_hou-Fabio_Ma-12265.zip_FlashMX/Flex源码_FlashMX_
08-11
"Rush Hou - Fabio Ma Flash Game Source Code"这一资源，正是基于Flash MX/Flex开发的游戏源代码，它为我们揭示了早期网络互动游戏的制作内幕，对于学习和研究Flash游戏开发具有宝贵的参考价值。 源代码是程序的...
perlin noise 柏林噪声
04-07
Perlin噪声 ( Perlin noise )指由Ken Perlin发明的自然噪声生成算法 。
ps无缝纹理生成滤镜(AlienSkinEyeCandyTextures)v5.5官方中文版
08-07
AlienSkin EyeCandy Textures是AlienSkin出品的一款PS无缝纹理生成滤镜，这款滤镜可以帮助设计师制作照片的材质效果，包括有蛇皮、皮草、砖块、石头、木质等。图形设计人员、网页开发者或者是3D制作人员可以快速从中创建自己需要的背景、皮肤、无缝砖等等，提高工作效率。 功能介绍：Eye Candy 5: Textures 包含了超过200种预设的常用效果，并为此附加了一个新
perlin-noise:一个简单的实现一个柏林噪声函数用于创建虚拟数据
07-01
柏林噪声 用于创建模拟数据的 Perlin 噪声函数的简单实现。
AS3.0歌词同步频谱原码
03-07
package { import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.SoundMixer; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.Event; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.utils.ByteArray; import flash.system.System; import flash.net.*; import flash.ui.*; import flash.system.*; public class Main extends Sprite { private var spectrum:Sprite; private var sound:Sound; private var schannel:SoundChannel; private var lrcLoader:URLLoader; private var info_txt:TextField; private var id3_txt:TextField; private var byteArray:ByteArray; private var lrcArray:Array; public function Main() { init(); } //////////////////////////////////////////////////////////////////// ////// 初始化 ////// ////////////////////////////////////////////////////////////////// private function init():void { System.useCodePage = true; Security.allowDomain("*"); sound = new Sound ; sound.load(new URLRequest("醉酒歌.mp3")); schannel = sound.play(); ////////////////////////////////////////////////// lrcLoader = new URLLoader ; lrcLoader.load(new URLRequest("《醉酒歌》.lrc")); /////////////////////////////////////////////////; info_txt = new TextField ; info_txt.height = 20; info_txt.y = 100; info_txt.selectable = false; info_txt.background = true; info_txt.backgroundColor = 0xFF9900; info_txt.defaultTextFormat = getFormat(); this.addChild(info_txt); id3_txt = new TextField ; id3_txt.width = 300; id3_txt.selectable = false; id3_txt.defaultTextFormat = getFormat(); this.addChild(id3_txt); /////////////////////////////////////////////////; spectrum = new Sprite ; spectrum.x = 10; spectrum.y = 250; this.addChild(spectrum); ////////////////////////////////////////////////; byteArray = new ByteArray ; lrcArray = new Array ; addEvents(); } //////////////////////////////////////////////////////////////////// ////// 设置文本格式 ////// ////////////////////////////////////////////////////////////////// private function getFormat():TextFormat { var textFmt:TextFormat = new TextFormat ; textFmt.align = TextFieldAutoSize.LEFT; textFmt.font = "Arial"; textFmt.color = 0x000000; textFmt.size = 14; return textFmt; } //////////////////////////////////////////////////////////////////// ////// 添加事件 ////// ////////////////////////////////////////////////////////////////// private function addEvents():void { sound.addEventListener(Event.SOUND_COMPLETE,soundCompleteHandler); sound.addEventListener(Event.ID3,id3InfoHandler); lrcLoader.addEventListener(Event.COMPLETE,loadCompleteHandler); stage.addEventListener(Event.ENTER_FRAME,soundPlayingHandler); this.addEventListener(Event.ENTER_FRAME,creatSpectrum); } private function soundCompleteHandler(event:Event):void { stage.removeEventListener(Event.ENTER_FRAME,soundPlayingHandler); this.removeEventListener(Event.ENTER_FRAME,creatSpectrum); } private function id3InfoHandler(event:Event):void { var tar:Sound = event.target as Sound; id3_txt.text = "歌名:" + tar.id3.songName + "\n" + "歌手:" + tar.id3.artist + "\n" + "专辑:" + tar.id3.album; } //////////////////////////////////////////////////////////////////// ////// 读取歌词信息 ////// ////////////////////////////////////////////////////////////////// private function loadCompleteHandler(event:Event):void { var lrclist:String = event.target.data; var lrcArr:Array = lrclist.split("\n"); var reg:RegExp = /\[[0-5][0-9]:[0-5][0-9].[0-9][0-9]\]/g; for (var i:int = 0; i < lrcArr.length; i++) { var lrcStr:String = lrcArr[i]; var len:int = lrcStr.match(reg).length; var timeArr:Array = lrcStr.match(reg); var lyrics:String = lrcStr.substr((len * 10)); for (var t:int = 0; t < timeArr.length; t++) { var timeS:String = timeArr[t]; var timeN:Number = (((Number(timeS.substr(1,2)) * 60) + Number(timeS.substr(4,5))) * 1000); var object:Object = new Object ; object.timer = timeN; object.lrc = lyrics; lrcArray.push(object); } } lrcArray.sort(compare); } ////////////////////////////////////////////////////////////////////; ////// 歌词歌曲同步 ////// /////////////////////////////////////////////////////////////////// private function soundPlayingHandler(event:Event):void { for (var i:int = 1; i < lrcArray.length; i++) { if (schannel.position < lrcArray[i].timer) { info_txt.text = "歌词:" + lrcArray[i - 1].lrc; break; } info_txt.text = "end:" + lrcArray[lrcArray.length - 1].lrc; } info_txt.width = info_txt.textWidth + 5; } //////////////////////////////////////////////////////////////////// ////// 创建频谱 ////// /////////////////////////////////////////////////////////////////// private function creatSpectrum(event:Event):void { SoundMixer.computeSpectrum(byteArray,true); spectrum.graphics.clear(); spectrum.graphics.lineStyle(0,0x666666); spectrum.graphics.beginFill(0x666666); spectrum.graphics.moveTo(0,0); for (var i:int = 0; i < 256; i += 5) { var n:Number = byteArray.readFloat() * 100; spectrum.graphics.drawRect(i,0,3, - n); } } ////////////////////////////////////////////////////////////////////; ////// 比较函数 ////// /////////////////////////////////////////////////////////////////// private function compare(pareA:Object,pareB:Object):int { if (pareA.timer > pareB.timer) { return 1; } if (pareA.timer < pareB.timer) { return -1; } return 0; } } }
AS3 波纹实例
03-30
AS3 波纹实例,Flash 生成波纹效果
柏林噪声产生火焰等纹理
凌风探梅的专栏
10-20 2085
from： http://blog.csdn.net/jia20003/article/details/7220740 柏林噪声是一种特殊的随机噪声，即对于每个给定的值产生的随机数是唯一的，但是不同的 值产生不同的随机数。关于柏林噪声更详细的解释可以参考这里： http://freespace.virgin.net/hugo.elias/models/m_perlin.h
libgdx, 随机发生器，高斯分布，柏林噪声
04-21 616
 随机发生器：与自 高斯分布，柏林噪声
flash as3的文字描边效果和投影效果
不忘初心 方得始终
11-25 1542
找了很多资料测试 写出了特效的基本语法 //AS3描边文字效果演示 var text:TextField = new TextField(); text.text = "AS3描边文字效果演示"; text.textColor = 0XFF5500; var text.filters = new Array( new GlowFilter(0X000000,1,2,2,255)        );
利用Perlin nosie 完成（PS 滤镜—— 分成云彩）
Matrix-11
03-20 4125
%%%% Cloud %%%% 利用perlin noise生成云彩 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); Image=imread('4.jpg'); Image=double(Image); [row,col,layer]=size(Ima
CSS3 box-flex弹性盒模型布局详解与实例
需要注意的是，尽管box-flex在早期的浏览器中有很好的支持，但为了向后兼容和遵循最新的标准，现在更推荐使用`flex`属性及其相关的子属性，如`flex-grow`、`flex-shrink`和`flex-basis`。这些新的属性在现代浏览器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值