Flash AS 教程:多種圖片切換效果_Flash教程
推薦:Flash AS教程:填色游戲的制作先試試效果: 在本次課程中我們將學習使用 Color 類來制作一個填色游戲,并通過本實例復習 for...in 及 SharedObject 的應用。 思路: 1.使用腳本代碼創(chuàng)建一個調色盤,鼠標點擊色塊后進行取色; 2.繪制作為填充的影片剪輯并把每一部都存為影片剪輯。例如:填充對象是一
先看看效果:
這是我們經常會在瀏覽網頁和論壇時看到的圖片轉場效果,制作這些效果我們會很自然想到用setMask函數(shù)來完成,在本節(jié)中我們將介紹七種基本轉場效果。
思路:
1. 注重共三張圖片,一張是底版(pic_old)放在最底層,一張是切換來的新圖(pic_new)放在中間層,最后還有一張用來做新圖的遮罩層(mask);
2. 新圖和底版的深度不要顛倒,新圖要比底版的深度高,否則會發(fā)生錯誤;
3. 我們只在mask上面作文章,讓mask去加載遮罩物,這樣就可以完成許許多多不同的效果了。
步驟1:
(1) 繪制一個正方形(50*50),注冊點在中心,保存為影片剪輯連接—>導出—>標志符 Rec;
(2) 繪制一個圓形(50*50),注冊點在中心,保存為影片剪輯連接—>導出—>標志符 Cir;
(3) 導入圖片n張,均保存為影片剪輯,注冊點在左上(0,0)這些圖片的連接—>導出—>標志符 分別從 pic1, pic2, pic3 ... ... picn
步驟2:
加入AS代碼:
//臨時變量用于存儲當前圖片
var n:Number = 0;
//變量n為當前所在圖片
var Num:Number = 5;
//Num圖片數(shù)量
//=======================================================
//鼠標點擊后設置底版圖、新圖和遮罩層,并調用(PassEffect)
_root.onMouseDown = function() {
n = n < Num ? n : 1 ;
_root.createEmptyMovieClip("pic_old", -3);
pic_old.attachMovie(old_p, old_p, 1);
old_p = "pic" n;
_root.createEmptyMovieClip("pic_new", -2);
pic_new.attachMovie("pic" n, pic, 1);
_root.createEmptyMovieClip("mask", -1);
pic_new[pic].setMask(mask);
//在測試時,可以把setMask這句注釋掉,可更好地觀察遮罩層的情況
PassEffect();
};
//============================================================
function PassEffect() {
switch (1 Math.floor(Math.random()*7)) {
//***************效果1[見附錄]***************
//復制若干個圓,分布在每行每列,并使每個圓的大小不斷增加至覆蓋整張圖
case 1 :
for (i=0; i<7; i ) {
for (j=0; j<6; j ) {
var p:MovieClip = mask.attachMovie("Cir", "Cir" i*10 j,
i*10 j);
//注重這里是mask.attachMovie(),加載來的圖形都屬于遮罩層(mask)
p._width = 20;
p._height = 20;
p._x = 20 i*60;
p._y = 20 j*60;
p.onEnterFrame = function() {
if (this._width<180) {
this._width = this._height = 8;
} else {
delete this.onEnterFrame;
}
};
}
}
break;
//=================================================================
//***************效果2[見附錄]***************
//復制一個正方形,放入舞臺中心,設置他其初始大小為10*10,并放大case 2 :
var p:MovieClip = mask.attachMovie("Rec", Rec, 1);
p._width = 10;
p._height = 10;
p._x = Stage.width/2;
p._y = Stage.height/2;
p.onEnterFrame = function() {
if (this._width
this._width = 40;
this._height = 40;
} else {
delete this.onEnterFrame;
}
};
break;
//=================================================================
//***************效果3[見附錄]****************
//復制一個正方形,其初始大小比舞臺的尺寸多一些,使其移動到舞臺中心case 3 :
var p:MovieClip = mask.attachMovie("Rec", "Rec" 1, 1);
p._width = Stage.width 10;
p._height = Stage.height 10;
p._x = 0-p._width;
p._y = 0-p._height;
p.onEnterFrame = function() {
this._x = (Stage.width/2-this._x)*0.3;
this._y = (Stage.height/2-this._y)*0.3;
};
break;
//=================================================================
//***************效果4[見附錄]***************
//復制二個正方形,放到舞臺外的左右各一個,使它們都向舞臺中心移動case 4 :
var p:MovieClip = mask.attachMovie("Rec", "Rec" 1, 1);
p._width = Stage.width;
p._height = Stage.height;
p._x = -p._width/2;
p._y = Stage.height/2;
p.onEnterFrame = function() {
if (this._x
this._x = 15;
} else {
delete this.onEnterFrame;
}
};
var p:MovieClip = mask.attachMovie("Rec", "Rec" 2, 2);
p._width = Stage.width;
p._height = Stage.height;
p._x = Stage.width p._width/2;
p._y = Stage.height/2;
p.onEnterFrame = function() {
if (this._x>Stage.width/2) {
this._x -= 15;
} else {
delete this.onEnterFrame;
}
};
break;
//=================================================================
//***************效果5[見附錄]***************
//隨機產生兩種傾斜角度,用一個遞增變量d_time來控制每個遮罩物的開始時間case 5 :
if (Math.random()<=0.5) {
var rotation = 45;
} else {
var rotation = -45;
}
for (i=-10, d_time=0; i<30; i , d_time ) {
var p:MovieClip = mask.attachMovie("Rec", "Rec" d_time, d_time);
p._width = 0;
p._height = Stage.height*2;
p._x = p._width/2 i*20;
p._y = Stage.height/2;
p._rotation = rotation;
p.delay = d_time;
p.start_time = 0;
p.onEnterFrame = function() {
if (this.start_time
this.start_time = 3;
} else if (this._xscale<30) {
this._xscale = 2;
} else {
delete this.onEnterFrame;
}
};
}
break;
//=================================================================
//***************效果6[見附錄]***************
//與效果5相近,但在遮罩物的尺寸及位置上要略加改動case 6 :
if (Math.random()<=0.5) {
for (i=0; i<45; i ) {
var p:MovieClip = mask.attachMovie("Rec", "Rec" i, i);
p._width = 0;
p._height = Stage.height 10;
p._x = i*10;
p._y = Stage.height/2;
p.delay = i;
p.start_time = 0;
p.onEnterFrame = function() {
if (this.start_time
this.start_time = 3;
} else if (this._xscale<30) {
this._xscale = 2;
} else {
delete this.onEnterFrame;
}
};
}
} else {
for (i=0; i<35; i ) {
var p:MovieClip = mask.attachMovie("Rec", "Rec" i, i);
p._width = Stage.width 10;
p._height = 0;
p._x = Stage.width/2;
p._y = i*10;
p.delay = i;
p.start_time = 0;
p.onEnterFrame = function() {
if (this.start_time
this.start_time = 3;
} else if (this._yscale<30) {
this._yscale = 2;
} else {
delete this.onEnterFrame;
}
};
}
}
break;
//=================================================================
//***************效果7[見附錄]***************
//復制長條,均放在舞臺外的上方,并使Y坐標有所差異,向下運動case 7 :
for (i=0; i<40; i ) {
var p:MovieClip = mask.attachMovie("Rec", "Rec" i, i);
p._width = 10;
p._height = Stage.height 50;
p._x = p._width/2 i*p._width;
p._y = -p._height Math.random()*50;
p.onEnterFrame = function() {
if (this._y
this._y = 20;
} else {
delete this.onEnterFrame;
}
};
}
break;
}
}
Flash充電1: MovieClip.setMask 方法 mc.setMask(mask:Object): 使參數(shù) mask 中的影片剪輯成為 mc 的遮罩層。
Flash充電2: 條件運算符(三目運算) ? :格式:expression1 ? expression2 : expression3
例如:
var x:Number = 5;
var y:Number = 10;
var z = (x < 6) ? x: y;
trace (z);
// returns 5
附錄:
效果1:
效果2:
效果3:
效果4:
效果5
效果6:
效果7:
分享:Flash入門教程:滾動字幕動畫的制作(1)在Flash中圖層與圖層之間的關系不僅是上面圖層擋住下面的圖層,而且還是互相制約的,其中遮罩層與被遮罩層的關系就是這樣的。這里通過一個簡單的例子“滾動字幕”,來加以說明。 做動畫之前,我們先來看一下遮罩的原理:遮罩層的對象外形就是被遮罩層的可見區(qū)域。說白
- 相關鏈接:
- 教程說明:
Flash教程-Flash AS 教程:多種圖片切換效果。