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

2016-03-18 15:15 1 1 收藏

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

【 tulaoshi.com - FLASH 】

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

(本文来源于图老师网站,更多请访问https://www.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(www.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

来源:https://www.tulaoshi.com/n/20160318/1886641.html

延伸阅读
标签: FLASH flash教程
poluoluo核心提示:Flash AS3教程:制作鼠标感应图片转动. 实例效果是图片在一个水平面上绕Y轴一圈,并用鼠标控制这些图片绕轴旋转. 图片排列状况 具体步骤: 首先建立一个影片,然后创建一个2帧的影片剪接元件picBox,在第一帧设置stop()代码,并为该影片创建连接类名 picBox . 如下图     好,...
标签: FLASH flash教程
当要运算两点距离时,我见不少人都是用最原始的运算方法,其实2.0开始就有了Point类,可以计算两点间距离TuLaoShi.com,除此之外,Point类还可用于计算矢量,某些看似复杂的计算,用上Point类就会变得简单。当然,要巧用Point类,必需要有矢量的知识。虽然,3.0的Point类和2.0的区别不大,但我之所以把这帖放在as3讨论区,是因为as3的Point类广...
标签: FLASH flash教程
ActionScript 3.0 自写类整理笔记(一)类的分包处理 分包情况 : base包:基础包,用于存放初级应用类 bat包:应用包,用于存放高级应用类 com包:系统化包,用于存放系统化的高级应用模块类 exe包:框架包,用于存放框架方面的类 item包:项目包,用于项目上靠经验积累下的类 module包:组件包,用于存放组件的类 这段时间,我个人...
标签: FLASH flash教程
poluoluo核心提示:在很多游戏中,都需要用到动态产生元件实例并控制的技术。比如飞机游戏里的敌人和子弹等。下面我通过例子讲解这种技术在Flash中的具体体现。 在很多游戏中,都需要用到动态产生元件实例并控制的技术。比如飞机游戏里的敌人和子弹等。下面我通过例子讲解这种技术在Flash中的具体体现。 1.新建一个Flash文档,背...
标签: FLASH flash教程
POLUOLUO核心提示:AS3教程:如何制作一个完整的loading. loading这个东西,说穿了其实是给用户反馈的一种表现形式,在客户端中的loading,通常以鼠标的手型变化来表现;而在web端,loading的创意则层出不穷了,而且给用户的反馈更好。本文将主要阐述在flash中制作loading的一些问题。 先来看看loading的原理。在flash中,制作loading的...

经验教程

219

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部