Flash AS3制作画框随图片的大小而动态改变教程
这篇教程是向脚本之家介绍Flash AS3制作画框随图片的大小而动态改变方法,这是一个为图片加框的效果,画框依据图片的大小而动态改变。(单击下面可以看到效果)
演示:
1、新建一个Flash文件,宽、高设置为550*420,背景黑色。
2、准备4张大小不同规格的图片,最大的宽、高不要超过530*380。
3、导入图片:在文件菜单选导入=>导入到库。如图1:
4、图层1,改名为图片。拖第一个图片到舞台将它转换成影片剪辑。命名”Image 1 ″设定注册点居中。如图2:
5、重复第4步,拖入其它的3张图片到舞台,任意摆放。命名”Image 2 ″,”Image 3 ″,”Image 4 ″,库面板如图3:
6、给舞台上的实例命名“image1”至“image4”。
7、隐藏图层1,添加图层2。图4:
8、图层2改名为边框,用矩形工具,填充色禁止,笔触白色,高度为4像素,画一个长方形边框。
9、将长方形转换为影片剪辑,设置注册点居中。舞台实例命名为“imageBorder”。图5:
10、添加图层3,命名为as,输入代码:
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});
}
教程结束,以上就是Flash AS3制作画框随图片的大小而动态改变教程,希望能对大家有所帮助,谢谢阅读!
相关文章
flash如何做雨滴下落的动画效果? Flash8做一个下雨效果的技巧
flash如何做雨滴下落的动画效果?想要做一个逼真的雨滴落下的效果,该怎么做雨滴落下水花扩散的效果呢?下面我们就来看看Flash8做一个下雨效果的技巧2022-08-18flash理发店旋转彩灯动画效果怎么做? 理发店旋转灯制作技巧
flash理发店旋转彩灯动画效果怎么做?经常使用flash制作动画效果,该怎么制作旋转灯效果,下面我们就来看看理发店旋转灯制作技巧,详细请看下文介绍2022-07-23flash怎么把形状变成文字? flash星星变文字动画的实现方法
flash怎么把形状变成文字?flash绘制的星星想要慢慢变成文字,该怎么将图形变文字呢?下面我们就来看看flash星星变文字动画的实现方法,详细请看下文介绍2022-06-06- flash怎么制作补间动画?flash中想要制作形状变化的动画效果,该怎么制作补间动画呢?下面我们就来就来看看flash变形动画的实现方法2022-02-06
FLASH怎么让摇曳的荷花更逼着? flash制作风吹荷花动画的技巧
FLASH怎么让摇曳的荷花更逼?flash中想要制作风吹荷花的动画熊爱国,该怎么制作这个效果呢?下面我们就来看看flash制作风吹荷花动画的技巧2022-02-06flash怎么制作荷花在荷花池里摇摆的动画? FLASH做摆动荷花的技巧
flash怎么制作荷花在荷花池里摇摆的动画??flash中想要制作荷花摇摆的动画,该怎么制作荷花摇曳的动画呢?下面我们就来看看FLASH做摆动荷花的技巧2022-02-06flash怎么做径向彩虹文字动画? 文字添加彩虹动画效果的技巧
flash怎么做径向彩虹文字动画?flash椎间盘买个输入的文字,想要添加动画效果,该怎么添加径向彩虹文字效果呢?下面我们就来看看flash文字添加彩虹动画效果的技巧,详细请2021-11-09flash怎么做眨眼动画效果? flash动漫人物眨眼动画的做法
flash怎么做眨眼动画效果?flash中想要制作一个动漫人物的眼睛眨眼动画,该怎么制作呢?下面我们就来看看flash动漫人物眨眼动画的做法2021-11-08flash怎么制作火焰文字效果? flash做火焰字体动画的技巧
flash怎么制作火焰文字效果?flash中想要制作一个熊熊燃烧的活颜文字,该怎么制作这个文字效果呢?下面我们就来看看flash做火焰字体动画的技巧2021-11-01flash怎么做文字动画logo? 闪动的片头动画flash的实现方法
flash怎么做文字动画logo?flash中想要制作一个文字logo的动画,让文字闪烁,该怎么制作这个效果呢?下面我们就来看看flash制作文字动画的技巧2021-10-29
最新评论