Flash AS3.0 實例教程 噴泉動畫特效
2020-07-17 13:16:24
供稿：網友
在這個實例教程中，我們將介紹利用速度向量和重置對象的技巧來實現噴泉效果。所謂向量就是有方向的量。比如一輛車從東向西以80公里每小時的速度行駛，那么我們就可以得到汽車的速度向量，它包括兩個元素：速度，每小時80公里，方向，由東向西。
下面我們來分析一下噴泉是怎樣形成的。
噴泉是若干個水珠向上噴射，然后又受重力影響掉回地面。這個過程的速度向量有哪些，具體又是怎么的呢？很容易發現至少的兩個力，一個是使水珠向上噴射的外力，一個是使水珠掉回地面的重力。
外力的速度向量：速度我設為10－20間的隨機數，方向是向上的那就一定是y軸上的負數了。將這個速度向量加到水珠上就使水珠向上噴射了。
具體做法是：在ENTER_FRAME事件中這水珠的y 值加上－10到－20間的一個隨機數。
重力的速度向量：速度就比較小了我設為0.5,方向則是y軸上的正值。同樣加到ENTER_FRAME事件中，這樣水珠在噴射后就會掉回地上。
還有個問題，因為速度向量是加在ENTER_FRAME事件中的，水珠就可能一直按這些速度向量運動，面遠離舞臺，那噴泉就不知會噴到什么地方去了。
要解決這個問題，就要將超出舞臺邊界的水珠重新定位到噴射口，這樣就形成了不間斷的噴射了。
好了，上面分析了效果產生方法，下面就來制作。
第一步是要畫一個水珠，新建一個影片剪輯元件，用放射填充畫一個橢圓，左色標為白色，透明度100%，右色標略帶點灰色，透明度50%。在屬性面板中設置橢圓在寬為2像素，高為5像素。在庫中右擊該元件，打開連接窗口，（cs4打開屬性窗口），設置一個類名，我設的是 pall。
接下來回到主場景，打開幀動作面板，我們來寫代碼。
噴泉是由若干水珠形成的，多少呢？我整了500個：
var count:int = 500;
重力速度向量：
var zl:Number = 0.5;
將這500個水珠放到一個數組中：
var balls:Array;
balls = new Array();
用一個for循環來將500個水珠放到數組中：
for (var i:int = 0; i < count; i++) {
var ball:pall = new pall();
將水珠定位到水珠的噴射口：
ball.x = 260;
ball.y = 200;
在x軸方向也設一個速度向量，使水珠在x軸的一定范圍內，并將這個速度向量存到每個水珠的自定義屬性vx中：
ball["vx"]= Math.random() * 2 - 1;
下面是y軸方向的速度向量，將它存在自定義屬性vy中：
ball["vy"] = Math.random() * -10 - 10;
將水珠放到舞臺上，并存到數組中：
addChild(ball);
balls.push(ball);
接下來偵聽ENTER_FRAME事件，實現噴泉效果：
addEventListener(Event.ENTER_FRAME, onEnterFrame);
onEnterFrame函數內容：
通過一個for循環為數組中的水珠加上各個速度向量：
for (var i:Number = 0; i < balls.length; i++) {
var ball:pall = pall(balls);
首選在噴射速度向量上加上重力速度向量，這樣每一幀的時間就會加一次重力，而噴射力卻沒變，這樣重力就會逐漸超過噴射力面使水珠下落：
ball["vy"] += zl;
將x,y軸速度向量加到水珠上：
ball.x +=ball["vx"];
ball.y +=ball["vy"];
接下來的是看水珠是否超出了舞臺，如果超出了舞臺，則將水珠重新定位到噴射口，并將速度向量設為初始狀態。
if (ball.x - ball.width/2> stage.stageWidth ||
ball.x + ball.width/2 < 0 ||
ball.y - ball.width/2 > stage.stageHeight ||
ball.y + ball.width/2 < 0) {
ball.x = 260;
ball.y = 200;
ball["vx"]= Math.random() * 2 - 1;
ball["vy"] = Math.random() * -10 - 10;
完整代碼： var count:int = 500; var zl:Number = 0.5;
var balls:Array;
balls = new Array();
for (var i:int = 0; i < count; i++) {
var ball:pall = new pall();
ball.x = 260;
ball.y = 200;
ball["vx"]= Math.random() * 2 - 1;
ball["vy"] = Math.random() * -10 - 10;
addChild(ball);
balls.push(ball);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
for (var i:Number = 0; i < balls.length; i++) {
var ball:pall = pall(balls[i]);
ball["vy"] += zl;
ball.x +=ball["vx"];
ball.y +=ball["vy"];
if (ball.x - ball.width/2> stage.stageWidth ||
ball.x + ball.width/2 < 0 ||
ball.y - ball.width/2 > stage.stageHeight ||
ball.y + ball.width/2 < 0) {
ball.x = 260;
ball.y = 200;
ball["vx"]= Math.random() * 2 - 1;
ball["vy"] = Math.random() * -10 - 10;
}
}
}
