當前位置:開發者網絡 >> 技術教程 >> 網頁設計 >> Flash >> 內容
精彩推薦
分類最新教程
分類熱點教程
    
Flash實例教程——魚戲蓮葉間 4
作者:未知
日期:2005-04-30
人氣:
投稿:(轉貼)
來源:未知
字體:
收藏:加入瀏覽器收藏
以下正文:
3.添加腳本

  下面只需添加腳本,魚就可以動起來了。

  (1)回到主場景,在動作面板中為第一幀加入以下Actions,對「魚」進行初始化。

parts = 18;

  v0 = 12;

  v1 = 1.5;

  v2 = 3;

  var x = new Array();

  var y = new Array();

  for (i=1; i

  

  if (i == 1) {

  attachMovie("head", "fish"+i, parts+1-i);

  } else if ((i == 3) or (i == 13)) {

  attachMovie("fin", "fish"+i, parts+1-i);

  } else {

  attachMovie("body", "fish"+i, parts+1-i);

  }

  with (_root["fish"+i]) {

  _xscale = 50-v2*(i-1);

  _yscale = 60-v2*(i-1);

  _alpha = 100-(100/parts)*i;

  }

  }

  其中,parts用來設置魚的分段數,這裡將魚分成18段。

  v0用來控制魚頭與鼠標位置的接近速度,在下一幀的腳本中用來作魚頭與鼠標位置之間距離的除數,以此來控制魚頭在下一時刻需要運動到的位置。

  v1用來控制魚身各段之間的相對運動速度,在下一幀的腳本中用來作魚身每兩段之間距離的除數,以此來控制每一段在下一時刻需要運動到的位置。

  v2用來控制魚身各段的大小遞減速度。該段腳本下面的with語句中的_xscale是實例_root["fish"+i]的橫向寬度,_yscale就是縱向寬度。它們在50和60像素的基礎上以v2*(i-1)的速度遞減。_alpha是影片剪輯實例的透明度屬性,在此也將其設為遞減,以使魚更具真實感。

  上段腳本用var x = new Array();和var y = new Array();定義了兩個數組,它們將在下一幀控制魚位置的腳本中發揮作用。

  attachMovie方法將head元件作為第一段,放在第18層級(level),其它部分按18遞減。第3和13段放置fin元件,其他段放置body元件。

  (2)在時間軸上的第二幀上單擊鼠標右鍵,選擇「插入空白關鍵幀」命令,插入一個空白關鍵幀。打開動作面板,加入以下Actions,以控制魚的動作。

x[0] += (_xmouse-x[0])/v0;

  y[0] += (_ymouse-y[0])/v0;

  for (i=1; i

  x[i] = x[i]+(x[i-1]-x[i])/v1;

  y[i] = y[i]+(y[i-1]-y[i])/v1;

  }

  for (i=1; i

  with (_root["fish"+i]) {

  _x = (x[i-1]+x[i])/2;

  _y = (y[i-1]+y[i])/2;

  _rotation = 90+ (180/Math.PI)*Math.atan2((y[i]-y[i-1]), (x[i]-x[i-1]));

  }

  }

  前兩行腳本將數組x和y的第一個元素的值設置為鼠標位置與head位置之間的一個數,使魚並不是一步到達鼠標所在的位置,而是分幾步逐漸接近的。

  數組x和y的其他元素的值按當前元素與前一元素的位置差計算出來,同樣實現一個分步移動的效果。

  for循環語句為將數組中的值分配給魚的每一段。其中為_rotation賦值的一行代碼相當關鍵。Math.atan2((y[i]-y[i-1]), (x[i]-x[i-1]))返回的是(y[i]-y[i-1])相對於(x[i]-x[i-1])的反正切值的弧度,為它乘以一個(180/Math.PI)可以將其轉換為度數。因為庫中的影片剪輯是豎直向下的,為其加上90可以使其符合初始狀態時的水平方向。

  (3)執行第(2)步後並不能使魚跟著鼠標動起來,因為隨著動畫的循環放映將不斷為魚的各段賦初始值。現在我們需要在第3幀的位置插入一個關鍵幀,並在動作面板中為其加入以下一行Actions:

  gotoAndPlay(2);

  在動畫播放到第3幀的時候,將自動跳轉到第2幀,構成魚身的各影片剪輯實例的大小和方向的值將被更新。以此不斷循環,一條靈活地跟隨鼠標游動的魚兒就誕生了。效果如圖10所示。


圖 10 跟隨鼠標游動的魚

  4.添加蓮葉

  本例既然叫做「魚戲蓮葉間」,沒有蓮葉是不行的。下面就為其加入蓮葉。

  (1)按Ctrl+F8新建一個影片剪輯元件,並命名為「蓮葉」。

  (2)在蓮葉元件的編輯場景中選擇「文件」/「導入」命令,將蓮葉.jpg圖片導入到舞台中。

  (3)新建一層,將蓮葉圖片複製到與圖層1相同的位置。

  (4)選中圖層2中的蓮葉圖片,選擇「修改」/「轉換位圖為矢量圖」命令,在出現的「轉換位圖為矢量圖」對話框中將「顏色閾值」設置為50,將「最小區域」設置為5,如圖11所示。單擊「確定」按鈕將位圖轉換為矢量圖。

   

圖 11 「轉換位圖為矢量圖」對話框

   (5)使用箭頭工具將圖中蓮葉及荷花部分以外的水面部分刪除。細微部分可以放大後使用套索工具選取並刪除。

  (6)在圖層2上單擊鼠標右鍵,選擇彈出快捷菜單中的「遮罩層」命令,將圖層2變為遮罩層。

  (7)回到主場景,新建一層,從庫面板中將「蓮葉」影片剪輯拖放到圖層2中,並調整其位置和大小到合適位置。

  (8)在屬性面板中將背景色改為黑色。現在測試影片,發現魚在蓮葉上層游來游去。這可不是我們所要的效果。

  (9)選中場景中的「蓮葉」影片剪輯,在屬性面板中將其實例命名為leaf,如圖12所示。

 
圖 12 為「蓮葉」影片剪輯實例命名

   (10)選中圖層2的第1幀,在其動作面板中添加如下Actions:

  leaf.duplicateMovieClip("leaf1", 30);

  (11)按Ctrl+Enter鍵測試影片,魚兒乖乖地鑽到了蓮葉底下,如圖13所示。 

 
圖 13 成功地將蓮葉置於魚的上層

  5.換一個漂亮的鼠標指針

  一幅漂亮的場景中出現一個白色的鼠標指針是不是很不協調?現在就來換掉這個扎眼的指針。

  替換鼠標指針使用到了一個小小的技巧,就是在隱藏指針的時候對另一個影片剪輯實例進行拖曳,這樣看起來就好像是換了一個鼠標指針。鼠標拖曳用到的Actions是startDrag。

  (1)新建一個名為「指針」的影片剪輯元件並進行編輯。

  (2)繪製一個小球,並將其寬和高都設為8,對齊舞台的中心。

  (3)新建一個圖層,將「指針」元件拖放到場景中任意位置。

  (4)在屬性面板中為「指針」元件指定一個實例名稱,這裡將其命名為mymouse。

  (5)確定該元件為選中狀態,在動作面板中為影片剪輯實例mymouse添加如下Actions:

  onClipEvent (load) {

  startDrag(mymouse, true);

  mouse.hide();

  }

  (6)按組合鍵Ctrl+Enter測試影片,效果如圖14所示。

 
圖 14 替換了鼠標指針後的效果

   本例小結

  本例的主要任務是設計並製作「魚戲蓮葉間」的鼠標跟隨動畫。下面,分別從設計和製作兩個方面對本章的任務進行小結。

  「魚戲蓮葉間」在創意設計上用的是傳統的鼠標跟隨手法,它採用魚作為跟隨鼠標的對象,所以設計的重心放在如何讓魚的運動盡量平滑和自然上。動畫中再輔以蓮葉荷花,使得整個動畫別具情趣。

  「魚戲蓮葉間」的製作過程是:製作魚身各元件→在《u構思添加Actions讓魚游動起來→製作並添加蓮葉元件→在幀動作面板中添加Actions重新安排蓮葉的層級→製作代替鼠標指針的小球→在影片剪輯面板中添加Actions讓小球代替鼠標指針運動。

  本例在製作上力求以循序漸進的方式一步一步完成整個動畫,逐漸對動畫加以完善,這是在製作Flash動畫時經常採用的手法。每完成一步,就有一步的成就感。將複雜的大任務分解成幾個小任務,這樣每個小任務都可以迎刃而解了。

  影片剪輯是一種功能強大的元件。本例用到的attachMovie、duplicateMovieClip、startDrag等腳本語句在製作很多特效時都有不可低估的作用。

  鼠標跟隨是Flash在交互式動畫方面的一大特色,採用鼠標跟隨方法可以做出許許多多不同凡響的動畫。但要想使自己的作品更具創意,還得在動畫設計和腳本應用上多下功夫。


相關文章: