除雾特效

最近玩了一个游戏，里面有个特效，就像是玻璃上面有一层雾，然后鼠标移动可以擦除这些雾看清楚雾后面的内容。如图：

感觉这种效果挺有趣的，于是就做了一个DEMO。代码如下：

package{import flash.display.BlendMode;import flash.display.Sprite;import flash.events.Event;import flash.events.MouseEvent;import flashx.textLayout.formats.BackgroundColor;[SWF(backgroundColor="#cccccc")]public class BlendModeTest extends Sprite{[Embed(source="back.jpg")]private var Back:Class;private var crtCircleList:Array = [];private var returnCircleList:Array = [];private var erase:Sprite;public function BlendModeTest(){super();addChild(new Back());//加入遮罩层var maskLayer:Sprite = new Sprite();addChild(maskLayer);maskLayer.blendMode = BlendMode.LAYER;//加入遮挡var mask:Sprite = new Sprite();mask.graphics.beginFill(0xFFFFFF, 0.8);mask.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);mask.graphics.endFill();maskLayer.addChild(mask);//加入擦除层erase = new Sprite();erase.blendMode = BlendMode.ERASE;maskLayer.addChild(erase);//添加监听stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHd);stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHd);addEventListener(Event.ENTER_FRAME, onEnterFrame);}private function onMouseDownHd(e:MouseEvent):void{stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHd);}private function onMouseUpHd(e:MouseEvent):void{stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHd);}private function onMouseMoveHd(e:MouseEvent):void{var cc:Circle;if(returnCircleList.length > 0){cc = returnCircleList.pop();cc.init();}else{cc = new Circle();}cc.x = mouseX;cc.y = mouseY;crtCircleList.push(cc);erase.addChild(cc);}private function onEnterFrame(e:Event):void{var cc:Circle;for(var i:int = 0; i<crtCircleList.length; i++){cc = crtCircleList[i];cc.render();if(cc.alpha <= 0){erase.removeChild(cc);returnCircleList.push(crtCircleList.splice(i, 1)[0]);i--;}}}}}import flash.display.GradientType;import flash.display.Sprite;import flash.geom.Matrix;/** *创建一个渐变圆  * @author AresLee *  */class Circle extends Sprite{public function Circle( ):void{var cs:Array = [0xFFFFFF, 0xFFFFFF];var als:Array = [1, 0];var ras:Array = [100, 200];this.graphics.beginGradientFill(GradientType.RADIAL, cs, als, ras);this.graphics.drawCircle(0,0,80);this.graphics.endFill();}public function init( ):void{this.alpha = 1;}public function render( ):void{if(this.alpha > 0){this.alpha -= 0.01;}}}

其核心思想就是用到了Blendmode里面的erase效果。

1、添加背景图片到舞台

2、创建一个渐变的形状

3、添加遮挡层，用来包含遮挡图和擦除层，blendmode设置为layer

4、添加遮挡的图形

5、添加擦除层，blendmode设置为ereas

6、鼠标移动的时候，不断创建渐变形状，为了避免大量创建，事例用了对象池

7、每帧不断降低创建出来的渐变形状的alpha值

8、当alpha为0时回收对象。

由于不知道博客如何插入swf文件所以看不了效果啦。。