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 进行测试一下,