AS3編程教學：Flash相冊高級教程實現相冊的轉場效果

2020-07-17 13:10:46

字體：大中小

來源：轉載

供稿：網友

本教程是在前一個進階教程的基礎上繼續做優化和修改，既然是高級教材，勢必會省去很多制作過程，主要精力放在編碼工作上。本次制作相冊的主要做法就是除了背景以外的元件全部靠動態創建，并且用一個緩動引擎TweenLite來實現相冊的轉場效果，這種動態創建的做法對練習程序編寫很有好處，但是項目開發而言并不是最佳方式。

工具/原料

FlashCS3（及其以上版本）,5張圖片

步驟/方法

1、首先我們刪去舞臺上的按鈕和相冊元件，舞臺上只剩下一個背景
[AS3編程教學]Flash相冊高級教程

2、其次我們按照相冊的內容來寫出程序執行大致架構。
[AS3編程教學]Flash相冊高級教程

3、接下來我們實現createTitle（）函數

復制代碼

代碼如下:

function createTitle():void
{
var txtTitle:TextField = new TextField();
txtTitle.autoSize = TextFieldAutoSize.CENTER;
txtTitle.text = "美女相冊";
txtTitle.x = (stage.stageWidth - txtTitle.width)/2;
txtTitle.y = 5;
addChild(txtTitle);
var tFormat:TextFormat = new TextFormat();
tFormat.font = "微軟雅黑";
tFormat.size = 30;
txtTitle.setTextFormat(tFormat);
}

發布后如圖所示，有了標題！

[AS3編程教學]Flash相冊高級教程

4、我們用同樣的方法創建日期字符串，放在左下角。

復制代碼

代碼如下:

function createDate():void
{
var txtTitle:TextField = new TextField();
txtTitle.autoSize = TextFieldAutoSize.RIGHT;
txtTitle.text = "2011年12月31日";
txtTitle.x = stage.stageWidth - txtTitle.width - 2;
txtTitle.y = stage.stageHeight - txtTitle.height*2;
addChild(txtTitle);
var tFormat:TextFormat = new TextFormat();
tFormat.font = "微軟雅黑";
tFormat.size = 16;
txtTitle.setTextFormat(tFormat);
}

此時發布影片，我們已經看到了兩個文本。

[AS3編程教學]Flash相冊高級教程

5、接下來我們創建相冊元件，相冊元件是一個影片剪輯，里面有5張連續的圖片，注意注冊點居中。在庫里找到這個原價你，給他一個連接的類名PhotoItem,如果彈出沒有類的提示，那么點擊確定讓其自動創建。
[AS3編程教學]Flash相冊高級教程

6、我們接著寫創建相冊元件的函數，從庫里加載剛才加了連接名的元件到舞臺上合適的位置。

復制代碼

代碼如下:

var mcPhotoItem:PhotoItem;
function createPhotos():void
{
mcPhotoItem = new PhotoItem();
mcPhotoItem.x = 148;
mcPhotoItem.y = 66;
mcPhotoItem.stop();
addChild(mcPhotoItem);
}

[AS3編程教學]Flash相冊高級教程

7、接下來我們創建兩個文本框，放在相冊下方，分別對應內容描述和頁面顯示：

復制代碼

代碼如下:

var txtInfo:TextField;
var txtPage:TextField;
function createInfoText():void
{
//--------------
txtInfo = new TextField();
txtInfo.autoSize = TextFieldAutoSize.CENTER;
txtInfo.text = "相冊內容描述";
txtInfo.x = 142;
txtInfo.y = 255;
txtInfo.width = 255;
txtInfo.textColor = 0x7E0A0A
addChild(txtInfo);
var tFormat:TextFormat = new TextFormat();
tFormat.font = "微軟雅黑";
tFormat.size = 14;
txtInfo.setTextFormat(tFormat);
//---------
txtPage = new TextField();
txtPage.autoSize = TextFieldAutoSize.CENTER;
txtPage.text = "相冊頁碼";
txtPage.x = 142;
txtPage.y = 280;
txtPage.width = 255;
tFormat.size = 16;
txtPage.setTextFormat(tFormat);
addChild(txtPage);
}

[AS3編程教學]Flash相冊高級教程

8、接下來我們創建兩個按鈕，這次按鈕從系統組件里拖出來到庫里，如圖所示。
[AS3編程教學]Flash相冊高級教程

9、寫創建按鈕函數如下：

復制代碼

代碼如下:

import fl.controls.Button
var btnPrev:Button;
var btnNext:Button;
function createBtns():void
{
btnPrev = new Button();
btnPrev.x = 142;
btnPrev.y = 310;
btnPrev.label = "上一頁";
btnPrev.addEventListener(MouseEvent.CLICK,prevPhotos);
addChild(btnPrev);
btnNext = new Button();
btnNext.x = 297;
btnNext.y = 310;
btnNext.label = "下一頁";
btnNext.addEventListener(MouseEvent.CLICK,nextPhotos);
addChild(btnNext);
}
function prevPhotos(e:MouseEvent):void
{
trace("Prev");
}
function nextPhotos(e:MouseEvent):void
{
trace("Next");
}

[AS3編程教學]Flash相冊高級教程

10、繼續完善上一步下一步控制函數，我們這次做個循環播放，如果上一頁到第一頁時，自動轉到最后一頁；同理下一頁到最后一頁時，自動轉到第一頁。

復制代碼

代碼如下:

function prevPhotos(e:MouseEvent):void
{
var index:int = mcPhotoItem.currentFrame;
if(index == 1)showPhoto(5);
else showPhoto(index - 1);
}
function nextPhotos(e:MouseEvent):void
{
var index:int = mcPhotoItem.currentFrame;
if(index == 5)showPhoto(1);
else showPhoto(index + 1);
}

[AS3編程教學]Flash相冊高級教程

11、下面寫圖片展示函數，我們說過要用到一個動態緩動引擎叫TweenLite類，如果你能看到這里，那么你肯定有能力去搞清楚這個類是什么，其實程序的東西你只要知道它對外接口，會用就非常好了，會用比懂總是有實際意義。我們做得效果是圖片縮放到80%，透明度變到60%時，圖片切換下一張，然后在變回來原始尺寸和透明度，視覺上一閃一閃的，首先要確保類包在Ctrl+U的面板里被設置進來。

復制代碼

代碼如下:

import com.greensock.TweenLite;
function showPhoto(index:int):void
{
TweenLite.to(mcPhotoItem,.2,{scaleX:.8,scaleY:.8,alpha:.6,onComplete:changePic,onCompleteParams:[index]});
}
function changePic(index:int):void
{
mcPhotoItem.gotoAndStop(index);
TweenLite.to(mcPhotoItem,.3,{scaleX:1,scaleY:1,alpha:1});
}

[AS3編程教學]Flash相冊高級教程

12、如果你能跟得上節奏，就會發現此時已經實現了相冊功能了:
[AS3編程教學]Flash相冊高級教程

13、但是還有一個問題，那就是圖片信息和頁碼不切換，所以我們接下去就寫這部分功能。我們只需要在圖片縮小切換的時候刷新內容就可以了，繼續寫一個信息刷新函數：

復制代碼

代碼如下:

此時測試的時候發現已經可以正常顯示，但是有個奇怪的地方，我們設置的微軟雅黑變成宋體了：

[AS3編程教學]Flash相冊高級教程

14、沒有辦法，動態創建的文本就是這樣，這時候我們需要每次給它設置類型才行。

復制代碼

代碼如下:

showInfo(1);
function showInfo(index:int):void
{
txtInfo.text = "第" + index + "美女照片！";
txtPage.text = "<" + index +">";
var tFormat:TextFormat = new TextFormat();
tFormat.font = "微軟雅黑";
tFormat.size = 14;
txtInfo.setTextFormat(tFormat);
tFormat.size = 16;
txtPage.setTextFormat(tFormat);
}

[AS3編程教學]Flash相冊高級教程