DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks設計案例 >> Fireworks制作文字探照燈效果實例教程
Fireworks制作文字探照燈效果實例教程
編輯:Fireworks設計案例     

   我們經常可以看到一些用Flash做文字遮罩效果的教程文章,這種效果用Fireworks也同樣可以做出來,並且可以生成GIF格式的小動畫。下面,就讓我引導大家一步步用Fireworks制作文字探照燈效果。

  1.點擊“File>New”,建立一個新文件,將背景設置為黑色。

  2.點擊工具面版中的橢圓形工具,用鼠標在新畫布上拖動一個橢圓,將橢圓的填充色設置為“None”。

  3.點選工具面版上的文字工具,在彈出的文字編輯對話框中輸入文字,在此我們輸入“tanzhaodeng”,把文字的顏色設置為白色。

  4.用鼠標點擊選中文字,按下“Shift”鍵,同時再選中剛才畫下的橢圓,然後點擊Text>Attach to Path,文字即被粘貼至路徑上。

  5.選擇Window>Frames,打開幀面板,然後用鼠標單擊幀面板右上角的小三角形,選擇“Duplicate Fram”後,在彈出對話框的幀數中,輸入數字10,並選中“After current frame”,這樣就把原來的一幀復制成了11幀,用鼠標仍選中第一幀。

  6.選擇Insert>New Symbol,創建一個新組件,在彈出的對話框中給新組件命名,在“Type”中選擇“Graphic”,點擊“OK”,彈出組件編輯窗口。

  7.雙擊工具箱中的多邊形工具,在多邊形設置面版中將邊數設置為3,然後在組件編輯窗口拖動鼠標,畫一個三角形。將此三角形填充為白色,透明度設置為30,再用工具箱中的變形工具將其調整為夾角稍小的三角形,如圖1。此組件就完成了。

  8.關閉組件對話框,回到畫布,你會看見新組件也出現在畫板中了。在畫布中復制一個同樣的組件,然後用變形和旋轉工具把它們分別調整成如圖2的位置。

  9.按下“Shift”鍵,同時選中兩個組件,再選擇Modify>Symbol組件,點擊“Tween Instances”,彈出對話框,在“Step”項中輸入9,選中下面一欄,點擊“OK”。

  10.再按下“Shift”鍵,同時選中文字和實體,選擇Modify>Mask Group,點擊命令“Mask to Path”,這樣就形成一個遮罩組。

  11.在幀面版中選中第二幀,然後同上邊的步驟一樣,再創建遮罩組。創建完第二幀,依次對每一幀都創建遮罩組,直到完成最後一幀。

  12.在幀面板上同時選中所有的幀,再點擊其面板右上角的小三角形,選擇“Duplicate Frames”,就會把所有幀復制到下面,用鼠標來移動新復制的幀的順序,以使它們與前面的幀排列順序剛好相反,這樣做就可以使探照燈自動來回掃射。

  13.接下來,根據需要調整停頓幀的時間,雙擊要調整的幀,在彈出的菜單中輸入數字,在此我們輸入300,默認為3秒。

  好了,到這兒就算全部完工了,現在可以點擊畫布下邊的播放按扭,來預覽這個文字探照燈效果。

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