可變框的圖片展示動畫

我們平時在flash中進(jìn)行圖片展示，一般都會把圖片做成相同大小，然后加上圖框，但有時為了保留圖片真正大小來展示，這時如果加一個固定大小的框就有點(diǎn)麻煩了，因?yàn)閳D片變大或變小了，圖框卻不會自由變大變小，要解決這個問題就必須通過flash as來實(shí)現(xiàn)了，下面我們就來講講這個flash教程：可變框的圖片展示動畫的制作。

先看看真正的效果圖吧（你可以點(diǎn)擊動畫查看效果）。

 具體制作方法及步驟如下：

步驟一、新建一個FLASH文檔，按Ctrl+J進(jìn)行設(shè)置動畫的寬度及高度，這里設(shè)置為550*550，背影顏色設(shè)置為黑色

步驟二、到網(wǎng)上下載自己認(rèn)為較好的，但不同規(guī)格的圖片，最大寬度及高度不要超過530*530，然后分別把這幾張圖片導(dǎo)入到庫。

步驟三、然后分別把這幾張圖片拖到舞臺，按F8進(jìn)行轉(zhuǎn)換為影片剪輯，分別命名為image1,image2,image3,image4,image5......

步驟四、然后隱藏該圖層，再新建一個圖層，把該圖層命名為“圖框”，然后用矩形工具繪制作一個長方形邊框，填充色禁止，筆觸白色，高度為4像素，按F8轉(zhuǎn)影片剪輯，命名為“mageBorder”

步驟五、再增加一個圖層，命名為“AS”，輸入如下AS代碼：

import gs.*;

var centerX:uint = stage.stageWidth / 2;

var centerY:uint = stage.stageHeight / 2;

var imagesArray:Array = new Array(image1,image2,image3,image4);

var currentImage:MovieClip = null;

imageBorder.alpha = 0;

for (var i:uint = 0; i < imagesArray.length; i++) {

imagesArray[i].alpha = 0;

 imagesArray[i].imageIndex = i;

}

stage.addEventListener(MouseEvent.CLICK, stageClicked);

function stageClicked(e:MouseEvent):void {

if (currentImage != null) {

TweenMax.to(currentImage, 1, {alpha:0});

if (currentImage.imageIndex == imagesArray.length - 1) {

currentImage = imagesArray[0];

} else {

currentImage = imagesArray[currentImage.imageIndex + 1];

}

} else {

currentImage = imagesArray[0];  

imageBorder.alpha = 0.5;

}

currentImage.x = imageBorder.x = centerX;

currentImage.y = imageBorder.y = centerY;

TweenMax.to(imageBorder, 0.5, {width: currentImage.width + 8,
height: currentImage.height + 8, 

glowFilter:{color:Math.random() * 0xffffff, alpha:1, blurX:20, 
blurY:20, strength:100, quality:1}});

TweenMax.to(currentImage, 1, {alpha:1});

}

 到此，這個可變框的圖片展示動畫動畫的Flash教程就制作完成了，你可以Ctrl+Enter 進(jìn)行測試一下，