Flash AS3制作火苗跳动的gif动画教程
发布时间：2015-03-17 16:51:27 作者：佚名 
我要评论
我要评论这篇教程是向程序员之家的朋友介绍Flash AS3制作火苗跳动的gif动画方法，教程制作出来的火苗动画非常的漂亮，难度不是很大，主要运用了Flash AS3代码。好了，下面我们一起来学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
这个例子做了有段时间了.但是也跟那时候发的AS2的纯代码火效果是一样的,也是残次品.
本次例子没能做到减少系统资源的能力.刚做完这个效果以后.也查找了一些粒子方面的资料.看到了很多高人写的粒子可以使用上千个粒子却不占用更多的系统资源,高人.但是,如果能把那算法公布我会更感谢你.
其实,FLASH AS的作品无非具备两点就可以.
1.对AS函数的了解.
2.肯专研的精神.
FLASH世界里没有做不到的东西.只有你想不到.你不想做的东西.这次的代码发出来.非常希望有更多的朋友去完善.共享精神的目的就是这个.共同进步.一个人的努力只能局限在自己的世界里.当把所有人的努力聚集起来的时候才是FLASH繁荣时期.这就是为什么多年前的AS程序员各各都强悍的原因.那时候的FLASH8还是很热闹的.
希望这个帖子能让更多的朋友发表自己的看法.我以后要回到FLASH世界,希望更多的朋友能帮我.欢迎FLASH 爱好者加我QQ共同成长
废话不说了.拿出东西.
本次程序同入门级下雪效果一样,使用了2个AS文件以及一个FLA文件,两个AS文件分别是mack_fire.as 火花粒子制作文件,fire.as 火花移动控制文件,以及fire.fla场景文件.
代码如下：
mack_fire.as：
/***************Ant QQ:305033389******************/
/*************请支持原创，请开源代码****************/
/**********请让更多的AS爱好者有资料学习*************/
/********本作品是我学习作品，并非完善作品***********/
package {
import flash.geom.Matrix;//颜色渐变类库倒入
import flash.display.Sprite;//Sprite 类是基本显示列表构造块
import flash.display.GradientType;//Graphics 类包含一组可用来创建矢量形状的方法
public class mack_fire extends Sprite { //本类为火花原形类
private var fire:Sprite;
var myMatrix:Matrix;
public function mack_fire(){
fire = new Sprite();//初始化一个影片剪辑
myMatrix = new Matrix();//需要用到的FLASH自带类，在这里这个类的作用是制作火花粒子的颜色渐变效果
var boxWidth:int = 16;//火花粒子颜色渐变宽高设置，下面是高度
var boxHeight:int = 16;
var boxRotation:uint = Math.PI/2;//颜色渐变使用的变量
var tx:int = 0;//影片剪辑的初试坐标
var ty:int = 0;
myMatrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);//下面开始是颜色付值部分，详细请查阅createGradientBox的具体用法
var type:String = GradientType.RADIAL;
var myColors:Array = [0xFFFF00, 0xFFFF00];//颜色渐变，白色到白色
var myAlphaS:Array = [1, 0];//透明度从，透明到不透明
var myRalphaS:Array = [0, 255];
var spreadMethod:String = "pad";
var interp:String = "rgb";
var focalPtRatio:Number = 0;
fire.graphics.beginGradientFill(type, myColors,myAlphaS,myRalphaS, myMatrix, spreadMethod, interp, focalPtRatio);//这里请参考手册中关于beginGradientFill来理解
fire.graphics.drawCircle(8, 8, 8);//制作一个圆形，半径和中心点坐标，具体可以参考drawCircle
addChild(fire);
}
}
}
fire.as：
/***************Ant QQ:305033389******************/
/*************请支持原创，请开源代码****************/
/**********请让更多的AS爱好者有资料学习*************/
/********本作品是我学习作品，并非完善作品***********/
package {
import flash.display.MovieClip;
import flash.events.EventDispatcher;
import flash.events.Event;
import flash.display.BlendMode;
import flash.filters.GlowFilter;
import flash.geom.ColorTransform;
public class fire extends MovieClip {
private var fires:mack_fire;
private const maxBalls:int = 60;//火花数量
private const Mc_x:int = stage.stageHeight/2;//起火开始X坐标
private const Mc_y:int = stage.stageHeight/2;//+stage.stageHeight/4;//起火开始Y坐标
private const Mc_more:int = 1;//顶点，移动和透明度的顶点，1为完全不透明或没有缩放比例，AS3中以1做为顶点，AS2中是100
private const McY:int = 1;//向上移动速度
private var i=1;//记数变量
private var obj_scal:Array=new Array();//缩放变量保存数组
private var obj_fast:Array=new Array();//移动速度变量保存数组
private var obj_action:Array=new Array();//横向移动速度更改变量
private var obj_n:Array=new Array();//横向移动方向控制变量
private var obj_s:Array=new Array();//横向移动速度控制变量
private var obj_gs:Array=new Array();
private var obj_g:Array=new Array();//颜色控制变量
public function fire() {
addEventListener(Event.ENTER_FRAME,fire_mv);
}
public function fire_mv(event:Event):void{
var k = Math.random();//制造随即数字，这个变量决定火花的移动距离，已经移动范围
var scale:Number = k ? k : 1;//制造一个随即数字，这个数字要小于1，大于0
fires = new mack_fire();//新元件创建
fires.scaleX = fires.scaleY = fires.alpha = scale;//元件的缩放以及透明度设置，根据上面的随即数设置
obj_g[i] = 100;
obj_gs[i] = (1-scale+.2)*3;//定义一个新的数组元素，用处在更改元件颜色
obj_fast[i] = Math.floor(scale*2);//纵向移动速度主变量
obj_action[i]=(Math.random()>0.5)?1:-1;//纵向移动 方向主变量
obj_scal[i] = 1 - obj_fast[i]/10;//对于进行中火花的缩放进行控制
obj_n[i] = obj_s[i] = 1;
fires.x= Mc_x;//定义火花产生的横坐标
fires.y= Mc_y;//定义火花产生的纵坐标
fires.blendMode = BlendMode.ADD;//这部分是纯代码火花的重点，颜色叠加。让火花和火花之间看起来更圆滑。没有这个部分，火的效果根本不成立
fires.name = "fire"+i;//定义一个火花的名字，在下面通过getChildByName来使用。这是笨方法。记得以前有朋友不用定义也可以使用的。
addChild(fires);
for (var n:int = 1; n<maxBalls; ++n){
var m=getChildByName("fire"+n);//使用上面定义的火花影片剪辑
if(m){
var colorInfo:ColorTransform = m.transform.colorTransform;//定义颜色控制器
var xx=obj_gs[n]*2;
obj_g[n] -= Math.ceil(xx);
if(obj_g[n] < 10) obj_g[n]="00";//更改颜色，这部分就是为什么黄色的影片剪辑变成红色的理由
var rgbs = "0xff"+obj_g[n]+"00";//转义为字符串，这部分我是用最傻的办法来做的 ，实在是不了解AS3。请高手多指导
colorInfo.color = rgbs;
m.transform.colorTransform = colorInfo;
m.y -= 1-obj_s[n]+.4;//向上移动
m.x += obj_fast[n]*obj_action[n]*obj_n[n]*obj_s[n];//进行横向移动
m.scaleX += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行横向缩放
m.scaleY += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行纵向缩放
m.alpha += .1 *obj_n[n]*obj_s[n];//进行透明度设置
if(m.scaleX >= Mc_more){;
obj_n[n] = -1;//横向反方向移动
obj_s[n] = .2;//横向移动速度减缓
};
if(m.alpha >= Mc_more){ m.alpha = Mc_more;}else if(m.alpha <= Math.random()*.1){ removeChildAt(m);}//如果透明度高于或者底于指定数值，进行操作
}
}
if(i>=maxBalls){i=0;}
++i;
}
}
}
本次例子没能做到减少系统资源的能力.刚做完这个效果以后.也查找了一些粒子方面的资料.看到了很多高人写的粒子可以使用上千个粒子却不占用更多的系统资源,高人.但是,如果能把那算法公布我会更感谢你.
其实,FLASH AS的作品无非具备两点就可以.
1.对AS函数的了解.
2.肯专研的精神.
FLASH世界里没有做不到的东西.只有你想不到.你不想做的东西.这次的代码发出来.非常希望有更多的朋友去完善.共享精神的目的就是这个.共同进步.一个人的努力只能局限在自己的世界里.当把所有人的努力聚集起来的时候才是FLASH繁荣时期.这就是为什么多年前的AS程序员各各都强悍的原因.那时候的FLASH8还是很热闹的.
希望这个帖子能让更多的朋友发表自己的看法.我以后要回到FLASH世界,希望更多的朋友能帮我.欢迎FLASH 爱好者加我QQ共同成长
废话不说了.拿出东西.
本次程序同入门级下雪效果一样,使用了2个AS文件以及一个FLA文件,两个AS文件分别是mack_fire.as 火花粒子制作文件,fire.as 火花移动控制文件,以及fire.fla场景文件.
代码如下：
mack_fire.as：
复制代码
代码如下:/***************Ant QQ:305033389******************/
/*************请支持原创，请开源代码****************/
/**********请让更多的AS爱好者有资料学习*************/
/********本作品是我学习作品，并非完善作品***********/
package {
import flash.geom.Matrix;//颜色渐变类库倒入
import flash.display.Sprite;//Sprite 类是基本显示列表构造块
import flash.display.GradientType;//Graphics 类包含一组可用来创建矢量形状的方法
public class mack_fire extends Sprite { //本类为火花原形类
private var fire:Sprite;
var myMatrix:Matrix;
public function mack_fire(){
fire = new Sprite();//初始化一个影片剪辑
myMatrix = new Matrix();//需要用到的FLASH自带类，在这里这个类的作用是制作火花粒子的颜色渐变效果
var boxWidth:int = 16;//火花粒子颜色渐变宽高设置，下面是高度
var boxHeight:int = 16;
var boxRotation:uint = Math.PI/2;//颜色渐变使用的变量
var tx:int = 0;//影片剪辑的初试坐标
var ty:int = 0;
myMatrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);//下面开始是颜色付值部分，详细请查阅createGradientBox的具体用法
var type:String = GradientType.RADIAL;
var myColors:Array = [0xFFFF00, 0xFFFF00];//颜色渐变，白色到白色
var myAlphaS:Array = [1, 0];//透明度从，透明到不透明
var myRalphaS:Array = [0, 255];
var spreadMethod:String = "pad";
var interp:String = "rgb";
var focalPtRatio:Number = 0;
fire.graphics.beginGradientFill(type, myColors,myAlphaS,myRalphaS, myMatrix, spreadMethod, interp, focalPtRatio);//这里请参考手册中关于beginGradientFill来理解
fire.graphics.drawCircle(8, 8, 8);//制作一个圆形，半径和中心点坐标，具体可以参考drawCircle
addChild(fire);
}
}
}
复制代码
代码如下:/***************Ant QQ:305033389******************/
/*************请支持原创，请开源代码****************/
/**********请让更多的AS爱好者有资料学习*************/
/********本作品是我学习作品，并非完善作品***********/
package {
import flash.display.MovieClip;
import flash.events.EventDispatcher;
import flash.events.Event;
import flash.display.BlendMode;
import flash.filters.GlowFilter;
import flash.geom.ColorTransform;
public class fire extends MovieClip {
private var fires:mack_fire;
private const maxBalls:int = 60;//火花数量
private const Mc_x:int = stage.stageHeight/2;//起火开始X坐标
private const Mc_y:int = stage.stageHeight/2;//+stage.stageHeight/4;//起火开始Y坐标
private const Mc_more:int = 1;//顶点，移动和透明度的顶点，1为完全不透明或没有缩放比例，AS3中以1做为顶点，AS2中是100
private const McY:int = 1;//向上移动速度
private var i=1;//记数变量
private var obj_scal:Array=new Array();//缩放变量保存数组
private var obj_fast:Array=new Array();//移动速度变量保存数组
private var obj_action:Array=new Array();//横向移动速度更改变量
private var obj_n:Array=new Array();//横向移动方向控制变量
private var obj_s:Array=new Array();//横向移动速度控制变量
private var obj_gs:Array=new Array();
private var obj_g:Array=new Array();//颜色控制变量
public function fire() {
addEventListener(Event.ENTER_FRAME,fire_mv);
}
public function fire_mv(event:Event):void{
var k = Math.random();//制造随即数字，这个变量决定火花的移动距离，已经移动范围
var scale:Number = k ? k : 1;//制造一个随即数字，这个数字要小于1，大于0
fires = new mack_fire();//新元件创建
fires.scaleX = fires.scaleY = fires.alpha = scale;//元件的缩放以及透明度设置，根据上面的随即数设置
obj_g[i] = 100;
obj_gs[i] = (1-scale+.2)*3;//定义一个新的数组元素，用处在更改元件颜色
obj_fast[i] = Math.floor(scale*2);//纵向移动速度主变量
obj_action[i]=(Math.random()>0.5)?1:-1;//纵向移动 方向主变量
obj_scal[i] = 1 - obj_fast[i]/10;//对于进行中火花的缩放进行控制
obj_n[i] = obj_s[i] = 1;
fires.x= Mc_x;//定义火花产生的横坐标
fires.y= Mc_y;//定义火花产生的纵坐标
fires.blendMode = BlendMode.ADD;//这部分是纯代码火花的重点，颜色叠加。让火花和火花之间看起来更圆滑。没有这个部分，火的效果根本不成立
fires.name = "fire"+i;//定义一个火花的名字，在下面通过getChildByName来使用。这是笨方法。记得以前有朋友不用定义也可以使用的。
addChild(fires);
for (var n:int = 1; n<maxBalls; ++n){
var m=getChildByName("fire"+n);//使用上面定义的火花影片剪辑
if(m){
var colorInfo:ColorTransform = m.transform.colorTransform;//定义颜色控制器
var xx=obj_gs[n]*2;
obj_g[n] -= Math.ceil(xx);
if(obj_g[n] < 10) obj_g[n]="00";//更改颜色，这部分就是为什么黄色的影片剪辑变成红色的理由
var rgbs = "0xff"+obj_g[n]+"00";//转义为字符串，这部分我是用最傻的办法来做的 ，实在是不了解AS3。请高手多指导
colorInfo.color = rgbs;
m.transform.colorTransform = colorInfo;
m.y -= 1-obj_s[n]+.4;//向上移动
m.x += obj_fast[n]*obj_action[n]*obj_n[n]*obj_s[n];//进行横向移动
m.scaleX += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行横向缩放
m.scaleY += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行纵向缩放
m.alpha += .1 *obj_n[n]*obj_s[n];//进行透明度设置
if(m.scaleX >= Mc_more){;
obj_n[n] = -1;//横向反方向移动
obj_s[n] = .2;//横向移动速度减缓
};
if(m.alpha >= Mc_more){ m.alpha = Mc_more;}else if(m.alpha <= Math.random()*.1){ removeChildAt(m);}//如果透明度高于或者底于指定数值，进行操作
}
}
if(i>=maxBalls){i=0;}
++i;
}
}
}
fire.fla文件为场景文件,只要导入fire.as文件就可以了
具体方法:
在场景属性中,查找文档类,并输入fire就可以了
本次效果如下:
以上就是Flash AS3制作火苗跳动的gif动画教程，希望大家喜欢！
相关文章
flash cs6想要实现鼠标跟随效果？该怎么制作呢？今天我们就来看看使用as2.0实现鼠标跟随效果的教程，需要的朋友可以参考下2019-05-19
Flash cs6怎么使用代码输入中英文文本？Flash cs6中可以使用文字工具直接输入文本，也可以使用代码来输入文本，该怎么使用代码输入文本呢？请看下文详细的教程，需要的朋友2018-03-11
flash as3.0抽象类怎么定义？ as3.0中有很多抽象类，该怎么定义抽象类和抽象方法呢？下面我们就来看看简单的例子，需要的朋友可以参考下http://www.jb51.net/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0？flash cs6中想要使用ActionScript3.0功能，该怎么使用呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-01-25
本教程给大家分享一个Flash小教程，教大家在Flash CS6中怎么实现鼠标点击决定图像位置？方法很简单，感兴趣的朋友欢迎前来一起分享学习2018-01-12
本教程教程序员之家的ActionScript教程学习者在Flash中如何用代码将图片放在自己想要的舞台位置，教程讲解的详细，感兴趣的朋友欢迎前来分享学习2017-11-20
本教程教程序员之家的ActionScript教程学习者如何在Flash CS6中使用with函数绘制背景图？教程一步步讲解的挺详细，方法也不难，非常适合Flash新手入门学习2017-11-18
Flash怎么设置元件坐标?flash使用代码设置元件的坐标的教程
Flash怎么设置元件坐标？flash中导如的元件需要添加坐标，该怎么定位元件坐标呢？下面我们就来看看flash使用代码设置元件的坐标的教程，需要的朋友可以参考下2017-10-11
Flash怎么制作来回摇摆的花朵的动画？Flash中想要给花朵制作一段摇摆的动画效果，该怎么制作呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下2017-05-23
Flash怎么制作流动七彩色的文字？想要让文字动起来，该怎么使用flash给文字制作一个流动七彩色的动画呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-04-23
最新评论