免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: 在flash中怎样运用粒子？ [打印本页]
作者: chxhflash    时间: 2016-4-28 22:35     标题: 在flash中怎样运用粒子？

本帖最后由 网雨霏霏 于 2016-4-29 08:43 编辑

平时观赏swf动画，常看到漂亮的粒子效果，羡慕不已，却不知道怎样运用。在网上找到一篇用flint做粒子制作的文字效果，想模仿更换其中的文字，但怎样都弄不来，哪位指导一二。原文：
制作烟花效果的祖国万岁特效动画焰火效果：

[attach]138[/attach]

[flash]http://flashroad.joinbbs.net/attachment.php?aid=MTM4fDNlZTdlYWI4fDE3NTMwOTc1ODR8ODUwZitsRGkxSTQ3ajNOQWJ4RFd3Z3VPNTJROFJZYWlWUWtINVNNc3FZRHFXT2M%3D&request=yes&_f=.swf[/flash]
在做这个效果之前先介绍一下Flint：Flint是一个基于AS3.0的开源的粒子系统类库，让我们在不需要完全接触全部代码的情况下用自己的编码风格来轻松的扩展它，目前只有基于AS3.0的版本。
首先介绍一下基于Flint 创建焰火效果的原理，我们的效果将从屏幕的下方升到屏幕的上方，然后飘落在屏幕的下方。组成焰火的每一个小点，都是粒子系统中的一个粒子。准备素材：(1)准备1张背景图片(2)在ps中制作1张透明背景，白色字体的300*80像素文字图片，保存为png格式。
１、新建Flash文档，舞台为550*400像素，帧频30，背景颜色为黑色。然后把背景和文字图片导入到库中。右键单击文字图片，选择属性做链接，类名为logo，基类flash.display.BitmapData。２、制作一个探照灯效果的影片剪辑，大家都会就不说了。
３、把图层1改名为“探照灯”，打开库拖探照灯影片剪辑到舞台，放在合适的位置。
４、添加图层2改名为“探照灯”，拖入探照灯影片剪辑，修改一下方向，放在合适的位置。
５、添加图层3改名为“背景”，打开库拖入背景图片，右键单击图片转换为影片剪辑。在属性面板中把透明度调到70%到80%左右（视背景图片而定）。
６、添加图层4改名为as，单击第1帧，打开动作面板输入代码：
//导入类
import org.flintparticles.common.actions.*;
import org.flintparticles.common.counters.*;
import org.flintparticles.common.energyEasing.Quadratic;import org.flintparticles.common.events.EmitterEvent;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;      
//创建2D粒子发射器
var emitter:Emitter2D = new Emitter2D();
//计数器(每一秒中创建5000个粒子)
emitter.counter = new Blast(5000);
//初始化(粒子的初始位置，速度，图片和颜色)
emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00));
emitter.addInitializer( new Lifetime(8));
emitter.addInitializer( new Position(new DiscZone(new Point(0,0),8)));
var bitmapData:BitmapData = new Logo( 300, 80);
emitter.addInitializer( new Velocity( new BitmapDataZone(bitmapData, -152, -380)));
//向发射器中添加动作,让每一帧都更新粒子的位置emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Fade( 1.0, 0 ) );
emitter.addAction( new Move() );
emitter.addAction( new LinearDrag( 0.5 ) );
emitter.addAction( new Accelerate( 0, 70 ) );
emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );//定位粒子在舞台的上方
var rendererixelRenderer = new PixelRenderer( new Rectangle( 0, 0, 550, 400 ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );
renderer.addEmitter( emitter );
addChild( renderer );
emitter.x = 250;emitter.y = 300;
emitter.start();
function restart( ev:EmitterEvent ):void{
Emitter2D( ev.target ).start();
}

７、完成后保存在一个目录下，然后把附件中名为粒子库org的压缩文件解压到同一目录下(这个文件夹就是Flint粒子类库)，现在就可以测试了。美工部分大家可以做一些光景、气球放飞等效果，加入场景中，我想大家一定比我做得好。各种参数可以试着改动一下数据，再看一下效果。
作者: chxhflash    时间: 2016-4-28 22:55

我上传的flash文件怎么没有像版主的3D那样显示画面？
作者: chxhflash    时间: 2016-4-28 22:58

本帖最后由 网雨霏霏 于 2016-4-29 08:44 编辑

我按照文中所述去操作，根本做不出那效果。就是想更换那张文字图片也换不了，请版主指教！
@网雨霏霏
作者: 网雨霏霏    时间: 2016-4-29 08:44

本帖最后由 网雨霏霏 于 2016-4-29 08:49 编辑
我上传的flash文件怎么没有像版主的3D那样显示画面？
chxhflash 发表于 2016-4-28 22:55


已经帮你将帖子编辑了一下，可以实时显示flash了。
方法是：

[attach]144[/attach]

在1那里点击一下，可以在帖子中贴出附件的地址【见2 那里】
将2那里的地址剪切一下，
然后点击3那里的 Flash  ，会弹出对话框，粘贴
然后就出现2那里整行的代码了
作者: 网雨霏霏    时间: 2016-4-29 08:55

我按照文中所述去操作，根本做不出那效果。就是想更换那张文字图片也换不了，请版主指教！
@网雨霏霏 ...
chxhflash 发表于 2016-4-28 22:58


我的名字 你打错了【悄悄帮你改正了】 但是本论坛不支持@语法。一会儿我研究一下这个源码看看
作者: 网雨霏霏    时间: 2016-4-29 09:14

本帖最后由 网雨霏霏 于 2016-4-29 09:25 编辑

我下载了你上传的附件，想到了一个细节，不知道你处理的怎么样。该细节是：flash调用第三方类库时，需要事先在flash内做好设置。
除非你每次制作作品时都将整个类库都复制粘贴到你的作品内，这样的话，不用事先设置【但太繁琐了，推荐先设置好，一劳永逸】


下面给出设置的方法：
【1】下载并解压第三方类库
你的已经搞定了，不过你给的附件是将三个文件夹分别压缩的。不知道在你的机器上，三个文件夹的位置关系如何。
它们的正确关系是【如果你下载的是官方给的压缩包，无需对下面所写的苦恼】：
（1）首先在本地硬盘某个位置【路径内最好别出现中文，而是使用纯英文的路径】新建个文件夹
比如说，我的设置是在D盘的swf文件夹内存储所有的与flash有关的软件
我在该文件夹下新建了一个名为ASClasses的文件夹，用于存放第三方类库
然后在该文件夹下再建立几个文件夹，就是存放不同的类库的

因为本例的类库是Flint开发的，我就新建一个名为FlintParticles的文件夹，如下图所示：
[attach]146[/attach]


那么，我说的新建个文件夹，指的就是这个FlintParticles文件夹了



（2）然后，将你解压的第三方类库文件放入这个文件夹内。
[attach]145[/attach]

首先是org文件夹，如上图
然后是flintparticles文件夹，如下图
[attach]148[/attach]

最后是三个文件夹，如下图
[attach]149[/attach]



【如果你是直接下载官方的类库，解压后，三个文件夹一定位于org\flintparticles文件夹内，无需你额外设置】
本步骤内的文件夹的名字，以及路径的依存关系必须完全与我这里写的一致，否则测试影片时就会报错！
作者: 网雨霏霏    时间: 2016-4-29 09:36

本帖最后由 网雨霏霏 于 2016-4-29 09:39 编辑

【2】打开你的flash软件进行设置
1、如下图，打开首选参数面板
[attach]150[/attach]
2、如下图，进行操作：
[attach]151[/attach]

①切换到AS
②进入AS3设置
③点击+号按钮，就会出现⑤
④点击“浏览到路径”按钮，会弹出对话框（截图中没有出现），选择楼上我们定义好的新建个文件夹所在的路径
⑥点击确定按钮
作者: 网雨霏霏    时间: 2016-4-29 09:41

上述2步都设置好以后
你给出的代码应该就可以正常运行了

我研究研究去
作者: 网雨霏霏    时间: 2016-4-29 09:57

测试了一下，有如下的报错提示：[attach]152[/attach]


你给出的教程中没有出现renderer这个对象，你翻看一下文章的来源，在代码区域之外搜索一下renderer
看看是否你遗漏了
作者: 网雨霏霏    时间: 2016-4-29 10:09

反编译了一下你给的swf文件 发现 代码中缺少了如下一行：var renderer:PixelRenderer

加上后，还是有问题。醉了。于是将你的swf文件反编译的代码都放入自己的作品内：
  1. //导入类
  2. import org.flintparticles.common.actions.*;
  3. import org.flintparticles.common.counters.*;
  4. import org.flintparticles.common.energyEasing.Quadratic;
  5. import org.flintparticles.common.events.EmitterEvent;
  6. import org.flintparticles.common.initializers.*;
  7. import org.flintparticles.twoD.actions.*;
  8. import org.flintparticles.twoD.emitters.Emitter2D;
  9. import org.flintparticles.twoD.initializers.*;
  10. import org.flintparticles.twoD.renderers.*;
  11. import org.flintparticles.twoD.zones.*;   
  12. var renderer:PixelRenderer
  13. var bitmapData:BitmapData;
  14. //创建2D粒子发射器
  15. var emitter:Emitter2D = new Emitter2D();
  16. //计数器(每一秒中创建5000个粒子)
  17. this.emitter = new Emitter2D();
  18. emitter.counter = new Blast(5000);
  19. emitter.addInitializer(new ColorInit(0xFFFF3300, 0xFFFFFF00));
  20. emitter.addInitializer(new Lifetime(8));
  21. emitter.addInitializer(new Position(new DiscZone(new Point(0, 0), 8)));
  22. bitmapData = new Logo(300, 80);
  23. emitter.addInitializer(new Velocity(new BitmapDataZone(this.bitmapData, -152, -380)));
  24. emitter.addAction(new Age(Quadratic.easeIn));
  25. emitter.addAction(new Fade(1, 0));
  26. emitter.addAction(new Move());
  27. emitter.addAction(new LinearDrag(0.5));
  28. emitter.addAction(new Accelerate(0, 70));
  29. emitter.addEventListener(EmitterEvent.EMITTER_EMPTY, restart, false, 0, true);
  30. renderer = new PixelRenderer(new Rectangle(0, 0, 550, 400));
  31. renderer.addFilter(new BlurFilter(2, 2, 1));
  32. renderer.addFilter(new ColorMatrixFilter([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0.96, 0]));
  33. renderer.addEmitter(emitter);
  34. addChild(renderer);
  35. emitter.x = 275;
  36. emitter.y = 300;
  37. emitter.start();
  38. function restart(event:EmitterEvent) : void
  39. {
  40. Emitter2D(event.target).start();
  41. }
复制



就出来效果了：
[flash]http://flashroad.joinbbs.net/attachment.php?aid=MTUzfGRhYzEzMmEwfDE3NTMwOTc1ODR8ODUwZitsRGkxSTQ3ajNOQWJ4RFd3Z3VPNTJROFJZYWlWUWtINVNNc3FZRHFXT2M%3D&request=yes&_f=.swf[/flash]


但是我的字看不清，也不知道怎么回事   有时间再研究研究吧
作者: 网雨霏霏    时间: 2016-4-29 10:12

[attach]154[/attach]
这是我的fla文件，还有自己制作的png透明图片

注意：我将类库按照上面的方法设置到自己电脑所在的路径了
你如果设置的和我不一样，测试的时候会报错。
作者: 网雨霏霏    时间: 2016-4-29 10:31

把文字的字体修改为 微软雅黑  再调节几个数字参数，效果好多了：[flash]http://flashroad.joinbbs.net/attachment.php?aid=MTU1fGY1NTk3ODBlfDE3NTMwOTc1ODR8ODUwZitsRGkxSTQ3ajNOQWJ4RFd3Z3VPNTJROFJZYWlWUWtINVNNc3FZRHFXT2M%3D&request=yes&_f=.swf[/flash]
作者: chxhflash    时间: 2016-4-29 14:44

本帖最后由 chxhflash 于 2016-4-29 14:54 编辑

回复 12# 网雨霏霏 多谢热心指导！总算成功了。
[flash]http://flashroad.joinbbs.net/attachment.php?aid=MTY1fGEwMzVmNDRhfDE3NTMwOTc1ODR8ODUwZitsRGkxSTQ3ajNOQWJ4RFd3Z3VPNTJROFJZYWlWUWtINVNNc3FZRHFXT2M%3D&request=yes&_f=.swf[/flash]
作者: 网雨霏霏    时间: 2016-4-29 17:19

回复  网雨霏霏 多谢热心指导！总算成功了。
chxhflash 发表于 2016-4-29 14:44

不客气能收货如此优秀的第三方类库，我也觉得很值呢。虽然网络上有好多



欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/) Powered by Discuz! 7.2