可变框的图片展示动画

我们平时在flash中进行图片展示，一般都会把图片做成相同大小，然后加上图框，但有时为了保留图片真正大小来展示，这时如果加一个固定大小的框就有点麻烦了，因为图片变大或变小了，图框却不会自由变大变小，要解决这个问题就必须通过flash as来实现了，下面我们就来讲讲这个flash教程：可变框的图片展示动画的制作。

先看看真正的效果图吧（你可以点击动画查看效果）。

 具体制作方法及步骤如下：

步骤一、新建一个FLASH文档，按Ctrl+J进行设置动画的宽度及高度，这里设置为550*550，背影颜色设置为黑色

步骤二、到网上下载自己认为较好的，但不同规格的图片，最大宽度及高度不要超过530*530，然后分别把这几张图片导入到库。

步骤三、然后分别把这几张图片拖到舞台，按F8进行转换为影片剪辑，分别命名为image1,image2,image3,image4,image5......

步骤四、然后隐藏该图层，再新建一个图层，把该图层命名为“图框”，然后用矩形工具绘制作一个长方形边框，填充色禁止，笔触白色，高度为4像素，按F8转影片剪辑，命名为“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 进行测试一下，