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

ActionScript
ActionScript3教程:语句实例
ActionScipt技巧和开发中会遇到的问题
Flash as3.0教程:弹性小球
flash as简单制作飘雪动画
Flash AS 教程:交互动画
Flash ActionScript 3.0教程:学习Dot类
Flash AS 教程:子类化显示对象
Flash AS 教程:动画事件
Flash AS 教程:创建文档类(Document class)
Flash AS 教程:帧循环
Flash AS 教程:类和面向对象编程
Flash AS 教程:构造函数(Constructor)
Flex程序开发心得小结
Flash游戏开发教程:第一节
FLASH中的元件能在Flex中完美使用
关于XML在FLASH中的应用
Flash AS教程:decorator Pattern
Flash AS实例教程:简单的loading
Flash教程:彻底学习RadioButton组件
Flash AS教程:复制粘贴类

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 84 ::
收藏到网摘: 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