Flash AS3制作画框随图片的大小而动态改变教程

所属分类: 媒体动画 / Flash教程 阅读数: 64
收藏 0 赞 0 分享

这篇教程是向脚本之家介绍Flash AS3制作画框随图片的大小而动态改变方法,这是一个为图片加框的效果,画框依据图片的大小而动态改变。(单击下面可以看到效果)

演示:

1、新建一个Flash文件,宽、高设置为550*420,背景黑色。

2、准备4张大小不同规格的图片,最大的宽、高不要超过530*380。

3、导入图片:在文件菜单选导入=>导入到库。如图1:

sshot-1.png

 4、图层1,改名为图片。拖第一个图片到舞台将它转换成影片剪辑。命名”Image 1 ″设定注册点居中。如图2:

sshot-2.png

 5、重复第4步,拖入其它的3张图片到舞台,任意摆放。命名”Image 2 ″,”Image 3 ″,”Image 4 ″,库面板如图3:

sshot-3.png

6、给舞台上的实例命名“image1”至“image4”。

7、隐藏图层1,添加图层2。图4:

sshot-4.png


8、图层2改名为边框,用矩形工具,填充色禁止,笔触白色,高度为4像素,画一个长方形边框。

9、将长方形转换为影片剪辑,设置注册点居中。舞台实例命名为“imageBorder”。图5:

sshot-5.png

10、添加图层3,命名为as,输入代码:


复制代码
代码如下:
//Import TweenMax (we use it for animation)
import gs.*;
//Save the center coordinates of the stage
var centerX:uint = stage.stageWidth / 2;
var centerY:uint = stage.stageHeight / 2;
//Let’s add the images to an array
var imagesArray:Array = new Array(image1,image2,image3,image4);
//This variable will store the current image displayed
var currentImage:MovieClip = null;
//Make the border invisible at first
imageBorder.alpha = 0;
//Loop through the array elements
for (var i:uint = 0; i < imagesArray.length; i++) {
//We want all the images to be invisible at the beginning
imagesArray[i].alpha = 0;
//Save the index of the image to a variable called "imageIndex"
imagesArray[i].imageIndex = i;
}
//We listen when the user clicks the mouse on the stage
stage.addEventListener(MouseEvent.CLICK, stageClicked);
//This function is called when the user clicks the stage
function stageClicked(e:MouseEvent):void {
//Check that the current image is not null
if (currentImage != null) {
//Animate the current image away
TweenMax.to(currentImage, 1, {alpha:0});
//Check to see if we are at the end of the imagesArray
if (currentImage.imageIndex == imagesArray.length - 1) {
//Set the first image of the array to be our currentImage
currentImage = imagesArray[0];
} else {
//We are not at the end of the array, so get the next image from the array
currentImage = imagesArray[currentImage.imageIndex + 1];
}
} else {
//If the currentImage is null (= we just started the movie), we set the first image in the array
//to be our current image.
currentImage = imagesArray[0];
//Set the border’s alpha to 0.5
imageBorder.alpha = 0.5;
}
//Position the current image and the border to the center of the stage
currentImage.x = imageBorder.x = centerX;
currentImage.y = imageBorder.y = centerY;
//Animate the border’s width and height according to the current image’s dimensions.
//We also a nice glow effect to the image border
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}});
//Animate the currentImage’s alpha
TweenMax.to(currentImage, 1, {alpha:1});
}

11、全部完工,测试影片。注意:把gs类库保存在fla同一目录下。

教程结束,以上就是Flash AS3制作画框随图片的大小而动态改变教程,希望能对大家有所帮助,谢谢阅读!
更多精彩内容其他人还在看

flash制作可爱的简单线条笑脸

这篇教程是向脚本之家的朋友介绍flash制作可爱的简单线条笑脸方法,教程制作出来的笑脸非常可爱,而且方法不是很难,推荐过来,大家一起来学习吧
收藏 0 赞 0 分享

flash中制作文字按照顺序显示出来的gif动画

这篇教程是向脚本之家的朋友介绍flash中制作文字按照顺序显示出来的gif动画方法,教程制作出来的动画效果非常漂亮,难度不是很大,推荐过来,大家快快来学习吧
收藏 0 赞 0 分享

flash制作一个一个字的冒出来的打字效果

这篇教程是向脚本之家的朋友介绍flash制作一个一个字的冒出来的打字效果方法,教程很简单的,很适合新手来学习,推荐到脚本之家,喜欢的朋友快快来学习吧
收藏 0 赞 0 分享

用flash制作画卷展开、合拢的gif动画效果

这篇教程是向脚本之家介绍用flash制作画卷展开、合拢的效果方法,教程制作出来的效果很不错,难度不是很大,推荐到脚本之家,喜欢的朋友快快来学习吧
收藏 0 赞 0 分享

flash怎么制作太阳月亮地球演示动态图?

flash怎么制作太阳月亮地球演示动态图?这个动图的制作过程很麻烦,因为出现的元素很多,下面我们就来看看绘制的图文教程,每一步都有,参数很清楚,想学习的朋友可以进来参考一下
收藏 0 赞 0 分享

flash制作一闪一闪的gif动画文字按钮效果

这篇教程是向脚本之家的朋友介绍flash制作一闪一闪的gif动画文字按钮效果方法,教程真的很不错,制作出来的效果很漂亮,推荐过来,一起来学习吧
收藏 0 赞 0 分享

在flash中制作由花生组成的好看花型

这篇教程是向脚本之家的朋友介绍在flash中制作由花生组成的好看花型方法,教程制作出来的图形很漂亮,难度也不是很大,推荐到脚本之家,喜欢的朋友一起来学习吧
收藏 0 赞 0 分享

flash逐帧动画制作全过程解析

这篇教程是向脚本之家的朋友分享flash逐帧动画制作全过程,教程非常基础,很适合新手来学习,推荐过来,有兴趣的朋友可以过来学习
收藏 0 赞 0 分享

flash引导层动画:引导层制作飞行的飞机

这篇教程是向脚本之家的朋友分享flash引导层动画:引导层制作飞行的飞机教程,教程真的很不错,很适合新手来学习,推荐到脚本之家,喜欢的朋友快快来学习吧
收藏 0 赞 0 分享

Flash把静态的水的图片制作成形象逼真的水波效果

这篇教程是向脚本之家的朋友分享Flash把静态的水的图片制作成形象逼真的水波效果方法,教程真的很不错,很值得大家学习,推荐到脚本之家,喜欢的朋友快快来学习吧
收藏 0 赞 0 分享
查看更多