DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Firework制作動態Banner
Firework制作動態Banner
編輯:Fireworks基礎     

  firework做動畫圖片,最重要的面板就是桢面板,桢面板上按鈕的功能在此我們不多說,鼠標在按鈕上停留片刻,就能看到提示的,只是需要說明的一點,當我們要在原有桢上創建新的一桢時,只需要將原有桢拖拉到“新建/復制桢”的按鈕上就可以,而不需要去復制原有桢上的各個圖層。

  下邊介紹一個Banner在firework裡的制作過程,我們先看一下,最後的效果圖。

  1.新建一468*60,背景為#000000的文檔,將光芒的素材放置適當位置。

  2.選中該圖層,按F8修改元件屬性,設置動畫變化桢數為6桢,縮放到原始大小的1000倍。

  確定:firework提示此元件的動畫超過文檔的最後一桢,自動添加新的桢。這樣就創建了六桢光芒的變化效果。

  3.從第七到九桢,我們做圖片光感的明暗效果,點擊“新建/復制桢”創建第七、八、九桢,在第八桢上,新建一圖層,Alt+A全選後,填充白色,這樣就形成了,圖片明暗的閃動效果。

  4.第十到第十一桢,創建光芒到風景變化過程。在第十桢上按順序放置下邊兩圖案,復制成第十一桢。在第十桢上,調節上層透明度為80%,在第十一桢上,調節上層透明度為50%,這樣就形成了光芒的漸隱,風景的漸顯效果。

  5.第十二到第十六桢,創建人物圖案的漸顯效果。復制第十一桢後,在光芒圖層的下層,加入人物圖案的圖層,復制成五桢,與前邊光芒、風景漸隱漸顯的效果方法相同,調節每一桢上人物圖層的透明度,即形成人物圖層的漸顯效果。

  6.第十七到第二十三桢,創建《滿江紅》文字的顯示過程。一桢顯示一句,是很簡單的過程,只需要將上一桢拉到“新建/復制桢”,創建新的一桢,再添加需要新增加的一句即可。如下圖為第二十一桢的效果。

  7.第二十四到第二十八桢,創建“潮汕新江湖”文字的效果過程。

  在第二十四桢上輸入顏色為#E67830,大小為50號的華文宋體:“潮汕新江湖”,利用發光做出字體的描邊效果。

  8.復制成五桢,調整每一桢上字的大小和透明度,形成逐漸清晰、逐漸縮小的效果。

  參考:第二十四桢字體大小擴大到原來的400%,透明度為25%;
  第二十五桢字體大小擴大到原來的300%,透明度為50%;
  第二十六桢字體大小擴大到原來的200%,透明度為75%;
  第二十七桢字體大小擴大到原來的100%,透明度為100%;
  這是第二十六桢的效果。

  9.第二十八桢和第二十七桢是一樣的,在此分作兩桢,是便於控制每一桢顯示時間。第二十八桢為最後一桢,突出主題,這是“潮汕新江湖”的Banner,所以停留的時間需要長一下,以便讓人清楚。

  10.這樣,整個Banner就做好了。我們可以適當的調整每一桢的顯示時間,如圖中,紅線框內的數字就是該桢延時的時間,單位為1/100秒。

  要讓Banner顯示的動畫效果最自然,需要多調試每一桢的延時時間。我們可以點擊文檔上的“播放/停止”按鈕進行預覽。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved