除雾特效

最新推荐文章于 2024-05-25 09:52:37 发布

DreamSoar

最新推荐文章于 2024-05-25 09:52:37 发布

阅读量715

点赞数

分类专栏： AS3 文章标签：特效

本文链接：https://blog.csdn.net/kakaxi2222/article/details/12392237

版权

AS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

感觉这种效果挺有趣的，于是就做了一个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文件所以看不了效果啦。。