DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 亮閃閃的美麗 fireworks巧繪精美閃圖動畫
亮閃閃的美麗 fireworks巧繪精美閃圖動畫
編輯:Fireworks基礎     
《Fireworks簡單方法打造網頁“閃字”動畫》的制作,這一節我來講解一下“閃圖”動畫的制作。  漂亮的閃圖動畫應用范圍非常廣,不僅可以在相冊、動態表情裡使用,還可以在QQ空間、論壇簽名、各類回貼和博客中使用。  學習要點:本例中我們主要學習Fireworks導入閃底素材、將閃底素材粘貼於圖像內部的制作方法。  我們先來欣賞一下漂亮的閃圖。文章最後附送豐富閃底素材。漂亮的閃圖  制作步驟:  1.用Fireworks軟件打開一個漂亮Javascript:image()的圖片,利用左邊“工具箱”中的“魔棒工具”點選白色背景處,使白色的背景被全選出來。
使白色的背景被全選出來  2.按下鍵盤上的Delete刪除鍵,刪除選區中的內容,使這個圖片背景擁有透明背景,按Ctrl+D取消選區。使這個圖片背景擁有透明背景,按Ctrl+D取消選區  3.接下來在“幀”面板中將第1幀拖到“新建/重制幀”按鈕上2次,如下圖所示,共制作成3幀。(一般是看閃底素材有多少幀,然後就復制幾幀)。共制作成3幀  4.回到第1幀,再次利用“工具箱”中的“魔棒工具”點圖片中MM的頭發,選中大片的頭發黑色,然後選擇菜單中的“選擇”—“將選取框轉換為路徑”命令。選中大片的頭發黑色  5.將頭發選區轉換為路徑,然後利用相同的方法,用魔棒將衣服和褲子都選中來轉化為路徑,如下圖所示:用魔棒將衣服和褲子都選中來轉化為路徑  6.單擊第1幀,然後選擇菜單中“文件”—“導入”(Ctrl+R),選擇導入幾張閃底素材圖,分別對應頭發/衣服/褲子的顏色。選擇導入幾張閃底素材圖,分別對應頭發/衣服/褲子的顏色  7.我們先來制作頭發的閃動效果,分別單擊“背景圖層”上紅色和黑色閃底層前的,隱藏這二層。因為用來制作頭發的閃底是橫向的,不能完全覆蓋頭發,所以我們利用菜單“修改”—“變形”—“旋轉90度”將其旋轉覆蓋頭發。利用菜單“修改”—“變形”—“旋轉90度”將其旋轉覆蓋頭發  8.選中用於制作頭發的閃圖對象,按下Ctrl+X剪切下來,點選頭發的路徑,選擇菜單中“編輯”—“粘貼於內部”(Ctrl+Shift+V)命令,將其動畫效果粘於頭發路徑中。將其動畫效果粘於頭發路徑中。   效果如下圖所示:效果  9.再利用剛才的方法分別將衣服路徑和褲子路徑都填充相應的閃圖,如下圖所示:將衣服路徑和褲子路徑都填充相應的閃圖   (用這種導入閃底素材+粘貼於內部的制作方法,可以省去相當大的工作量,是一種別出心裁的方法喲!)  10.圖是制作完成了,現在是最關鍵的保存工作,為什麼說保存工作比較重要呢?這是因為保存時會有些屬性需要選擇,如果直接保存有可能得不到gif背景透明的動態效果。保存的方法是選擇菜單中“文件”—“圖像預覽”命令,在“圖像預覽”窗口中選擇其“格式”為gif動畫,再設置調色板最下方的透明度為“Alpha透明度”,然後再點擊預覽圖標預覽看一下動畫效果,滿意後再單擊“導出”按鈕導出gif圖像。導出gif圖像  到此,閃圖就制作完成了,來看一下原圖和完成效果的對比吧!!看一下原圖和完成效果的對比  最後送給大家一些閃底素材。================================  閃底素材如下。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved