当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash AS3教程:随图片大小而动态改变的图框

ActionScript
FLASH 3D相册之利用BitmapData类制作
Flash 脚本游戏开发教程 第一课
Flash 脚本游戏开发教程第二课
Flash 脚本游戏开发教程第三课
Flash 脚本游戏开发教程第四课
Flash 脚本游戏开发教程第五课
Flash 脚本游戏开发教程第六课
Flash 脚本游戏开发教程第七课
Flash 脚本游戏开发教程第八课
Flash AS实现的蝌蚪摆尾动画的教程
从基础开始深入学Flash AS3教程(4)(译文)
从基础开始深入学Flash AS3教程(5)(译文)
从基础开始深入Flash AS3教程(2)(译文)
从基础开始深入学Flash AS3教程(3)(译文)
Flash AS3对单个图片进行角色动作化处理
从基础开始深入Flash AS3教程(1)(译文)
Flash教程:if条件语句的用法
Flash AS教程:_visible属性的详细讲解
Flash AS教程:图片环绕旋转效
Flash教程:trace()的使用

ActionScript 中的 Flash AS3教程:随图片大小而动态改变的图框


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 71 ::
收藏到网摘: n/a

 这是一个为图片加框的效果,画框依据图片的大小而动态改变。(单击下面可以看到效果)

演示:


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同一目录下。

源文件、gs类库.rar