Flash AS3制作火苗跳動的gif動畫教程
發(fā)布時間:2015-03-17 16:51:27 作者:佚名
我要評論

這篇教程是向腳本之家的朋友介紹Flash AS3制作火苗跳動的gif動畫方法,教程制作出來的火苗動畫非常的漂亮,難度不是很大,主要運用了Flash AS3代碼。好了,下面我們一起來學習吧
這個例子做了有段時間了.但是也跟那時候發(fā)的AS2的純代碼火效果是一樣的,也是殘次品.
本次例子沒能做到減少系統(tǒng)資源的能力.剛做完這個效果以后.也查找了一些粒子方面的資料.看到了很多高人寫的粒子可以使用上千個粒子卻不占用更多的系統(tǒng)資源,高人.但是,如果能把那算法公布我會更感謝你.
其實,FLASH AS的作品無非具備兩點就可以.
1.對AS函數的了解.
2.肯專研的精神.
FLASH世界里沒有做不到的東西.只有你想不到.你不想做的東西.這次的代碼發(fā)出來.非常希望有更多的朋友去完善.共享精神的目的就是這個.共同進步.一個人的努力只能局限在自己的世界里.當把所有人的努力聚集起來的時候才是FLASH繁榮時期.這就是為什么多年前的AS程序員各各都強悍的原因.那時候的FLASH8還是很熱鬧的.
希望這個帖子能讓更多的朋友發(fā)表自己的看法.我以后要回到FLASH世界,希望更多的朋友能幫我.歡迎FLASH 愛好者加我QQ共同成長
廢話不說了.拿出東西.
本次程序同入門級下雪效果一樣,使用了2個AS文件以及一個FLA文件,兩個AS文件分別是mack_fire.as 火花粒子制作文件,fire.as 火花移動控制文件,以及fire.fla場景文件.
代碼如下:
mack_fire.as:
/***************Ant QQ:305033389******************/
/*************請支持原創(chuàng),請開源代碼****************/
/**********請讓更多的AS愛好者有資料學習*************/
/********本作品是我學習作品,并非完善作品***********/
package {
import flash.geom.Matrix;//顏色漸變類庫倒入
import flash.display.Sprite;//Sprite 類是基本顯示列表構造塊
import flash.display.GradientType;//Graphics 類包含一組可用來創(chuàng)建矢量形狀的方法
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******************/
/*************請支持原創(chuàng),請開源代碼****************/
/**********請讓更多的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();//新元件創(chuàng)建
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;
}
}
}
本次例子沒能做到減少系統(tǒng)資源的能力.剛做完這個效果以后.也查找了一些粒子方面的資料.看到了很多高人寫的粒子可以使用上千個粒子卻不占用更多的系統(tǒng)資源,高人.但是,如果能把那算法公布我會更感謝你.
其實,FLASH AS的作品無非具備兩點就可以.
1.對AS函數的了解.
2.肯專研的精神.
FLASH世界里沒有做不到的東西.只有你想不到.你不想做的東西.這次的代碼發(fā)出來.非常希望有更多的朋友去完善.共享精神的目的就是這個.共同進步.一個人的努力只能局限在自己的世界里.當把所有人的努力聚集起來的時候才是FLASH繁榮時期.這就是為什么多年前的AS程序員各各都強悍的原因.那時候的FLASH8還是很熱鬧的.
希望這個帖子能讓更多的朋友發(fā)表自己的看法.我以后要回到FLASH世界,希望更多的朋友能幫我.歡迎FLASH 愛好者加我QQ共同成長
廢話不說了.拿出東西.
本次程序同入門級下雪效果一樣,使用了2個AS文件以及一個FLA文件,兩個AS文件分別是mack_fire.as 火花粒子制作文件,fire.as 火花移動控制文件,以及fire.fla場景文件.
代碼如下:
mack_fire.as:
復制代碼
代碼如下:/***************Ant QQ:305033389******************/
/*************請支持原創(chuàng),請開源代碼****************/
/**********請讓更多的AS愛好者有資料學習*************/
/********本作品是我學習作品,并非完善作品***********/
package {
import flash.geom.Matrix;//顏色漸變類庫倒入
import flash.display.Sprite;//Sprite 類是基本顯示列表構造塊
import flash.display.GradientType;//Graphics 類包含一組可用來創(chuàng)建矢量形狀的方法
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******************/
/*************請支持原創(chuàng),請開源代碼****************/
/**********請讓更多的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();//新元件創(chuàng)建
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://chabaoo.cn/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