这是一个遮罩动画效果教程,学习用代码制作遮罩动画。
演示:
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、完工,测试影片。