利用代码实现的遮罩功能

百叶窗的效果

1. 
   
2. //----------画方块前的准备----------
   
3. //方块容器的建立与添加，也就是遮罩
   
4. var rect:Sprite = new Sprite();
   
5. addChild(rect);
   
6. 
   
7. //方块的起始宽度为0,高度为舞台宽,坐标的y值。变化的数目为rectnum.每次变化的宽度为rectaddwidth
   
8. var rectwidth:Number = 0;
   
9. var rectheight:Number = stage.stageWidth;
   
10. var rectY:Number = 0;
    
11. var rectnum:Number = 25;
    
12. var rectaddwidth:Number = 1;
    
13. 
    
14. //新建立数组，储存方块坐标值
    
15. var myArray:Array = new Array();
    
16. 
    
17. //取得舞台完度的方块总数分之一，以便分配方块变化宽度
    
18. var i:Number= stage.stageWidth/rectnum;
    
19. 
    
20. //找到每个方块的起始x坐标值，并推进数组内
    
21. var j:Number;
    
22. for (j = 0; j <=rectnum; j ++) {
    
23.         myArray.push(i*j);
    
24. }
    
25. 
    
26. //---------------每帧不断画方块----------
    
27. //添加进度帧侦听
    
28. rect.addEventListener(Event.ENTER_FRAME,rectwidthchange);
    
29. //设置方块宽度随帧的变化而增加
    
30. function rectwidthchange(event:Event):void {
    
31.         //如果方块宽度小于最终宽度，不断加宽；否则，移去进度帧侦听.
    
32.         if ( rectwidth < i-1) {
    
33.                 rectwidth += rectaddwidth;
    
34.         } else {
    
35.                 rect.removeEventListener(Event.ENTER_FRAME,rectwidthchange);
    
36.         }
    
37.         //每一帧都要清除容器，重新画方块
    
38.         rect.graphics.clear();
    
39.         rect.graphics.beginFill(0xfc2002);
    
40.         //利用for循环逐个画出所有方块
    
41.         for (j = 0; j <= rectnum; j ++) {
    
42.                 rect.graphics.drawRect(myArray[j],rectY,rectwidth,rectheight);
    
43.         }
    
44.         rect.graphics.endFill();
    
45. }
    
46. 
    
47. 
    
48. //--------图片载入---------
    
49. var imageloader:Loader = new Loader();
    
50. var imageurl:URLRequest = new URLRequest("fd99f5343a73a996a71e122a.jpg");
    
51. imageloader.load(imageurl);
    
52. addChild(imageloader);
    
53. 
    
54. //--------设置遮罩----------
    
55. imageloader.mask = rect;

复制代码

mask.zip (67.74 KB, 下载次数: 31)

2009-5-16 23:31 上传

点击文件名下载附件