flash10.用as3语句制作遮罩效果

教学目的：通过本节教学了解和掌握flash10.as3.0的脚本运用以及对动作面板、属性面板的熟悉与运用，进而制作出擦拭的动画效果。 　　教学对象：本教材是针对有一定动画制作基础和对属性面板，工具箱以及动作面板有所了解的朋友们编制的，因此省略了一些步骤，还望谅解。     教学要点：as3.0、属性面板、动作面板、as语句。

作前准备：     准备2张色彩不同的图片，经过制图软件（ps、fw）处理后，规格约为550*400，保存00到指定的文件夹待用。     制作步骤     1.启动FLASH10 软件。首先进入“欢迎”界面。如图1所示： 图1 选择“新建－flash文件（ActionScript3.0）”点击进入工作区。如图2所示：   图2 *我用的是传统版，此外还有动画、基本功能版等，那就要看你的习惯和爱好了。     2.确立文档属性 默认。如图3所示：   图3     3.导入素材到库     选择“文件－导入－导入到库”，将你准备好的素材图片均导入库中。素材图片是：   最终效果显示： http://hsb345.16789.net/domName/hsb345/201021622215697433.swf 全屏下载   祝你成功！       素材图1 素材图2     4.创建影片剪辑     （1）选择“插入－新建元件”，建立一个名为“被遮罩”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。     选择图层1第一帧，从库中拖出素材2图片到舞台，设置其规格为550*400，全居中。如图4所示： 图4     （2）选择“插入－新建元件”，建立一个名为“遮罩”的影片剪辑元件，点击确定，进入元件编辑区。就一个图层。     选择图层1第一帧，用矩形工具在舞台拖一个规格为40*40的、颜色随意的、无边线的矩形。左对齐－上对齐。如图5所示： 图5 右键库中的遮罩元件，打开该影片剪辑元件的属性面板。如图6、7所示： 图6 图7 点击元件属性面板下方的“高级”按钮，打开属性链接面板，设置其参数，如图8所示： 图8 其中类（c）填写：MaskRectangle ；基类为flash.display.MovieClip：URL可随便粘贴一个网址。       5.编辑制作场景     返回场景1，添加两个图层，共三个图层。自下而上命名为图片1、图片2、as。     （1）选择图片1图层第一帧，从库中拖出位图（素材1）到舞台，规格为550*400，全居中。上锁。如图9所示：   图9     （2）选择图片2图层第一帧，从库中拖出被遮罩影片剪辑元件到舞台，规格为550*400，全居中。如图10所示： 图10 选中该实例，在属性面板填写其实例名称为：mc 。上锁。如图11所示： 图11     （3）选择as图层第一帧，按f9，打开动作面板，在as编辑区输入，如下帧语句： import fl.transitions.Tween; import fl.transitions.easing.*; var boxWidth:Number = 40; var boxHeight:Number = 40; var rows:Number = 10; var columns:Number = 14; var rectangles:Array = new Array(); var tweens:Array = new Array(); var container:Sprite = new Sprite(); addChild(container); mc.mask = container; for (var i=0; i < rows; i++) { for (var j=0; j < columns; j++) { var maskRectangle:MaskRectangle = new MaskRectangle(); maskRectangle.x = j * boxWidth; maskRectangle.y = i * boxWidth; maskRectangle.scaleX = 0; container.addChild(maskRectangle); rectangles.push(maskRectangle);         } } var timer = new Timer(35,rectangles.length); timer.addEventListener(TimerEvent.TIMER, animateMask); timer.start(); function animateMask(e:Event):void { var rectangle = rectangles[timer.currentCount - 1]; var scaleTween:Tween = new Tween(rectangle,"scaleX",Regular.easeOut,0,1,1,true); tweens.push(scaleTween); } 锁定该图层。     6.本作业完成后时间轴显示如图6所示：     图6 　　7.测试存盘     *说明：     1.本教程脚本是as3语句编程，as2以下版本不适用。     2.遮罩影片剪辑元件没有加入场景1，它是通过其属性链接的设置和场景1帧脚本来实现的。