FLASH實現(xiàn)逼真噴泉效果

若水221147 分享 時間:
  我們將介紹利用速度向量和重置對象的技巧來實現(xiàn)噴泉效果。所謂向量就是有方向的量。比如一輛車從東向西以80公里每小時的速度行駛,那么我們就可以得到汽車的速度向量,它包括兩個元素:速度,每小時80公里,方向,由東向西。

  下面我們來分析一下噴泉是怎樣形成的?

  噴泉是若干個水珠向上噴射,然后又受重力影響掉回地面。這個過程的速度向量有哪些,具體又是怎么的呢?很容易發(fā)現(xiàn)至少的兩個力,一個是使水珠向上噴射的外力,一個是使水珠掉回地面的重力。

  外力的速度向量:速度我設(shè)為10-20間的隨機數(shù),方向是向上的那就一定是y軸上的負數(shù)了。將這個速度向量加到水珠上就使水珠向上噴射了。

  具體做法是:在ENTER_FRAME事件中這水珠的y 值加上-10到-20間的一個隨機數(shù)。

  重力的速度向量:速度就比較小了我設(shè)為0.5,方向則是y軸上的正值。同樣加到ENTER_FRAME事件中,這樣水珠在噴射后就會掉回地上。

  還有個問題,因為速度向量是加在ENTER_FRAME事件中的,水珠就可能一直按這些速度向量運動,面遠離舞臺,那噴泉就不知會噴到什么地方去了。

  要解決這個問題,就要將超出舞臺邊界的水珠重新定位到噴射口,這樣就形成了不間斷的噴射了。

  好了,上面分析了效果產(chǎn)生方法,下面就來制作

  第一步是要畫一個水珠,新建一個影片剪輯元件,用放射填充畫一個橢圓,左色標(biāo)為白色,透明度100%,右色標(biāo)略帶點灰色,透明度50%。在屬性面板中設(shè)置橢圓在寬為2像素,高為5像素。在庫中右擊該元件,打開連接窗口,(cs4打開屬性窗口),設(shè)置一個類名,我設(shè)的是 pall。

  接下來回到主場景,打開幀動作面板,我們來寫代碼。

  噴泉是由若干水珠形成的,多少呢?我整了500個:

  var count:int = 500;

  重力速度向量:

  var zl:Number = 0.5;

  將這500個水珠放到一個數(shù)組中:

  var balls:Array;

  balls = new Array();

  用一個for循環(huán)來將500個水珠放到數(shù)組中:

  for (var i:int = 0; i < count; i++) {

  var ball:pall = new pall();

  將水珠定位到水珠的噴射口:

  ball.x = 260;

  ball.y = 200;

  在x軸方向也設(shè)一個速度向量,使水珠在x軸的一定范圍內(nèi),并將這個速度向量存到每個水珠的自定義屬性vx中:

  ball["vx"]= Math.random() * 2 - 1;

  下面是y軸方向的速度向量,將它存在自定義屬性vy中:

  ball["vy"] = Math.random() * -10 - 10;

  將水珠放到舞臺上,并存到數(shù)組中:

  addChild(ball);

  balls.push(ball);

  接下來偵聽ENTER_FRAME事件,實現(xiàn)噴泉效果:

  addEventListener(Event.ENTER_FRAME, onEnterFrame);

  onEnterFrame函數(shù)內(nèi)容:

  通過一個for循環(huán)為數(shù)組中的水珠加上各個速度向量:

  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"];

  接下來的是看水珠是否超出了舞臺,如果超出了舞臺,則將水珠重新定位到噴射口,并將速度向量設(shè)為初始狀態(tài)。

  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;

  }

  }

  }
13999