前言
第一章 用Fireworks切割圖形
第二章 用Fireworks制作具有動態效果的切圖
第三章 如何做動畫
第四章 Fireworks的繪圖工具的使用
第五章 文字工具以及文字特效
來自愛搜書:
前 言
嗨，大家好！
我是Arky，自從上一期的《中國網絡指南》中把Dreamweaver2給結果后，我一直在思量，今天該拿什么東東和大家聊呢...
對了，還記得Dreamweaver2有個弟弟叫Fireworks2，雖然他出生晚些，可論名氣不比Dreamweaver2和Flash3小。又看了《PC&IT周末特刊》中連載的《Fireworks之笑傲江湖》，覺得它太值得一寫了。不過，話再說回來，至于Fireworks2，Arky就不能象對付Dreamweaver那樣信手拈來了，我這是一邊學習一邊匯報，至于好壞如何，也就由各位讀者朋友評判了。
Fireworks的來頭實在不小，它使Web作圖發生了革命性的變化，因為 Fireworks是第一個徹底為Web制作者們設計的軟件。作為一個圖象處理軟件，Fireworks能夠自由地導入各種圖象（如Macintosh的PICT、FreeHand， Illustrator，CorelDraw8的矢量文件、Photoshop文件、GIF、JPEGBMP、TIFF），甚至是ASCII的text文本文件，而且Fireworks可以辨認矢量文件 中的絕大部分標記以及Photoshop文件的層。
而作為一款為網絡設計而開發的圖象處理軟件，Fireworks能夠自動切圖、生成鼠標動態感應的javascript等等，而且Fireworks具有十分強大的動畫功能和一個幾乎完美的網絡圖象生成器（Export功能）。
在今年的2月14日（情人節？！），Macromedia公司發布了Fireworks 2.0。與一代相比，Fireworks 2在許多關鍵功能上作了徹底的更新。比如：增加了式樣（style）功能使用戶在幾秒種里就可以作出專業水平得特效、在層方面增加了多種效果（有陰影、凹凸、幻燈...只是越看越象Photosho5 的Layer Effect）、新增得object面板可以讓您更加直觀、方便地控制單個圖案的屬性、并且增強了與dreamweaver的聯系，可以直接生成dreamweaver的Libaray甚至能夠導出為配合CSS式樣的網頁及圖片！
在整個教程的安排上，我想可能和dreamweaver2的有些不同。因為我也是摸索著前進，所以Fireworks2的教程將由一個個實例組成。我無法給一個詳細的目錄索引，因為自己也不知道下次的教程中將說些什么，但部教程絕不會讓您看了失望，因為它至少能夠告訴您如何去使用Fireworks2制作自己心儀的圖形。
來自愛搜書:
第 一 章
用Fireworks切割圖形
做過網頁的朋友一定都知道：網站好，網頁就得小。在不減少內容的情況下，網頁當能夠做得越小越好。而給網頁瘦身最有效方法就是減小圖片的尺寸，但當您不得不在網頁中放入一大幅圖象時，是否還有更好的解決之道呢？
021yin.com /看到使用這個方法的實例。
但傳統的切圖工作十分繁瑣，許多設計者都是使用Photoshop類軟件將圖一片片分好，然后在分別保存為不同色深的gif圖象，雖然可以使用action之類的自動執行命令集，但實際工作量依舊十分驚人，而且非常容易切錯尺寸。
現在用了Fireworks就可以非常輕松地切割圖片了，首先用Fireworks打開要切割地圖形文件（File > Open），當圖片打開后選擇工具欄最右下方的切割工具（SliceTool），在圖中按住鼠標左鍵任意畫出想要的切割效果（注意不要將選區重疊），圖中那些紅線表示就是最后生成的表格分欄情況。
等全部的切割區域完成后選擇"FILE > EXPORT"進入導出，在Format 中選擇gif，再根據圖象的具體情況設置色深、調色板和透明色，然后按下 "Next"。
最后再導出成HTML文件的對話框中指定保存的目錄，在"slicing:" 選項中選擇"Use Slice Objects:"按照剛才劃分出的切割情況來切圖， 并分別保存。在"Style選項"中選擇"Generic"導出成標準的HTML源碼。 OK，如果要和Dreamwever一同使用的話，可以選擇"Dreamweaver Library.lbi"將導出為DREAMWEAVER2的一個模板，而"Dreamweaver" 選項將導出成DREAMWEAVER作出來的網頁源碼。
就這樣，僅幾秒種的時間，就完成了一個非常專業的圖形切割。怎么樣，您是不是感受到了Fireworks的強大功能。
來自愛搜書:
第 二 章
用Fireworks制作具有動態效果的切圖
在上一章中，我們說到用fireworks2進行切圖，可以將一個大圖片分割成不同色深的多個小圖片，并且生成相應的網頁文件或代碼，從而減小網頁的重量。今天我要接著告訴您的是，功能強大的fireworks2不僅可以制作靜態切圖，更能夠導出javascript動態特效！
為了使文章更加生動，能夠被您輕松理解，所以我想用Fireowlks2目錄下的Tutorials\Tutorial_6\T6_Images目錄中monitoir.gif作為素材。在fireworks2完全安裝后其自帶的十個特效制作教程（你可以在Help菜單中找到它們）中的第6講就關于是這種具有動態效果的切圖，可惜是E文的:(
打開monitor.gif 件后你可以看到那上面畫的是一個電視機，現在我們要做的是將這個電視機放入一個網頁，并且當瀏覽者的鼠標按下電視機上的開關后，會在屏幕中播放內容。
第一步，要在圖象上制作用來調用javascript的熱區，制作熱區的方和上一章中切割圖象的方法一樣，都是使用工具欄最右下方的切割工具 （ SliceTool）。由于我們設想中的這個javascript是通過按下電視機開關后在屏幕上出現變化，所以需要定義兩個熱區，分別是電視機開關和電視機屏幕。
然后選擇"windows > Object"（Ctrl+I）選項，打開Object面板。先選中電視屏幕的熱區，Object面板即將顯示這個熱區的屬性，其中的連接地址默認為"No URL(noHREF)"也就是當前網頁的連接（#）；項內容為鼠標放到圖片上時顯示的提示；這下面那個紅色的靶心是target，用來確定連接標簽的目標的，在這兒就不多說了；最關鍵的是：不要激活 target下的"Auto-Name Slices"功能，而需手動給這個切割熱區起一個名字，這樣做是為了在指定behavior時能夠方便的辨認目標。還要注意的是在給slice命名時，不能使用中文，否則生成的javascript 代碼會在瀏覽器中長時間報錯。在這個例子中我給屏幕熱區起的名字是"screen"， 再以同樣的方法給電視開關取名為"button"。
接著做一個電視上要顯示的圖象，選擇"File > New"（Ctrl+N） 命令新建一個和屏幕熱區大小相同的圖片（注意：尺寸過大或過小都會被 javascript縮放到屏幕熱區的大?。?。新建文件后，您可以使用工具欄上各類工具隨心所欲地畫出自己喜歡的東東（工具欄中各個繪圖工具的使用方法將在以后的教程中做詳細介紹）。對自己的作品滿意了嗎？您畫完后請選擇"File > Export"（Ctrl+Shift+R）將圖象導出為網絡圖形。
Fireworks的圖象導出功能非常強大，但現在您只要一路NEXT就可以了，并將生成的gif文件保存到指定的目錄下。
然后回到我們剛才編輯的電視機畫面，選定開關熱區，再選擇" Windows > Behaviors"（Ctrl+Alt+H）選項，打開behaviors面板。按下添加按鈕，選擇"Swap Image"，在隨后彈出的Swap Image對話框中的" Swap Image in Slice"選項中選擇"screen"熱區（也可以在右邊的熱區畫面中直接選擇screen熱區，這樣做就可以讓button熱區調用一個使screen 熱區產生變化的javascript）；在"Source of Swap"中選擇"Image File"并在瀏覽面板中指定剛才制作的那個gif圖象。最后激活"Restor Image onMouseOut"（激活這個功能后，瀏覽者將鼠標離開調用javascript 的熱區后，發生變化的圖象將恢復正常。
當上面這步完成后，behaviors面板中將出現一個"OnMouseOver"的件處理器，這就說明剛才做的熱區已經成功調用了javascript。但我們期的效果是當鼠標按下開關后才在電視屏幕中顯示內容，所以請按下" OnMouseOver"旁的下拉菜單按鈕，在彈出的菜單中選擇"OnClick"。好，到這兒基本上該完工了。想看看作品的效果如何嗎？選擇"File > Preview in Browser > Preview in ..."（F12）命令，就可以在新窗口 中預覽剛才的作品了。
達到預期效果了嗎？滿意的話就可以導出成品了，這兒有個小技巧， 由于fireworks的預覽功能已經生成了臨時的圖形和HTML文件，所以如您使用IE5行預覽的話，可以直接在自己滿意的預覽窗口中將所以文另存，就可以免去導出步驟而得到完整的作品了。如果您沒有IE，那只能乖乖地使用導出功能，具體地導出方法和我們在上一章中所說的靜 態切圖的導出方法相同，在這兒就步重復了。
來自愛搜書:
第 三 章
下面告訴你如何做動畫，COOL！
用Fireworks2制作動畫一共有三種方法，由簡到難的排列起來分別是：合并圖象形成動畫、使用符號（Symbol ）生成動畫效果和手工繪制。
合并圖象形成動畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動畫（很象Director中的Space to time功能），不過這種排列完全是程序自動執行的，免去了大量的手工操作。 具體的方法是這樣的（當然使用這種方法的前提是必須有一連串連續 的圖片）：選擇"File > Open Multiple "命令。進入系列圖片所在的目錄，然后按次序將一連串的圖片加入（"Add"命令）對話框左下部的窗口，并且激活"Open as Animatio"選項，再按下"Done"按鈕就OK了。
在動畫生成后，按下"Windows > Frame"（Ctrl+ Alt+K）命令，您就看到原來的一系列圖片都按次序地從Frame1往下排到底。按下屏幕右下角的播放鍵就可以瀏覽動畫效果了。這種純粹的懶辦法最合適我這樣畫不來線條的人了，一次有只用了10 秒鐘就搞定了一個小鳥飛飛的圖片，效果棒極了！
不過，要是手頭沒有現 成的連續圖片，那只能勞駕，自己親自動手了。而許多圖畫中有規則的動態效果若是用手工制作，既費時間也未必能夠達到理想的效果。所以Fireworks2提供了一個Tween功能，使用戶可以指定程序生成動態過度效果（感覺就更Flash里的一樣）。
在繪制動畫前，我們事先必須明確動畫的工作原理。我想簡單的說，動畫是有不變的物件（object）和會變的物件兩部分組成。通常不變的物是只如背景之類始終在動畫中顯示的物件，而會變的物件是指通過變化 形成動畫的物件。所以在制作動畫之前得先制作不變的物件，為此Fireworks2提供了一個共享層的概念（Share Layer）。
我們都知道，動畫是由一個個不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個層，這樣我們只要將動畫中不變的物件全放在這個層中，以后只需要修改一個幀的共享層中內容就可以使所有的幀都達到相應變化，大大減少了工作量。設置共享層的命令是Layer面版的彈 出菜單中的"Share Layer"命令，設置為共享的層在Layer面版中都有一個特定的共享符號（Web Layer是系統自動設置的共享層，用于放置熱點、切割區）。
在完成不變的物件（object）后就可以使用Tween功能制作動畫效果了。Tween功能的原理是將物件（object）轉化為符號（symbol），然后確定符號的初始和結束樣例（instance），再將這些樣例轉換為具有過度 效果的連續幀（frame）。Tween功能支持物件的位移、旋轉、縮放、扭曲、 以及透明度和層效果（effect）的過度。下面我來舉個實例：通過十個幀讓我的名字"Arky"從圖象的左上角移動到右下角同時逐漸變深。
使用工具欄中打字工具（type）在圖象的左上角鍵入"Arky"，字體、大小任意。選擇"Windows > Object"（Ctrl+I）命令顯示Object面版，在Object面版中將物件的透明度設為20。
選定鍵入的文件（此時文字及為組成圖象的一個物件--object），然后選擇"Insert > Symbol"（Ctrl+Alt+Shift+M）命令，將這個物件轉變符號。
將這個符號復制到圖象的右下角（千萬別跟我您不知道如何復制！告訴您最簡單的方法是拖動物件以后再按下Alt鍵）。并且在Object面版中 將物件的透明度設為100。此時的符號已經變成了樣例（instance）
按住鼠標左鍵拉一個大選框，同時選定樣例和符號，然后選擇"Insert > Tween"（Ctrl+Alt+Shift+T）命令，在彈出窗口中添入所要設定的過度幀數，并且激活"distrubute to Frame"選框，OK，成功。
按下播放按鈕欣賞自己的作品吧。
用類似的方法還可以制作更多的動態過度，趕快動手試試吧:)
最后的一種動畫方法是手工繪制，這可是一件累人的活，而且要手工畫動畫，您必須熟悉應用工具欄中的各種繪圖工具。因此，我準備在以后 的教程中陸續地向您介紹各種繪圖工具的使用方法。而在這兒要告訴您的是Fireworks2中新增的洋蔥皮功能（Onion Skining），為以后的教程埋 下伏筆。
洋蔥皮功能（Onion Skining）就象我的朋友們畫動畫用的半透明的紙一樣，讓用戶在編輯當前幀的同時可以看到此前或此后的幀中的內容。這樣在手繪動畫時可以方便地確定圖案路徑。您可以在Layer面版（Windows > Layer）中找到洋蔥皮功能，其中的選項分別是：
No Onion Skinning 關閉洋蔥皮功能；
Show Next Frame 在當前幀中顯示下一幀的內容；
Before and After 在當前幀中顯示前一幀和下一幀的內容；
Show All 在當前幀中顯示所有幀中的內容；
Custom Enter 讓用戶設置洋蔥皮的顯示功能；
Multi-Frame Editing 使用戶可以透過洋蔥皮編輯其他幀中的內容
021yin.com
第 四 章
Fireworks的繪圖工具的使用
在上一章中，我們了解了用Fireworks2制作動畫的三種方法。當然嘍，要做出最佳的動畫效果就不能偷懶，必須用手繪方法。所以在這章中我要告訴你一些關于Fireworks的繪圖工具的使用方法。首先是矩形工具，我想這個工具可以說是Fireworks，甚至是所有繪圖工具都必不可缺的一個基本元素。你可以在Fireworks2的工具欄中一眼 就認出它，就是左邊第五個矩形按鈕。如果在這個位置上找不到矩形工具，而圖標是一個橢圓或者六邊型的話，只要用鼠標在圖標上按一會，就可以在隨后彈出的菜單中選取矩形工具了。矩形工具有兩個主要的功能--創建矩形（當然包括正方形）和創建圓角矩形。畫個矩形當然人人都會，只是在畫的時候有幾個功能鍵，我想應該說一說：按住"shift"鍵可以畫一個正方形，而按住"alt"鍵，畫出的矩形不是從左上方向右下方長大，而是由中心向四周發展，很有趣的，試試看呀:)另外，同時按住"shift"和"alt"鍵，就可以畫一個從中心張大的正方形了。要畫圓角矩形，只要在矩形圖標上雙擊，呼出"option"面版，在"corner"一欄里填上圓角的大小，以后畫出的矩形就帶圓角了。如果要改畫尖角矩形的話，只要將corner設為0就行了。
和矩形工具屬于同一類的還有橢圓工具（elipse）和多邊形工具（polygon），它們的用法和矩形工具相同，當然也包括功能鍵的使用。不過，多邊形工具（polygon）還可以制作星形，設置的方法是雙擊多邊形工具工具的圖標，呼出option面版，在"polygon"選項中選擇star，接著就可以畫出星形了。并且還可以在option面版中設置星形的夾角大小，方法很簡單，這兒就不多說了。
和矩形工具一樣屬于基本模塊的還有線形工具。只是畫直線比畫矩形還簡單，沒有什么屬性可以設置的。當然線形工具也支持功能鍵，按住" shift"鍵可以畫出水平或豎直的直線，而按住"alt"鍵可以畫出45度直線。 除此之外，Fireworks還有"鉛筆（pencial）"工具和"刷筆（brush）"工具（工具按鈕就在矩形工具的下面）。這兩個工具給用戶提供一個自由手繪的方式，您可以用它畫出各種各樣的曲線、直線，甚至是亂七八糟的線性圖案。不過單靠鼠標來畫，要得到令人滿意的效果非常困難，如果您有壓敏書寫板的話，這兩個工具的效果就會好得多。
而對于使用鼠標的用戶來說繪制曲線的最好方法是使用"鋼筆（pen）"工具。pen工具可以幫助您繪制路徑（path），一條路徑是由曲線連接 起來的多個節點，而每給節點的兩側各有以個句柄，用來控制此節點兩旁的曲線方向，您可以通過修改節點和句柄的方向或長短來修改整條曲線的 形狀。
由于Fireworks是一款結合了矢量和點位圖編輯于一身的圖象編輯軟件，所以無論是使用矩形工具還是使用鉛筆或者鋼筆工具繪制出的圖形，都是基于路徑（path）的形狀。路徑一般有兩中方式--閉合的路徑（closed path，比如矩形或多邊形）和敞開的的路徑（opened path，比如用線形工具繪制的直線）。而所有的路徑都可以被"副選（subselection）" 工具（快捷鍵為"a"）選取，再次進行編輯。
路徑的著色方法分為描邊（stroke）和填充（fill）兩種，描邊的作 用是讓路徑擁有不同的筆觸，而填充是使用不同的材質填滿路徑所包圍的 區域。為了說得更生動一些，請您打開Fireworks，新建一個圖象（"File > New"），圖象的大小隨意，選擇透明背景（transparent）。然后按下"d"將前景色和背景色恢復到默認色（黑與白），再使用pan工具制作一 個半圓形的路徑。
選擇"Windows > Stroke"（Ctrl+Alt+B）打開描邊工具面板，然后按下"v"鍵使用"選擇（pointer）"工具選定剛才繪制的半圓形路徑。選定路徑后描邊工具面板將顯示此路徑的描邊情況（本例中的描邊情況是 Pencil/1 pixel soft/color:black/texture:Grain 0%）。在這個描邊面板中，您可以看到Fireworks不僅提供了大量的描邊選擇，并且允許用戶自由定義描邊筆觸以及描邊時使用的材質（texture）和質感大小。
比如，我們需要將當前的路徑使用具有小點材質的紅色噴槍描繪，只要在描邊面板中將Pencil改為Air Bruch ，將顏色改為紅色，并在texture中選擇"Dots"將質感設為80%，最后Apply一下就行了。
如果您覺得一個新建描邊效果很不錯，希望保留的畫，就請按下描邊 面板的彈出菜單按鈕，選擇"Save Stroke as"就可以將特效筆觸保存下來，以便日后再次使用。
填充面板的使用方法和描邊面板的非常相似，您可以選擇"Window > Fill"（Ctrl+Alt+F）打開填充面板。Fireworks2提供多達15種填充特效，其中的一些十分怪異有趣，我建議您一定要親自試試，如果有新的發現不要忘了及時將效果另存，以便日后使用。
在本章的最后，我告訴您一個小技巧。Fireworks的描邊和填充的材質都是可以擴充的（就和phototshop一樣）！如果您找到自己喜歡的連續性圖案，只要用Fireworks將之打開，然后選擇"Xtra > other > Convert to Alpha"將圖片轉變成灰度圖象，然后選擇"File > Save as"給它起個好聽的名字并保存在Fireworks目錄下的Setting文件夾中的Textures目錄下。當再次啟動Fireworks時就可以使用您自己的texture了。
來自愛搜書:
第 五 章
文字工具以及文字特效
這章教程，我想單單給你介紹Fireworks的文字工具以及文字特效，之所以要將對文字功能版塊的介紹獨立成一章，是因為Fireworks中的文字以及相關功能，是目前我所見的圖象編輯軟件中最強大，最完善！
?。Ｍ暾奈淖指袷交δ?，支持雙字節文字
這是所有成功的圖象設計軟件所必備的特點，當然Fireworks也不例外。您可以在工具欄中按下文字按鈕（圖標為"A"的那個按鈕），再在工作窗口中單擊以呼出文字編輯面版（Text Editor）。Fireworks的文字面版十分直觀，完全支持雙字節文字（當然，前提是系統擁有相應的字庫 ），使用的方法與普通圖象編輯軟件中的同類功能十分相似，如果您有一些圖象設計經驗的話，完全可以輕松上手。但與眾不同之處在于：Fireworks2的Text Editor功能支持定義單個文字的屬性。當您在Text Editor中輸入一串文本后，可以自由地改變此文本中任意字的屬性。也就是說，用戶可以在Text Editor面版中同時輸入一串字體、顏色、大小等等屬性完全不同的語句。
不僅如此，在用Fireworks編輯圖片的過程中，文字始終保持一種特殊路徑形式。所以用戶可以隨時隨地地修改文字內容，而不會象Photoshop5那樣，一旦進行"Rend Layer"操作，用戶就再也無法對文字層中的內容 進行修改了:(
?。７奖愕奈淖稚侍畛涔δ?/p>
Firework將文字作為一種特殊的物件（object），它既能夠讓Text Editor工具識別，對文字的內容進行修改，又允許用戶象編輯普通路徑那 樣給文字著色、描邊（方法詳見教程的上一章）。這種特殊的設定給用戶 帶來了前所未有的方便，甚至當用戶使用變形工具（快捷鍵為"Q"）給 選定的文字進行變形后，聰明的Firewoks仍然能夠自動匹配變形后的文字 的大小，依舊允許用戶使用Text Editor對文字進行編輯。
?。e出心裁的文字對齊選項
Fireworks 提供了一個矢量繪圖軟件所特有的文字對齊功能。您只要在畫面中文字上單擊右鍵，就可以在隨后彈出的菜單中的"Align"一項內選擇文字的對齊方式。Fireworks2共提供了八種文字對齊方式：
左對齊（left）；
右對齊（right）；
水平居中（center-1）；
左右擴展（Justified-1，這種方式是通過調節文字的水平間距使文字按文字框的長度對齊，使用非常廣泛）；
左右拉伸（Stretched-1，這種方式是通過拉伸文字的寬度，使之按文字框的長度對齊）；
頂端對齊（top）；
豎直居中（center-2）；
底對齊（bottom）
上下擴展（Justified-2，這種方式是通過調節文字的垂直間距使文字按文字框的高度對齊，使用非常廣泛）；
上下拉伸（Stretched-2，這種方式是通過拉伸文字的高度，使之按文字框的高度對齊）；
?。Ｎ淖值奶厣Ч?/p>
Fireworks2 新增一個Style功能面版（"Windows > Styles"快捷鍵 為Ctrl+Alt+J）。Style功能提供了近300種內值的路徑填充和描邊的特效，可以最快捷地生成適用于網頁制作的文字特效，當然，Style也適用于所有普通路徑。并且Fireworks2允許用戶自由擴充Style，您可以將自己新創的路徑定義為一個Style（方法是使用Styles面版的彈出菜單中的"New Style"命令），以便今后反復使用。
?。Ｎ谋经h繞路徑功能
這無疑是Fireworks2的文本功能中最激動人心的效果，這個以前只有在矢量繪圖中才可能具備的功能大大縮短了用戶制作環繞文本的工序。您只須選定文字和文字要環繞的路徑，然后選擇"Text > Attach to Path" （快捷鍵為Ctrl+Alt+Y）,就可以將文字結合到特殊的路徑上。并且，結合后的文字依舊可以通過Text Editor進行編輯，也可以使用不同的Align方式定義不同的路徑圍繞效果，還可以用上述的方法修改文字的填充效果或套用Style。
?。２檎液吞鎿Q功能（Find & Replace）
這樣的新增功能聽上去似乎是一款文字編輯軟件才應該具備的，不過細心macromedia已經為用戶考慮到了方方面面，Fireworks2中的Find & Replace功能（"Windows > Find & Replace"）不僅提供了普通的文字查找替換功能，并且可以修改文件中使用的顏色、字體、URL！這些匠心獨具的設計使Firework2成為最具創造力的圖象設計軟件，它完全體現了macromedia的設計決心--讓您的工作更具效率（Productivty）。