Flash AS3教程：教你用代码创建好看的遮罩动画效果

本教程是教大家利用Flash AS3代码创建好看的遮罩动画效果，并且将学习如何在一个图像上创建多个大小不同的运动遮罩。教程非常实用，转发过来，希望与来客网的朋友一起分享学习！

演示：


1、新建Flash文件，导入所需的图片到舞台，设置舞台属性的宽、高同图片相同大小。

2、将图片设置为左对齐、上对齐。右键单击图片转换成影片剪辑，命名为“Background”，设置注册点为居中。图1：

3、将图层1改名为背景，在属性面板中输入实例名称：“backgroundImage” 锁定。图2：

4、新建一个图层，用椭圆工具画一个禁止笔触的50*50的圆，填充色任意。

5、把圆转换成影片剪辑，设置如下。图3：

6、删除舞台上的圆，图层改名为as。至此fla的美工已全部完成。

7、新建ActionScript文件，编写一个外部的MyMask.as文件。在编译器中输入代码： 

package { 
       import flash.display.MovieClip; 
        public class MyMask extends MovieClip { 
                //Mask’s x and y speed 
                public var speedX:Number; 
                public var speedY:Number; 
                //Set the given scale for this mask, when we create a new 
                //mask object 
                public function MyMask(scale:Number) { 
                        this.scaleX = scale; 
                        this.scaleY = scale; 
                } 
        } 
}

这是一个名为MyMask.as的遮罩类，保存在fla文件的同一目录下。

8、切换到fla，在as层输入代码：

//We use an array to hold all our masks. 
//(Except the mask that follows our cursor) 
var masks:Array = new Array(); 
//We add all of the masks to a container 
var maskContainer:Sprite = new Sprite(); 
//Set the maskContainer to be the image’s mask 
backgroundImage.mask = maskContainer; 
//Add the container on the stage 
addChild(maskContainer); 
//Create the mask which follows cursor movement (master mask) 
var masterMask:MyMask = new MyMask(1); 
//Set the master masks’s coordinates to match cursor’s coordinates 
masterMask.x = mouseX; 
masterMask.y = mouseY; 
//Add the master mask to a container 
maskContainer.addChild(masterMask); 
//Cache the image and container as bitmap, so we 
//can animate the alpha of the masks 
maskContainer.cacheAsBitmap=true; 
backgroundImage.cacheAsBitmap=true; 
//Create a timer that is called every 0.2 seconds 
var timer:Timer = new Timer(200,0); 
timer.addEventListener(TimerEvent.TIMER, timerEvent); 
timer.start(); 
//This function is called every 0.2 seconds. 
//We create a new mask in this function. 
function timerEvent(e:TimerEvent):void { 
        //Calculate a random scale for the new mask (0 to 1.5) 
        var scale:Number = Math.random() * 1.5 + 0.5; 
        //Create a new mask with random scale 
        var newMask:MyMask = new MyMask(scale); 
        //Set the position for the new mask 
        newMask.x = mouseX; 
        newMask.y = mouseY; 
        //Assign a random x and y speed for the mask 
        newMask.speedX = Math.random() * 20 - 10; 
        newMask.speedY = Math.random() * 20 - 10; 
        //Add the mask to the container 
        maskContainer.addChild(newMask); 
        //Add the mask to the array 
        masks.push(newMask); 
} 
//We need ENTER_FRAME to animate the masks 
addEventListener(Event.ENTER_FRAME, enterFrameHandler); 
//This function is called in each frame 
function enterFrameHandler(e:Event):void { 
        //Loop through the mask array 
        for (var i:uint = 0; i < masks.length; i++) { 
                //Save a mask to a local variable 
                var myMask:MyMask = (MyMask)(masks[i]); 
               //Update the x and y position 
                myMask.x += myMask.speedX; 
                myMask.y += myMask.speedY; 
                //Increase the scale 
                myMask.scaleX += 0.1; 
                myMask.scaleY += 0.1; 
                //Reduce the alpha 
                myMask.alpha -= 0.01; 
                //If the alpha is below 0, remove the mask 
                //from the container and from the array 
                if (myMask.alpha < 0) { 
                        masks.splice(i,1); 
                        maskContainer.removeChild(myMask); 
                } 
        } 
        //Update the master mask position 
        masterMask.x = mouseX; 
        masterMask.y = mouseY; 
}

9、好了，工作全部完成，测试你的影片。

这是一个遮罩动画效果教程，学习用代码制作遮罩动画。

演示：

1、准备一张图片。

2、新建一个500*300的Flash文件。（设置宽、高同图片大小）

3、导入图片到库中。

4、从库中把图片拖到舞台上，左对齐，上对齐。

5、右键点击图片，转换成影片剪辑。元件名：“cityMC”。图1：

6、在属性面板中输入实例名称：“cityMC”。图2：

7、锁定图层1，添加图层2。用圆角矩形工具在舞台上任意位置、任意颜色、画一个圆角为10的40*40的矩形。图3：

8、把圆角矩形转换成影片剪辑，名称为“maskMC”，注册点居中。图4：

9、删除舞台上的圆角矩形。打开库右键单击maskMC影片剪辑，选属性作类链接，类名：“MaskRectangle” 图5：

10、把图层2改为as，输入代码：

//We need these classes for the animation 
import fl.transitions.Tween; 
import fl.transitions.easing.*; 

//These are the mask rectangle’s width and height 
var boxWidth:Number = 40; 
var boxHeight:Number = 40; 

//We want nine rows and 14 columns to make the animation look nice 
var rows:Number = 9; 
var columns:Number = 14; 

//We will add the rectangle’s into an array (we need this array in the animation) 
var rectangles:Array = new Array(); 

//We add the tweens into an array so they don’t get carbage collected 
var tweens:Array = new Array(); 

//This container will hold all the mask rectangles 
var container:Sprite = new Sprite(); 

//Add the container onto the stage 
addChild(container); 

//Set the container to be the image’s mask 
cityMC.mask = container; 

//Loop through the rows 
for (var i=0; i < rows; i++) { 

        //Loop through the columns 
        for (var j=0; j < columns; j++) { 

                //Create a new mask rectangle 
                var maskRectangle:MaskRectangle = new MaskRectangle(); 

                //Position the mask rectangle 
                maskRectangle.x = j * boxWidth; 
                maskRectangle.y = i * boxWidth; 

                //Set the scaleX to be 0, so the rectangle will not be visible 
                maskRectangle.scaleX = 0; 

                //Add the rectangle onto the container 
                container.addChild(maskRectangle); 

                //Add the mask rectangle to the rectangles array 
                rectangles.push(maskRectangle); 
        } 
} 

//Create and start a timer. 
//This timer is called as many times as there are rectangles on the stage. 
var timer = new Timer(35,rectangles.length); 
timer.addEventListener(TimerEvent.TIMER, animateMask); 
timer.start(); 

//This function is called every 0.035 seconds 
function animateMask(e:Event):void { 

        //Save the rectangle to a local variable 
        var rectangle = rectangles[timer.currentCount - 1]; 

        //Tween the scaleX of the rectangle 
        var scaleTween:Tween = new Tween(rectangle,"scaleX",Regular.easeOut,0,1,1,true); 
        tweens.push(scaleTween); 

}

11、完工，测试影片。

演示：

1、导入你想要使用的一个图片到舞台，设置属性：宽、高与图片相同。

2、把图片拖到舞台上，左对齐，上对齐。右键单击图片，转换成电影修剪。（名字任意）图1：

3、在属性面板中输入实例名字 " imageMC" 。图2：

4、添加as层，输入代码：

//This container contains all the mask graphics 
var container:Sprite = new Sprite(); 
addChild (container); 

//Set the container to be the image’s mask 
imageMC.mask = container; 

//Set the starting point 
container.graphics.moveTo (mouseX, mouseY); 
addEventListener (Event.ENTER_FRAME, enterFrameHandler); 
/*Draw a new rectangle in each frame and add it onto the container 
NOTE: you can use all kinds of shapes, not just rectangles! */ 
function enterFrameHandler (e:Event):void { 
        container.graphics.beginFill(0xff00ff); 
        container.graphics.drawRect(mouseX-50, mouseY-50, 100, 100); 
        container.graphics.endFill(); 
} 
Mouse.hide();

5、完成，测试你的影片剪辑。遮罩可以做成任意形状。只是矩形、圆形等简单的图形比较容易一些，复杂的图形用代码绘制要难一些。

教程结束，以上就是Flash AS3代码创建好看的遮罩动画效果，希望大家看完之后会有一定的帮助，谢谢大家观看本教程！