Flash AS代碼制作絢麗的光影變幻GIF動(dòng)畫效果(代碼解析)
我要評(píng)論代碼解析：
首先從整段上代碼上，我們實(shí)際上只用了一個(gè)for循環(huán)。這個(gè)for循環(huán)的作用是復(fù)制20個(gè)鏈接名為partical的影片剪輯。然后我們?cè)谘h(huán)的內(nèi)部對(duì)復(fù)制后的粒子引用名mc進(jìn)行初始化，控制。
起始的兩行是用來調(diào)整所有粒子的相對(duì)屏幕中的位置的。
代碼：
var cx = 180;
var cy = 180;
接下來我們從for循環(huán)的內(nèi)部開始說起，我們將它分為塊，一塊是初始化復(fù)制后的粒子，另一段是為粒子實(shí)例mc 加入動(dòng)態(tài)屬性，為后面的控制移動(dòng)做準(zhǔn)備。第三塊則是使用onEnterFrame循環(huán)來控制移動(dòng)。
初始化復(fù)制后的粒子
代碼：
var mc = this.attachMovie("partical"， "p"+i， i);
with (mc) {
//初始化影片剪輯的位置，注意此時(shí)cx，cy是用來調(diào)整mc實(shí)例的偏移位置的.
_x = cx+Math.random()*60;
_y = cy+Math.random()*60;
}
這一段代碼，現(xiàn)在來講我們已經(jīng)很熟知了，我們通過頂端的for循環(huán)20次。將庫中的鏈接名為partical的粒子復(fù)制到場(chǎng)景中。復(fù)制的方法我們使用是的是attachMovie的方式，復(fù)制后的影片剪輯更名為”p” +I，也就是說你復(fù)制的結(jié)果應(yīng)是p0，p1，p2，p3…..p19，而所有的這些影片剪輯我們?yōu)樗饌€(gè)實(shí)例名為mc.它代表了所有復(fù)制得到的影片剪輯。在with內(nèi)部，我們開始指定這些粒子的初始位置。注意此時(shí)我們用上了cx，cy.并且加上了隨機(jī)數(shù)60，也就是說料子初始化的位置在180-240的位置之間。
為粒子實(shí)例mc 加入動(dòng)態(tài)屬性
代碼：
mc.blendMode = "add";
//設(shè)定mc實(shí)例的角度隨機(jī)值
mc.tx = random(360);
mc.ty = random(360);
//設(shè)定用于mc角度的增量隨機(jī)值
mc.xtempo = Math.random()/10;
mc.ytempo = Math.random()/10;
//設(shè)定mc實(shí)例的速度隨機(jī)值
mc.xd = Math.random()*10+1;
mc.yd = Math.random()*10+1;
mc.x0 = mc._x;
mc.y0 = mc._y;
//跳轉(zhuǎn)到指定的幀，以變換不同顏色的小球上.
mc.gotoAndStop(random(5)+1);
在這段代碼的開始的位置mc.blendMode ="add" 便是我們加入融合模式的重點(diǎn)所在了，如果沒有這一些就不會(huì)出來相疊加后的融合效果。但實(shí)現(xiàn)它的前題是我們必須要處理如基本了粒子活動(dòng)，所以習(xí)慣上我們都是最后才加上濾鏡或是融合模式。在這段代碼中，所有的都是為第三段的循環(huán)準(zhǔn)備的。其中有兩句是用來做為角度的增量隨機(jī)值的。這個(gè)角度增量值實(shí)際是為了在onEnterFrame循環(huán)中增加的角度的變化。使效果變得更明顯。這一段中的最后一句也是重點(diǎn)，因?yàn)槲覀冊(cè)趐artical的影片剪輯中放置了五個(gè)不同顏色的小球，我們通過隨機(jī)跳轉(zhuǎn)命令來達(dá)到不同顏色小球的切換。
用onEnterFrame循環(huán)來控制移動(dòng)
代碼
mc.onEnterFrame = function() {
this.tx += this.xtempo;
this.ty += this.ytempo;
this._x = this.x0+Math.sin(this.tx)*this.xd;
this._y = this.y0+Math.cos(this.ty)*this.yd;
};
在這段代碼中，通過將前面定義的動(dòng)態(tài)屬性，應(yīng)用在onEnterFrame循環(huán)中，起到?jīng)Q定性作用是.
代碼：
this._y = this.y0+Math.cos(this.ty)*this.yd;
其中this.tx，this.ty，this.xd，this.yd.均為前面定義的動(dòng)態(tài)屬性。我們使用了sin()和cos ()方法是為了使每個(gè)粒子自身有一個(gè)環(huán)形的運(yùn)動(dòng)路線。
Ok.在整段代中，我們看到使用融合模式blendmode只有一行，但在這里它顯得尤為重要，加上與去掉效果是截然不同的。
現(xiàn)在你就可以測(cè)試你的影片了。
接下我們要在上面的基出上進(jìn)行一下變化。看看效果會(huì)有什么不同。
我們現(xiàn)在要增加粒子的大小和范圍。代碼做如下的修改。
代碼：
var cx = 0;
var cy = 0;
//設(shè)定循環(huán)20次，準(zhǔn)備從庫中復(fù)制鏈接id為partical的影片.
for (var i = 0; i<100; i++) {
//復(fù)制影片剪輯，引用名稱為mc.
var mc = this.attachMovie("partical"， "p"+i， i);
with (mc) {
//初始化影片剪輯的位置，注意此時(shí)cx，cy是用來調(diào)整mc實(shí)例的偏移位置的.
_x = cx+Math.random()*590;
_y = cy+Math.random()*350;
_xscale = _yscale = 100 * Math.random()*5+1;
}
//針對(duì)mc應(yīng)用融合模式類型"add"
mc.blendMode = "add";
//設(shè)定mc實(shí)例的角度隨機(jī)值
mc.tx = random(360);
mc.ty = random(360);
//設(shè)定用于mc角度的增量隨機(jī)值
mc.xtempo = Math.random()/10;
mc.ytempo = Math.random()/10;
//設(shè)定mc實(shí)例的速度隨機(jī)值
mc.xd = Math.random()*10+1;
mc.yd = Math.random()*10+1;
mc.x0 = mc._x;
mc.y0 = mc._y;
//跳轉(zhuǎn)到指定的幀，以變換不同顏色的小球上.
mc.gotoAndStop(random(5)+1);
//通過onEnterFrame循環(huán)，來讓粒子移動(dòng).
mc.onEnterFrame = function() {
this.tx += this.xtempo;
this.ty += this.ytempo;
this._x = this.x0+Math.sin(this.tx)*this.xd;
this._y = this.y0+Math.cos(this.ty)*this.yd;
};
}
接下來我們?cè)谶@段代碼的基礎(chǔ)上在次進(jìn)行修改。我們此次要變換一下融合模式，就會(huì)得到不同的效果。如下代碼。
代碼：
var cx = 0;
var cy = 0;
//設(shè)定循環(huán)20次，準(zhǔn)備從庫中復(fù)制鏈接id為partical的影片.
for (var i = 0; i<100; i++) {
//復(fù)制影片剪輯，引用名稱為mc.
var mc = this.attachMovie("partical"， "p"+i， i);
with (mc) {
//初始化影片剪輯的位置，注意此時(shí)cx，cy是用來調(diào)整mc實(shí)例的偏移位置的.
_x = cx+Math.random()*590;
_y = cy+Math.random()*350;
_xscale = _yscale = 140 * Math.random()*5+1;
}
//針對(duì)mc應(yīng)用融合模式類型"add"
mc.blendMode = "hardlight";
mc.cacheAsBitmap = true;
//設(shè)定mc實(shí)例的角度隨機(jī)值
mc.tx = random(360);
mc.ty = random(360);
//設(shè)定用于mc角度的增量隨機(jī)值
mc.xtempo = Math.random()/10;
mc.ytempo = Math.random()/10;
//設(shè)定mc實(shí)例的速度隨機(jī)值
mc.xd = Math.random()*10+1;
mc.yd = Math.random()*10+1;
mc.x0 = mc._x;
mc.y0 = mc._y;
//跳轉(zhuǎn)到指定的幀，以變換不同顏色的小球上.
mc.gotoAndStop(random(5)+1);
//通過onEnterFrame循環(huán)，來讓粒子移動(dòng).
mc.onEnterFrame = function() {
this.tx += this.xtempo;
this.ty += this.ytempo;
this._x = this.x0+Math.sin(this.tx)*this.xd;
this._y = this.y0+Math.cos(this.ty)*this.yd;
};
}
斜體加粗的代碼為我們所修改過的位置，我們?cè)龃罅丝s放，同時(shí)將融合模式換成了hardlight.當(dāng)然你可以試一下其它的融合方式，同時(shí)我們?cè)黾恿薽c.cacheAsBitmap = true.通過這一句是加速我們的影片剪輯的運(yùn)算速度。測(cè)試的效果如下。
教程結(jié)束，以上就是Flash AS代碼制作絢麗的光影變幻GIF動(dòng)畫效果，希望對(duì)大家有所幫助！
相關(guān)文章
- 本教程是向大家介紹Flash遮罩特效實(shí)例之百葉窗效果，教程比較基礎(chǔ)，適合新手學(xué)習(xí)。希望對(duì)大家有所幫助2014-09-03
Flash制作描紅和描邊的文字動(dòng)態(tài)效果
本教程是向大家介紹利用Flash制作描紅和描邊的文字動(dòng)態(tài)效果，制作方法很簡單，推薦給腳本之家的朋友，喜歡的朋友可以跟著一起來學(xué)習(xí)2014-08-13- 本教程是向大家介紹利用Flash制作漂亮的熒光文字效果，教程難度不是很大，主要使用了漸變填充等工具，新手朋友可以過來學(xué)習(xí)一下2014-08-13
- 本教程向大家介紹了Flash制作漂亮的光影字效果，教程主要運(yùn)用了遮罩技術(shù)，使平凡的文字看上去更加絢麗。推薦給大家，希望大家能認(rèn)真學(xué)習(xí)2014-08-14
- 本教程是向腳本之家的朋友介紹Flash制作紅色點(diǎn)狀線框文字方法，制作過程很簡單，教程屬于入門教程，對(duì)于新手來說是個(gè)非常不錯(cuò)的教程。推薦給大家，希望大家喜歡2014-09-10