用AS3制作的特酷的遮罩動(dòng)畫效果

今天我們來講解一個(gè)通過FLASH AS3來制作特酷的遮罩動(dòng)畫效果的教程，先看一下最終效果吧：

這里以FLASH CS4來講解，具體制作步驟如下：

步驟一、打開FLASH CS4，新建一個(gè)FLASH文檔，選擇AS3，然后按Ctrl+J進(jìn)行文檔屬性設(shè)置，把文檔的高度、寬度分別設(shè)置為550×314（這個(gè)大小與背景圖片大小相同），如圖：

步驟二、導(dǎo)入作為背景圖片，選中背景圖片，按下【F8】，轉(zhuǎn)為【影片剪輯】，名稱填寫【背景圖】，這個(gè)名稱你可以自己任意填寫名稱，點(diǎn)【確定】，如圖所示：

接著對(duì)這個(gè)有背景圖的圖層進(jìn)行鎖定，如圖：

步驟三、新建一個(gè)圖層，取個(gè)名稱遮罩層，然后橢圓工具畫一個(gè)禁止筆觸為50*50的圓，填充黑色（其實(shí)這里可以填充任何一種顏色），然后按F8，把這個(gè)圓轉(zhuǎn)為影片剪輯，名稱設(shè)為mask，如圖所示：

步驟四、刪除舞臺(tái)中的這個(gè)圓，把該圖層改名為AS。

步驟五、新建ActionScript文件，編寫一個(gè)外部的MyMask.as文件。在編譯器中輸入代碼如下：

package {
 
 import flash.display.MovieClip;
 
 public class MyMask extends MovieClip {
 
  //Mask's x and y speed
  public var speedX:Number;
  public var speedY:Number;
 
  //Set the given scale for this mask, when we create a new
  //mask object
  public function MyMask(scale:Number) {
   this.scaleX = scale;
   this.scaleY = scale;
  }
 }
}

步驟六、轉(zhuǎn)到flash中的as層，輸入如下as代碼：

	//We use an array to hold all our masks.

	//(Except the mask that follows our cursor)

	var masks:Array = new Array();

	 

	//We add all of the masks to a container

	var maskContainer:Sprite = new Sprite();

	 

	//Set the maskContainer to be the image's mask

	backgroundImage.mask=maskContainer;

	 

	//Add the container on the stage

	addChild(maskContainer);

	 

	//Create the mask which follows cursor movement (master mask)

	var masterMask:MyMask=new MyMask(1);

	 

	//Set the master masks's coordinates to match cursor's coordinates

	masterMask.x=mouseX;

	masterMask.y=mouseY;

	 

	//Add the master mask to a container

	maskContainer.addChild(masterMask);

	 

	//Cache the image and container as bitmap, so we

	//can animate the alpha of the masks

	maskContainer.cacheAsBitmap=true;

	backgroundImage.cacheAsBitmap=true;

	 

	//Create a timer that is called every 0.2 seconds

	var timer:Timer=new Timer(200,0);

	timer.addEventListener(TimerEvent.TIMER, timerEvent);

	timer.start();

	 

	//This function is called every 0.2 seconds.

	//We create a new mask in this function.

	function timerEvent(e:TimerEvent):void {

	 

	 //Calculate a random scale for the new mask (0 to 1.5)

	 var scale:Number=Math.random()*1.5 + 0.5;

	 

	 //Create a new mask with random scale

	 var newMask:MyMask=new MyMask(scale);

	 

	 //Set the position for the new mask

	 newMask.x=mouseX;

	 newMask.y=mouseY;

	 

	 //Assign a random x and y speed for the mask

	 newMask.speedX=Math.random()*20-10;

	 newMask.speedY=Math.random()*20-10;

	 

	 //Add the mask to the container

	 maskContainer.addChild(newMask);

	 

	 //Add the mask to the array

	 masks.push(newMask);

	}

	 

	//We need ENTER_FRAME to animate the masks

	addEventListener(Event.ENTER_FRAME, enterFrameHandler);

	 

	//This function is called in each frame

	function enterFrameHandler(e:Event):void {

	 

	 //Loop through the mask array

	 for (var i:uint = 0; i < masks.length; i++) {

	 

	  //Save a mask to a local variable

	  var myMask:MyMask = (MyMask)(masks[i]);

	 

	  //Update the x and y position

	  myMask.x+=myMask.speedX;

	  myMask.y+=myMask.speedY;

	 

	  //Increase the scale

	  myMask.scaleX+=0.1;

	  myMask.scaleY+=0.1;

	 

	  //Reduce the alpha

	  myMask.alpha-=0.01;

	 

	  //If the alpha is below 0, remove the mask

	  //from the container and from the array

	  if (myMask.alpha<0) {

	   masks.splice(i,1);

	   maskContainer.removeChild(myMask);

	  }

	 }

	 

	 //Update the master mask position

	 masterMask.x=mouseX;

	 masterMask.y=mouseY;

	}

至此，整個(gè)用AS3制作的特酷的遮罩動(dòng)畫效果動(dòng)畫就制作完成了，你可以按Ctrl+Enter進(jìn)行測(cè)試。

感興趣的朋友可以直接下載flash源碼研究一下。

遮罩動(dòng)畫效果源文件下載