DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用Fireworks 4.0制作旋轉文字動畫
用Fireworks 4.0制作旋轉文字動畫
編輯:Fireworks基礎     

  Fireworks與Dreamweaver、Flash一起合稱網頁制作三劍客,可是如果我們沒有學會很好地利用它,那就與未出鞘的寶劍一樣,難見光芒。所謂萬事靠積累,只有多學多練才能讓劍客真正發揮威力。今天就讓我們來看一下如何利用Fireworks 4.0制作一個旋轉文字的小動畫,希望能對您有所幫助。

  1、建立新文件:

  啟動Fireworks 4.0,按Ctrl+N鍵新建一個工作區,設置工作區寬度(Width)為400,高度(Height)為300,顏色為黑色,其余依照默認值。

  2、輸入文本圖形:

  首先單擊文本工具(就是那個“A”),設置參數如下:字體為“華文行楷”,大小為“20”,顏色為“紅色(#FF0000)”,其余的不用管它。然後在文本欄裡輸入文字,單擊OK按鈕。用箭頭工具選擇並移動文本到工作區稍微靠上的位置,接下來在Windows→Effect面板中選擇ShadowandGlow→Glow(發光)選項,設置具體參數如下:寬度為2,柔化度為1,顏色為黃色(#FFFF00),透明度為100%。此時文本效果如圖所示。

  3、制作文本圖形的分布路徑:

  首先取消對文本圖形的選擇,然後單擊橢圓形工具(找不到?按矩形選擇工具兩秒鐘看看會不會出現!),在Stroke和Fill面板中均選擇None。按住Shift鍵在畫布中畫一個標准的圓形。按Ctrl+A鍵,或者單擊箭頭選擇工具,按住Shift鍵分別點擊文本圖形和圓形,從而將二者全部選定,單擊Text→AttachtoPath選項或者按快捷鍵Ctrl+Shift+Y,是不是看到文本圖形乖乖地沿著路徑進行了分布呢?哈哈,先不要得意的太早,路漫漫其修遠兮……如果你看到的文本圖形並未分布均勻的話,那麼請用鼠標左鍵雙擊文本圖形,在彈出的文本參數對話框中修改AV的值,直到文本圖形沿路徑均勻分布到令你滿意的狀態為止。

  4、開始制作動畫:

  選中圖形,單擊Insert→ConverttoSymbol…(轉變為符號)選項或者按F8鍵,在其對話框中將符號圖形命名為“TEXT”,並選擇“Graphic”(圖案)選項,單擊OK按鈕,此時圖形就被轉化為圖形符號了,並且被一個左下角有小箭頭標記的虛線框包圍著。

  5、克隆其他圖例:

  單擊Edit→Clone選項或者按Ctrl+Shift+D鍵克隆一個圖例出來(前提是工作區的圖例處於被選中狀態),然後單擊比例變換工具,可以看到圖例周圍出現了八個小方塊,拖動鼠標,將克隆出來的圖例順時針旋轉一定的角度。使用同樣的方法將當前圖例再克隆一個並再次旋轉一定角度。總共連續三次(也可以更多次)執行此操作。

  6、創建動畫:

  按Ctrl+A鍵選中所有圖形,單擊Modify→Symbol→TweenInstances…選項,在彈出的對話框中輸入步驟(Steps)為3,單擊選中“DistributetoFrames”選項,最後單擊OK按鈕。這時我們打開Frame面板,可以發現Fireworks已經自動加入了很多幀,到此為止,我們的旋轉動畫已經完成一大半了。

  7、加入修飾圖形:

  在幀面板(Frames)中單擊第1幀,單擊畫布空白處,取消所有圖形的選擇。單擊橢圓形工具,設置筆刷顏色為無色(None),油漆桶顏色為紅色。在Stroke面板中選擇填充方式為None。在Fill面板中選擇Cone,並單擊Edit按鈕將漸變色調整為紅、黃漸變,按住Shift鍵在畫布上的文本中畫一個圓形,並使之居中(使圓形居中的方法:按Ctrl+A選中所有圖形,然後在上方的工具欄上先後選擇對齊方式為“水平居中”和“垂直居中”)。對圓形進一步修飾,在Windows→Effect面板中選擇ShadowandGlow→Glow選項,設置具體的發光參數如下:寬度為6,柔化度為6,下面的Offset為6,顏色為黃色(#FFFF00),透明度為100%。如果最後的填充效果並不能使你滿意,你還可以單擊油漆桶工具,可以看到在圓形上面出現了一個小圓點和一個小方塊,試著拖動其中的任意一個,就會出現不同的填充效果。

  8、復制圓形及其效果到其他幀:

  在第1幀中選中圓形(注意切不可選中周圍的文本圖形),單擊幀面板(Frames)右上角的右箭頭按鈕,在彈出的菜單中選擇“CopytoFrames...”選項,在彈出的對話框中單擊“Range”選項,在下面的框裡輸入“2”To“13”(筆者做的這個動畫共有13幀,您可以設為您的動畫所具有的最大幀數),單擊OK按鈕。此時圓形就被復制到了第2幀~第13幀中。可依次單擊每一幀來觀察文本圖形的旋轉效果及圓形的狀態,如有不滿意的地方一一修改,比方說在某幀將文本圖形或者圓形的顏色、發光效果等調整一下,那麼做出的動畫就會更有光彩了。具體的設置您可以慢慢嘗試。

  9、輸出動畫:

  單擊File→ExportPrevIEw...選項或按Ctrl+Shift+X鍵,將彈出導出文件預覽窗口。

  在彈出的導出預覽窗口Option選項中“Format”下拉菜單中選擇“AnimatedGIF”方式。單擊Animation標簽,單擊左下的循環按鈕讓動畫永遠播放(Forever)。然後可以單擊窗口中的播放按鈕觀看效果,如果有哪一幀的效果不能令人滿意,還可以單擊Cancel按鈕回到畫布中進行修改。待一切OK後,你就可以單擊“Export...”按鈕,選擇輸出路徑並指定文件名稱,保存!

  好了,工作進行到這裡就OK了。最後祝大家學的開心,玩的痛快,我們下次再見!

  作為網頁制作三劍客之一,Fireworks在我們平常的應用中遠沒有Dreamweaver和Flash的使用頻率高,也許是由於在圖形設計領域它有著太多競爭對手的緣故吧。實際Fireworks還是有著它特有的優勢,希望朋友們在讀過本文之後能夠得到一些啟發,算是起一個拋磚引玉的作用吧。

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