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 old_p:String;
//臨時變量用于存儲當前圖片
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ū)域。說白