×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 13218|回复: 48

[AS] 祖国万岁

  [复制链接]
发表于 2009-9-21 16:35:18 | 显示全部楼层 |阅读模式
本帖最后由 cao4811 于 2009-9-22 06:06 编辑

焰火效果

在做这个效果之前先介绍一下Flint:
Flint是一个基于AS3.0的开源的粒子系统类库,让我们在不需要完全接触全部代码的情况下用自己的编

码风格来轻松的扩展它,目前只有基于AS3.0的版本。

首先介绍一下基于Flint 创建焰火效果的原理,我们的效果将从屏幕的下方升到屏幕的上方,然后飘落在

屏幕的下方。组成焰火的每一个小点,都是粒子系统中的一个粒子。

准备素材:
(1)准备1张背景图片
(2)在ps中制作1张透明背景,白色字体的300*80像素文字图片,保存为png格式。

1、新建Flash文档,舞台为550*400像素,帧频30,背景颜色为黑色。然后把背景和文字图片导入到库中。右键单击文字图片,选择属性做链接,类名为logo,基类flash.display.BitmapData。
2、制作一个探照灯效果的影片剪辑,大家都会就不说了。
3、把图层1改名为“探照灯”,打开库拖探照灯影片剪辑到舞台,放在合适的位置。
4、添加图层2改名为“探照灯”,拖入探照灯影片剪辑,修改一下方向,放在合适的位置。
5、添加图层3改名为“背景”,打开库拖入背景图片,右键单击图片转换为影片剪辑。在属性面板中把

透明度调到70%到80%左右(视背景图片而定)。
6、添加图层4改名为as,单击第1帧,打开动作面板输入代码:
  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. //创建2D粒子发射器
  13. var emitter:Emitter2D = new Emitter2D();
  14. //计数器(每一秒中创建5000个粒子)
  15. emitter.counter = new Blast(5000 );
  16. //初始化(粒子的初始位置,速度,图片和颜色)
  17. emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00 ) );
  18. emitter.addInitializer( new Lifetime( 8 ) );
  19. emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), 8 ) ) );
  20. var bitmapData:BitmapData = new Logo( 300, 80);
  21. emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -152, -380 ) ) );                       
  22. //向发射器中添加动作,让每一帧都更新粒子的位置
  23. emitter.addAction( new Age( Quadratic.easeIn ) );
  24. emitter.addAction( new Fade( 1.0, 0 ) );
  25. emitter.addAction( new Move() );
  26. emitter.addAction( new LinearDrag( 0.5 ) );
  27. emitter.addAction( new Accelerate( 0, 70 ) );

  28. emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );
  29. //定位粒子在舞台的上方
  30. var renderer:PixelRenderer = 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 = 250;
  36. emitter.y = 300;
  37. emitter.start( );
  38.                
  39. function restart( ev:EmitterEvent ):void
  40. {
  41.         Emitter2D( ev.target ).start();
  42. }
复制代码
7、完成后保存在一个目录下,然后把附件中名为org的压缩文件解压到同一目录下(这个文件夹就是

Flint粒子类库),现在就可以测试了。
 美工部分大家可以做一些光景、气球放飞等效果,加入场景中,我想大家一定比我做得好。各种参数

可以试着改动一下数据,看一下效果。

本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=271482
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +8 热心度 +2 收起 理由
zctmh0336 + 8 + 2 好教程

查看全部评分

发表于 2009-9-21 18:41:19 | 显示全部楼层
酷素材
有点没弄明白,文字图片好像没做交代啊.
回复 支持 反对

使用道具 举报

发表于 2009-9-21 18:42:35 | 显示全部楼层
用FL10.0做的吧.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-9-22 06:09:54 | 显示全部楼层
2# spring027
谢谢提醒,文字的处理以补充进去。
回复 支持 反对

使用道具 举报

发表于 2009-9-24 09:59:50 | 显示全部楼层
酷素材
我做的时候提示:
1136: 参数个数不正确。应为 0 个。
1067: Logo 类型值的隐式强制指令的目标是非相关类型 flash.display:BitmapData。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-9-24 17:09:03 | 显示全部楼层
酷素材
5# nxasd
给你发上去掉背景图片的源文件,看看是否能打开。文字图片有一个链接:右键单击文字图片,选择属性做链接,类名为Logo,基类flash.display.BitmapData。(教程已经补充上了)估计是这个问题。
下面的代码是复制下来的不会有错误:
  1. import org.flintparticles.common.actions.*;
  2. import org.flintparticles.common.counters.*;
  3. import org.flintparticles.common.energyEasing.Quadratic;
  4. import org.flintparticles.common.events.EmitterEvent;
  5. import org.flintparticles.common.initializers.*;
  6. import org.flintparticles.twoD.actions.*;
  7. import org.flintparticles.twoD.emitters.Emitter2D;
  8. import org.flintparticles.twoD.initializers.*;
  9. import org.flintparticles.twoD.renderers.*;
  10. import org.flintparticles.twoD.zones.*;
  11. //创建2D粒子发射器
  12. var emitter:Emitter2D = new Emitter2D();
  13. //计数器(每一秒中创建5000个粒子)
  14. emitter.counter=new Blast(5000);
  15. //初始化
  16. emitter.addInitializer( new ColorInit(0xFFFF3300 + 0xFFFFFF00) );
  17. emitter.addInitializer( new Lifetime( 6 ) );
  18. emitter.addInitializer( new Position( new DiscZone( new Point(0, 0 ), 10 ) ) );
  19. var bitmapData:BitmapData=new Logo(300,80);
  20. emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -152, -380 ) ) );
  21. emitter.addAction( new Age( Quadratic.easeIn ) );
  22. emitter.addAction( new Fade( 1.0, 0 ) );
  23. emitter.addAction( new Move() );
  24. emitter.addAction( new LinearDrag( 0.5 ) );
  25. emitter.addAction( new Accelerate( 0, 70 ) );
  26. emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );
  27. var renderer:PixelRenderer=new PixelRenderer(new Rectangle(0,0,550,400));
  28. renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
  29. 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 ] ) );
  30. renderer.addEmitter( emitter );
  31. addChild( renderer );
  32. emitter.x=275;
  33. emitter.y=400;
  34. emitter.start( );
  35. function restart( ev:EmitterEvent ):void {
  36.         Emitter2D(ev.target).start();
  37. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2009-9-24 20:59:38 | 显示全部楼层
本帖最后由 zctmh0336 于 2009-9-24 22:26 编辑

我原来错在把文字转换为影片剪辑,现在改好了,不过显得光秃秃的没有制造气氛。
我做探照灯光的时候,用了任意变形工具,使得灯光扫射,用形状间补和传统间补,都是怪样子,只好罢了。
谢谢你!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 1金币 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-9-25 07:01:19 | 显示全部楼层
焰火出了背景,把emitter.y = 300;调到400至500看一下。
回复 支持 反对

使用道具 举报

发表于 2009-9-25 08:41:50 | 显示全部楼层
本帖最后由 zctmh0336 于 2009-9-25 11:10 编辑

改了尺寸,现在好了,谢谢!只是费了一早晨的功夫,也没弄好探照灯。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-9-25 10:51:28 | 显示全部楼层
9# nxasd

探照灯效果发给你

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2009-9-25 14:00:43 | 显示全部楼层
本帖最后由 nxasd 于 2009-9-25 14:01 编辑

我只做了探照灯,就是成了这样,不只是这个flash,这问题一直困扰着我,那个翻动的文字,也是间补动画以后,图片变形,图片的位置会移动,其实是不应该移动的。
帮我看看,问题出在哪里。我用的是cs4.

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-9-25 15:40:58 | 显示全部楼层
11# nxasd


给你修改了一下,发给你,cs4制作补间动画你好像没有完全掌握,找教程看一下。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2009-9-25 16:31:28 | 显示全部楼层
你做的间补使得探照灯光连续运动,可我的间补,是前49帧探照灯光不动,到第50帧才突然动了。
回复 支持 反对

使用道具 举报

发表于 2009-9-25 16:45:34 | 显示全部楼层
13# nxasd
用CS4软件做补间不熟的话,用传统补间。
回复 支持 反对

使用道具 举报

发表于 2009-9-25 21:23:07 | 显示全部楼层
我看了flash  cs4的帮助,对比你做的探照灯,我修改了自己的探照灯,我也学着做属性关键帧,可是还后面总有一条黑线,后来我复制、粘贴1——49帧,然后再删除,就和你做的一样了,我总觉得我这样做不规范。
你的关键帧是这样的:

我的关键帧是这样的:
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345