DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks制作經典的掃光字GIF動畫 (1)
Fireworks制作經典的掃光字GIF動畫 (1)
編輯:Fireworks基礎     
Fireworks制作掃光字動畫主要技巧是圖層蒙板的使用。我們也可以使用ImageReady, Flash等工具實現掃光字動畫效果,基本的原理也是一樣的,讀者可以舉一反三,觸類旁通。

  本實例講解中

        Fireworks PNG源文件下載。

  效果:

Fireworks制作經典的掃光字GIF動畫

Fireworks掃光字GIF動畫效果

  下載該源文件(PNG)。 1、首先我們把背景選為黑色。再輸入文字用白色填充,注意調整文字之間的間隔。

Fireworks制作經典的掃光字GIF動畫

在Fireworks中輸入文字並調整

  2、選中字體,對其進行轉換為路徑文件。

Fireworks制作經典的掃光字GIF動畫

將字體轉換為路徑

  3、對間隔再做少許調整。

Fireworks制作經典的掃光字GIF動畫

對間隔再做少許調整

  4、復制文字改為黑色,做平移,出現立體效果。

Fireworks制作經典的掃光字GIF動畫

制作立體效果5、再復制一次文字,並用部分選取工具選中路徑進行顏色的填充。顏色根據自己喜好來

Fireworks制作經典的掃光字GIF動畫

給字體填充顏色

  6、用矩形選框工具畫一個矩形填充白色,羽化10象素,矩形最好放在文字上方。

Fireworks制作經典的掃光字GIF動畫

繪制矩形、填充白色並羽化

  7、接著就要進行動畫的操作過程了,因為考慮到只有第一層圖片有動畫效果,所以可以對另外2個圖層進行共享層的操作。我們點擊層面板上的按扭進行新建層。

Fireworks制作經典的掃光字GIF動畫

新建層

 

  並在共享此層上打勾:

Fireworks制作經典的掃光字GIF動畫

在共享此層上打勾將需要共享的圖層拖至層2內並放在層1下面

Fireworks制作經典的掃光字GIF動畫

將圖層拖至層2內

  8、接著在幀面板上點擊,選擇重置幀,就是復制相同的幀。

Fireworks制作經典的掃光字GIF動畫

復制相同的幀

  9、選擇第2幀,剪切白色羽化矩形,選中最上面需要做動畫的圖層,使用編輯—粘貼於內部,看....效果出來了,不過重要的是這裡才剛剛開始。

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