软件学堂

网游分类软件分类

Adobe Flash Builder

424MB|v2021.0中文破解版

详情

可变框的图片展示动画

2021-09-11 来源:网络

我们平时在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 进行测试一下,

上一篇:如何制作flash的加载动画
下一篇:网站如何配色及网站配色方案

相关文章