Flash AS3教程:教你用代碼創(chuàng)建好看的遮罩動畫效果

本教程是教大家利用Flash AS3代碼創(chuàng)建好看的遮罩動畫效果,并且將學(xué)習(xí)如何在一個圖像上創(chuàng)建多個大小不同的運(yùn)動遮罩。教程非常實用,轉(zhuǎn)發(fā)過來,希望與腳本之家的朋友一起分享學(xué)習(xí)!
演示:
1、新建Flash文件,導(dǎo)入所需的圖片到舞臺,設(shè)置舞臺屬性的寬、高同圖片相同大小。
2、將圖片設(shè)置為左對齊、上對齊。右鍵單擊圖片轉(zhuǎn)換成影片剪輯,命名為“Background”,設(shè)置注冊點為居中。圖1:
3、將圖層1改名為背景,在屬性面板中輸入實例名稱:“backgroundImage” 鎖定。圖2:
4、新建一個圖層,用橢圓工具畫一個禁止筆觸的50*50的圓,填充色任意。
5、把圓轉(zhuǎn)換成影片剪輯,設(shè)置如下。圖3:
6、刪除舞臺上的圓,圖層改名為as。至此fla的美工已全部完成。
7、新建ActionScript文件,編寫一個外部的MyMask.as文件。在編譯器中輸入代碼:
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層輸入代碼:
//(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;
}
9、好了,工作全部完成,測試你的影片。
這是一個遮罩動畫效果教程,學(xué)習(xí)用代碼制作遮罩動畫。
演示:
1、準(zhǔn)備一張圖片。
2、新建一個500*300的Flash文件。(設(shè)置寬、高同圖片大?。?br />
3、導(dǎo)入圖片到庫中。
4、從庫中把圖片拖到舞臺上,左對齊,上對齊。
5、右鍵點擊圖片,轉(zhuǎn)換成影片剪輯。元件名:“cityMC”。圖1:
6、在屬性面板中輸入實例名稱:“cityMC”。圖2:
7、鎖定圖層1,添加圖層2。用圓角矩形工具在舞臺上任意位置、任意顏色、畫一個圓角為10的40*40的矩形。圖3:
8、把圓角矩形轉(zhuǎn)換成影片剪輯,名稱為“maskMC”,注冊點居中。圖4:
9、刪除舞臺上的圓角矩形。打開庫右鍵單擊maskMC影片剪輯,選屬性作類鏈接,類名:“MaskRectangle” 圖5:
10、把圖層2改為as,輸入代碼:
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 < rows; i++) {
//Loop through the columns
for (var j=0; j < columns; 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、導(dǎo)入你想要使用的一個圖片到舞臺,設(shè)置屬性:寬、高與圖片相同。
2、把圖片拖到舞臺上,左對齊,上對齊。右鍵單擊圖片,轉(zhuǎn)換成電影修剪。(名字任意)圖1:
3、在屬性面板中輸入實例名字 " imageMC" 。圖2:
4、添加as層,輸入代碼:
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、完成,測試你的影片剪輯。遮罩可以做成任意形狀。只是矩形、圓形等簡單的圖形比較容易一些,復(fù)雜的圖形用代碼繪制要難一些。
教程結(jié)束,以上就是Flash AS3代碼創(chuàng)建好看的遮罩動畫效果,希望大家看完之后會有一定的幫助,謝謝大家觀看本教程!
相關(guān)文章
flash cs6鼠標(biāo)跟隨效果實現(xiàn)代碼分享
flash cs6想要實現(xiàn)鼠標(biāo)跟隨效果?該怎么制作呢?今天我們就來看看使用as2.0實現(xiàn)鼠標(biāo)跟隨效果的教程,需要的朋友可以參考下2019-05-19- Flash cs6怎么使用代碼輸入中英文文本?Flash cs6中可以使用文字工具直接輸入文本,也可以使用代碼來輸入文本,該怎么使用代碼輸入文本呢?請看下文詳細(xì)的教程,需要的朋友2018-03-11
- flash as3.0抽象類怎么定義? as3.0中有很多抽象類,該怎么定義抽象類和抽象方法呢?下面我們就來看看簡單的例子,需要的朋友可以參考下http://www.dbjr.com.cn/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0?flash cs6中想要使用ActionScript3.0功能,該怎么使用呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-01-25Flash中怎么實現(xiàn)鼠標(biāo)點擊決定圖像位置?
本教程給大家分享一個Flash小教程,教大家在Flash CS6中怎么實現(xiàn)鼠標(biāo)點擊決定圖像位置?方法很簡單,感興趣的朋友歡迎前來一起分享學(xué)習(xí)2018-01-12- 本教程教腳本之家的ActionScript教程學(xué)習(xí)者在Flash中如何用代碼將圖片放在自己想要的舞臺位置,教程講解的詳細(xì),感興趣的朋友歡迎前來分享學(xué)習(xí)2017-11-20
在Flash CS6中使用with函數(shù)繪制背景圖教程
本教程教腳本之家的ActionScript教程學(xué)習(xí)者如何在Flash CS6中使用with函數(shù)繪制背景圖?教程一步步講解的挺詳細(xì),方法也不難,非常適合Flash新手入門學(xué)習(xí)2017-11-18Flash怎么設(shè)置元件坐標(biāo)?flash使用代碼設(shè)置元件的坐標(biāo)的教程
Flash怎么設(shè)置元件坐標(biāo)?flash中導(dǎo)如的元件需要添加坐標(biāo),該怎么定位元件坐標(biāo)呢?下面我們就來看看flash使用代碼設(shè)置元件的坐標(biāo)的教程,需要的朋友可以參考下2017-10-11- Flash怎么制作來回?fù)u擺的花朵的動畫?Flash中想要給花朵制作一段搖擺的動畫效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,很簡單,需要的朋友可以參考下2017-05-23
- Flash怎么制作流動七彩色的文字?想要讓文字動起來,該怎么使用flash給文字制作一個流動七彩色的動畫呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-04-23