Fireworks繪製飛舞蝴蝶動畫

來源:互聯網
上載者:User
  今天我們來繪製一個飛舞的蝴蝶動畫,讓蝴蝶的翅膀在不停地扇動著,如同一隻現實中的彩蝶在翩翩飛舞。還可以在網頁製作過程中在Deamweaver中將這個GIF動畫插入一個層之中,然後設定時間軸來控制動畫在網頁上的運動路徑,用以實現它在頁面上飛舞的效果。主要用來熟悉Fireworks MX 2004中幀面板中匯出GIF動畫檔案的用法,同時熟悉魔棒工具的用法。文章末尾提供.png檔案供大家下載參考。

   完成效果如右圖。

  下面我們介紹具體的繪製過程,看看蝴蝶翅膀扇動效果是如何?的。

  (1) 建立一個大小為80×80的檔案,設定其畫布顏色為透明,得到圖1所示映像。

  (2) 匯入一個靜態蝴蝶圖片,如圖2所示。但是這幅映像是有白色背景的。


圖1 建立檔案    圖2 匯入一幅靜態蝴蝶圖

  (3) 單擊工具箱上的魔術棒工具,在匯入映像的白色地區中單擊一下,這樣映像中所有白色的地區就被選中了,如圖3所示。

  (4) 按Delete鍵將魔術棒選取的白色地區刪除,得到圖4所示的映像。


圖3 使用魔術棒單擊白色地區    圖4 刪除白色地區

  (5) 單擊工作區狀態列的按鈕回到向量圖編輯狀態。使用對其面板將映像放置在畫布的最中央,得到圖5所示的映像。

  (6) 開啟幀面板,單擊按鈕建立一幀,並把第一幀的映像複製到第2幀之中,使用工具箱上的縮放工具對複製所得映像進行調整,如圖6所示。


圖5 將映像放置畫布中央    圖6縮放映像
  (7) 為了能類比蝴蝶飛舞時產生的顏色明暗度變化,所以需要對第2幀的映像進行色相、飽和度和亮度的調整。單擊【濾鏡】菜單,選擇【調整顏色】|【色相/飽和度】,在彈出對話方塊中調整色相、飽和度和亮度,如圖7所示。

圖7 調整映像色相、飽和度和亮度
  

  (8) 最終得到滿意的效果,如圖8所示。接著在建立一幀,和上面兩步類似,再調整映像得到圖9所示的映像。


圖8 第2幀映像    圖9 第3幀映像
  (9) 由於蝴蝶飛舞過程中翅膀會往返兩次同一個位置,所以第4幀映像和第2幀映像是相同的,第5幀和第一幀映像是相同的。只需要分別將第2幀映像複製到第4幀,將第一幀映像複製到第5幀就可以了,分別如圖133和圖134所示。


圖10 第4幀映像    圖11 第5幀映像
  (10)最後再建立一幀,將第5幀映像複製到該幀,使用縮放工具將映像再進行縮放,使得蝴蝶的翅膀展開度更大一些,得到圖12所示的映像。

  (11)幀面板中共有6幀,幀延時都是Fireworks預設的7/100秒,這樣會使得蝴蝶翅膀扇動的頻率過快。希望蝴蝶翅膀扇動頻率慢一些,只需要在幀面板中選中所有的幀,雙擊幀延時地區,將幀延時設定為15/100秒,如圖13所示。這樣蝴蝶翅膀扇動就會變慢了。


圖12 第6幀映像    圖13 設定幀延時
  

  (12)最後使用匯出嚮導將這個映像匯出為GIF動畫檔案就可以了。然後就可以在網頁製作過程中插入這個動畫,來實現蝴蝶在網頁上翩翩起舞的效果了。 .png檔案下載

完成效果


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。