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

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

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


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