[AS3程式設計教學]圖片Gallery製作初級教程?

Gallery是圖片切換展示的一種互動作品，多用於網站首頁。初級教程主要靠幀動畫，也即補間動畫加上少量的控制程式碼來完成，最難的部分用幀動畫製作，這就滿足部分程式設計基礎較弱的美工人員和動畫師。
如下圖所示：我們本次就是要做這樣一個效果，點選左右按鈕圖片向左向右移動，單擊圖片有文字描述，點到最左端或者最右端時按鈕無法繼續點，只能反向點選。

工具/原料

FlashCS3(及其以上版本)，PhotoShop（任意版本） 6張圖片

步驟/方法

我們在網上找6張小狗圖片，並用PS將其處理成統一尺寸：400*300.解析度72：

新建一個空白的flash文件，將幀頻設成30fps.

將圖層1命名為“背景”在舞臺上畫一個半透明深灰色的矩形，我們會將之前準備的6張圖片匯入後並排列在這個矩形上，那麼這個矩形就起到一個背景和容器的作用。

新建一個“圖片集圖層”，將我們準備的6張圖片匯入舞臺，並縮放到合適大小，排列在矩形容器上，排列一排。

單擊點選這一排圖片，按下F8，轉換成一個元件，叫做“圖片集”，然後在舞臺命名例項名為：mcPic。

新建一個圖層，名叫遮罩，然後畫一個與背景等大的紅色矩形最為遮罩，可以直接複製背景並更改顏色：

這個紅色遮罩就是我們圖片集運動的範圍，最左最右都以不在遮罩內留下空白為限制。所以鎖定遮罩和背景層，我們開始做時間軸移動動畫：

每次單擊移動一張的距離，6張圖片移動三次便到頭了，返回來也是移動3次到頭，所以共插入6個關鍵幀，動畫做完如下所示：

此時我們需要兩個左右切換的按鈕，我找到兩個按鈕，並命名為btnLeft何btnRight,如下圖所示：

接下去我們右擊“遮罩”層，選擇“遮罩層”屬性，你會發現此時舞臺上只有三張圖片能夠顯示，其餘的都被擋在遮罩之外了，這就是遮罩的最大用途。
滑鼠拖動時間軸，發現圖片會來回滾動，只不過此時你是手動讓它滾動，我們接下去用程式碼來完成互動控制。

在主時間軸新建AS圖層，寫入住時間軸控制程式碼:
addFrameScript
(0,stopFrame,5,stopFrame,10,stopFrame,15,stopFrame,20,stopFrame,25,stopFrame,30,stopFrame);
function stopFrame():void
{
stop();
}
釋出測試，發現此時突破已經停在第一幀不動。

寫左右兩個按鈕移動功能，要注意點選左按鈕是向右移動，點選右按鈕是想左移動：
//向右移動
btnLeft.addEventListener(MouseEvent.CLICK,moveRight);
function moveRight(e:MouseEvent):void
{
var index:int = this.currentFrame;
trace(index);
if(index == 6)this.gotoAndPlay(27);
else if(index == 11)this.gotoAndPlay(22);
else if(index >= 16)this.play();
}
//向左移動
btnRight.addEventListener(MouseEvent.CLICK,moveLeft);
function moveLeft(e:MouseEvent):void
{
var index:int = this.currentFrame;
if(index < 16)this.play();
else if(index == 21)this.gotoAndPlay(12);
else if(index == 26)this.gotoAndPlay(7);
else if(index == 31)this.gotoAndPlay(2);
}
程式碼不過多解釋了，就是在每個關鍵幀的地方判斷一下點選左右按鈕應該如何運動，在時間軸的哪個地方開始運動。

現在釋出測試發現，功能基本上都OK了。
只是移動有點生硬的感覺，說明我們的動畫做的不舒服。

在每段時間軸補間位置單擊滑鼠，在屬性面板找到“緩動”選項，每段都調成100，再次測試發現感覺舒服多了。

最後從實用角度來說，給每張圖片增加一個點選效果會比較好，因為這樣這個Gallery才有實用價值。而這次的基礎教程做法加點選事件卻相對麻煩一點，我們實際上是點選圖片後通過滑鼠座標來計算點中了那張圖，然後我們給這張圖增加連結的，我們在按鈕層新增個文字框命名為txtPicInfo,點選事件如下：
//圖片單擊事件
mcPic.buttonMode = true;
mcPic.addEventListener(MouseEvent.CLICK,clickPic);
function clickPic(e:MouseEvent):void
{
var index:int = int(mcPic.mouseX/152);
txtPicInfo.text = "當前單擊第" + (index + 1) + "張圖片!";
}

製作完畢！
舞臺時間軸如下圖：
所有程式碼:
addFrameScript
(0,stopFrame,5,stopFrame,10,stopFrame,15,stopFrame,20,stopFrame,25,stopFrame,30,stopFrame);
function stopFrame():void
{
stop();
}
//向右移動
btnLeft.addEventListener(MouseEvent.CLICK,moveRight);
function moveRight(e:MouseEvent):void
{
var index:int = this.currentFrame;
if(index == 6)this.gotoAndPlay(27);
else if(index == 11)this.gotoAndPlay(22);
else if(index >= 16)this.play();
}
//向左移動
btnRight.addEventListener(MouseEvent.CLICK,moveLeft);
function moveLeft(e:MouseEvent):void
{
var index:int = this.currentFrame;
if(index < 16)this.play();
else if(index == 21)this.gotoAndPlay(12);
else if(index == 26)this.gotoAndPlay(7);
else if(index == 31)this.gotoAndPlay(2);
}
//圖片單擊事件
mcPic.buttonMode = true;
mcPic.addEventListener(MouseEvent.CLICK,clickPic);
function clickPic(e:MouseEvent):void
{
var index:int = int(mcPic.mouseX/152);
txtPicInfo.text = "當前單擊第" + (index + 1) + "張圖片!";
}

注意事項

因為是基礎教程，所以幀動畫比較多，而且功能限制較多，比如無法迴圈播放，擴充套件比較麻煩，比如要做100張圖片的播放這種方法顯然工作量巨大，所以本教程做法適合10張圖片以下的簡單展示！