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

a1061735272

a1061735272

2016-03-18 15:15

最近很多朋友喜欢上PS,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

Poluoluo核心提示:这是一个为图片加框的效果,画框依据图片的大小而动态改变。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/) 这是一个为图片加框的效果,画框依据图片的大小而动态改变。(单击下面可以看到效果)

演示:


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), w(m.tulaoshi.com)e 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
展开更多 50%)
分享

猜你喜欢

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

FLASH flash教程
Flash AS3教程:随图片大小而动态改变的图框-Flash actionscript

Flash AS3教程:ClassLoader类-Flash actionscript

FLASH flash教程
Flash AS3教程:ClassLoader类-Flash actionscript

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash AS3教程:类的分包处理-Flash actionscript

FLASH flash教程
Flash AS3教程:类的分包处理-Flash actionscript

Flash AS3教程:用ActionScript侦测鼠标的位置-Flash actionscript

FLASH flash教程
Flash AS3教程:用ActionScript侦测鼠标的位置-Flash actionscript

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript动态改变网页图片大小

Web开发
JavaScript动态改变网页图片大小

Flash AS3实例教程:简单的转动的星星-Flash actionscript

FLASH flash教程
Flash AS3实例教程:简单的转动的星星-Flash actionscript

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

painter 7和painter8结合的美少年教程

painter 7和painter8结合的美少年教程

AutoCAD教程:简单制作一把梳子

AutoCAD教程:简单制作一把梳子
下拉加载更多内容 ↓