AS3編程教學：Flash相冊高級教程實現(xiàn)相冊的轉(zhuǎn)場效果

2020-07-17 13:10:46

字體：大中小

供稿：網(wǎng)友

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

工具/原料

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

步驟/方法

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

2、其次我們按照相冊的內(nèi)容來寫出程序執(zhí)行大致架構(gòu)。
[AS3編程教學]Flash相冊高級教程

3、接下來我們實現(xiàn)createTitle（）函數(shù)

復制代碼

代碼如下:

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);
}

發(fā)布后如圖所示，有了標題！

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

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

復制代碼

代碼如下:

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);
}

此時發(fā)布影片，我們已經(jīng)看到了兩個文本。

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

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

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

復制代碼

代碼如下:

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

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

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

復制代碼

代碼如下:

var txtInfo:TextField;
var txtPage:TextField;
function createInfoText():void
{
//--------------
txtInfo = new TextField();
txtInfo.autoSize = TextFieldAutoSize.CENTER;
txtInfo.text = "相冊內(nèi)容描述";
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、接下來我們創(chuàng)建兩個按鈕，這次按鈕從系統(tǒng)組件里拖出來到庫里，如圖所示。
[AS3編程教學]Flash相冊高級教程

9、寫創(chuàng)建按鈕函數(shù)如下：

復制代碼

代碼如下:

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、繼續(xù)完善上一步下一步控制函數(shù)，我們這次做個循環(huán)播放，如果上一頁到第一頁時，自動轉(zhuǎn)到最后一頁；同理下一頁到最后一頁時，自動轉(zhuǎn)到第一頁。

復制代碼

代碼如下:

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、下面寫圖片展示函數(shù)，我們說過要用到一個動態(tài)緩動引擎叫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、如果你能跟得上節(jié)奏，就會發(fā)現(xiàn)此時已經(jīng)實現(xiàn)了相冊功能了:
[AS3編程教學]Flash相冊高級教程

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

復制代碼

代碼如下:

此時測試的時候發(fā)現(xiàn)已經(jīng)可以正常顯示，但是有個奇怪的地方，我們設置的微軟雅黑變成宋體了：

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

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

復制代碼

代碼如下:

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相冊高級教程