as3制作酷炫运动遮罩效果（二）

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、完工，测试影片。

附件下载：遮罩动画（2）.rar