Zi 字媒體

教學主題: Flash AS3教程：創建好看的遮罩動畫效果 大家好!! 小編今天來和大家分享關於 Flash/3D/CAD教程中的Flash教程教學 今天的這個教學主題是: Flash AS3教程：創建好看的遮罩動畫效果 這教學的重點為這幾點 [ 動畫,效果,好看,創建,教程,圖片,舞台,一個,影片,輸入, ] 希望你可以從這幾點中領悟到修圖的精華 本文重點 本教程是一個創建遮罩效果的教程，將學習如何在一個圖像上創建多個大小不同的運動遮罩。下面一起來學習。 演示： 1、新建Flash文件，導入所需的圖片到舞台，設置舞台屬性的寬、高同圖片相同大小。 2、將圖片設置為左對齊、上對齊。右鍵單擊圖片轉換成影片剪輯，命名為“Background”，設置註冊點為居中。圖1： 3、將圖層1改名為背景，在屬性面板中輸入實例名稱：“backgroundImage” 鎖定。圖2： 4、新建一個圖層，用橢圓工具畫一個禁止筆觸的50*50的圓，填充色任意。 5、把圓轉換成影片剪輯，設置如下。圖3： 6、刪除舞台上的圓，圖層改名為as。至此fla的美工已全部完成。 7、新建ActionScript文件，編寫一個外部的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;                 }         } } 這是一個名為MyMask.as的遮罩類，保存在fla文件的同一目錄下。 8、切換到fla，在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                  //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                          masks.splice(i,1);                         maskContainer.removeChild(myMask);                 }         }         //Update the master mask position         masterMask.x = mouseX;         masterMask.y = mouseY; } 9、好了，工作全部完成，測試你的影片。   這是一個遮罩動畫效果教程，學習用代碼製作遮罩動畫。 演示： 1、準備一張圖片。 2、新建一個500*300的Flash文件。（設置寬、高同圖片大小） 3、導入圖片到庫中。 4、從庫中把圖片拖到舞台上，左對齊，上對齊。 5、右鍵點擊圖片，轉換成影片剪輯。元件名：“cityMC”。圖1： 6、在屬性面板中輸入實例名稱：“cityMC”。圖2： 7、鎖定圖層1，添加圖層2。用圓角矩形工具在舞台上任意位置、任意顏色、畫一個圓角為10的40*40的矩形。圖3： 8、把圓角矩形轉換成影片剪輯，名稱為“maskMC”，註冊點居中。圖4： 9、刪除舞台上的圓角矩形。打開庫右鍵單擊maskMC影片剪輯，選屬性作類鏈接，類名：“MaskRectangle” 圖5： 10、把圖層2改為as，輸入代碼： //We need these classes for the animation import fl.transitions.Tween; import fl.transitions.easing.*; //These are the mask rectangle’s width and height var boxWidth:Number = 40; var boxHeight:Number = 40; //We want nine rows and 14 columns to make the animation look nice var rows:Number = 9; var columns:Number = 14; //We will add the rectangle’s into an array (we need this array in the animation) var rectangles:Array = new Array(); //We add the tweens into an array so they don’t get carbage collected var tweens:Array = new Array(); //This container will hold all the mask rectangles var container:Sprite = new Sprite(); //Add the container onto the stage addChild(container); //Set the container to be the image’s mask cityMC.mask = container; //Loop through the rows for (var i=0; i          //Loop through the columns         for (var j=0; j                  //Create a new mask rectangle                 var maskRectangle:MaskRectangle = new MaskRectangle();                 //Position the mask rectangle                 maskRectangle.x = j * boxWidth;                 maskRectangle.y = i * boxWidth;                 //Set the scaleX to be 0, so the rectangle will not be visible                 maskRectangle.scaleX = 0;                 //Add the rectangle onto the container                 container.addChild(maskRectangle);                 //Add the mask rectangle to the rectangles array                 rectangles.push(maskRectangle);         } } //Create and start a timer. //This timer is called as many times as there are rectangles on the stage. var timer = new Timer(35,rectangles.length); timer.addEventListener(TimerEvent.TIMER, animateMask); timer.start(); //This function is called every 0.035 seconds function animateMask(e:Event):void {         //Save the rectangle to a local variable         var rectangle = rectangles[timer.currentCount – 1];         //Tween the scaleX of the rectangle         var scaleTween:Tween = new Tween(rectangle,"scaleX",Regular.easeOut,0,1,1,true);         tweens.push(scaleTween); } 11、完工，測試影片。 演示： 1、導入你想要使用的一個圖片到舞台，設置屬性：寬、高與圖片相同。 2、把圖片拖到舞台上，左對齊，上對齊。右鍵單擊圖片，轉換成電影修剪。（名字任意）圖1： 3、在屬性面板中輸入實例名字 " imageMC" 。圖2： 4、添加as層，輸入代碼： //This container contains all the mask graphics var container:Sprite = new Sprite(); addChild (container); //Set the container to be the image’s mask imageMC.mask = container; //Set the starting point container.graphics.moveTo (mouseX, mouseY); addEventListener (Event.ENTER_FRAME, enterFrameHandler); /*Draw a new rectangle in each frame and add it onto the container NOTE: you can use all kinds of shapes, not just rectangles! */ function enterFrameHandler (e:Event):void {         container.graphics.beginFill(0xff00ff);         container.graphics.drawRect(mouseX-50, mouseY-50, 100, 100);         container.graphics.endFill(); } Mouse.hide(); 5、完成，測試你的影片剪輯。遮罩可以做成任意形狀。只是矩形、圓形等簡單的圖形比較容易一些，複雜的圖形用代碼繪製要難一些。 討論：http://www.missyuan.com/viewthread.php?tid=441990 看完小編分享的教學之後 是不是對Flash教程中的Flash/3D/CAD教程教學更熟悉了呢? 希望我們所介紹的 Flash AS3教程：創建好看的遮罩動畫效果 這教學會喜歡 文章標題: 骨子愛創意- Flash AS3教程：創建好看的遮罩動畫效果–轉載請註明來源處 本教學分類為Flash教程中的 Flash/3D/CAD教程相關教學 文章相關關鍵字為: 動畫,效果,好看,創建,教程,圖片,舞台,一個,影片,輸入, 本文永久連結 :Flash AS3教程：創建好看的遮罩動畫效果 本文轉載自 :VIA