firework簡介
fireworks是一個強大的網頁圖形設計工具，你可以使用它創建和編輯點陣圖、矢量圖形，還可以非常輕鬆的做出各種網頁設計中常見的效果，比如翻轉圖象，下拉選單等，設計完成以後，如果你要在網頁設計中使用，你可以將它輸出為html檔案，還能輸出為可以在photoshop,illustrator和flash等軟體中編輯的格式。
fireworkFireworks提供專業網路圖形設計和製作方案。通過它，你可以編輯網路圖形和動畫，支持點陣圖和矢量圖。同時它能dreamweaver、flash能實現網頁的無縫連線，與其它圖形程式各HTML編輯也能密切配合，為用戶一體化的網路設計方案提供支持.
Fireworks提供專業網路圖形設計和製作方案。通過它，你可以編輯網路圖形和動畫，支持點陣圖和矢量圖。同時它能dreamweaver、flash能實現網頁的無縫連線，與其它圖形程式各HTML編輯也能密切配合，為用戶一體化的網路設計方案提供支持。
切割圖形
firework切圖就是一個不錯的方法，為了儘量保持圖形的完整又不龐大，我們可以將一整幅圖片按照相近的色區切割成多個小圖片，並將每個小圖片保存為色深較淺的gif圖形。這樣可以達到又漂亮又快捷的效果。
但傳統的切圖工作十分繁瑣，許多設計者都是使用Photoshop類軟體將圖一片片分好，然後在分別保存為不同色深的gif圖象，雖然可以使用action之類的自動執行命令集，但實際工作量依舊十分驚人，而且非常容易切錯尺寸。
現在用了Fireworks就可以非常輕鬆地切割圖片了，首先用Fireworks打開要切割地圖形檔案（File>Open），當圖片打開後選擇工具列最右下方的切割工具（SliceTool），在圖中按住滑鼠左鍵任意畫出想要的切割效果（注意不要將選區重疊），圖中那些紅線表示就是最後生成的表格分欄情況。
等全部的切割區域完成後選擇“FILE>EXPORT”進入導出，在Format中選擇gif，再根據圖象的具體情況設定色深、調色板和透明色，然後按下“Next”。
最後再導出成HTML檔案的對話框中指定保存的目錄，在“slicing:”選項中選擇“UseSliceObjects:”按照剛才劃分出的切割情況來切圖，並分別保存。在“Style選項”中選擇“Generic”導出成標準的HTML源碼。OK，如果要和Dreamwever一同使用的話，可以選擇“DreamweaverLibra-ry.lbi”將導出為DREAMWEAVER2的一個模板，而“Dreamweaver”選項將導出成DREAMWEAVER作出來的網頁源碼。
動態效果切圖
firework打開monitor.gif件後你可以看到那上面畫的是一個電視機，現在我們要做的是將這個電視機放入一個網頁，並且當瀏覽者的滑鼠按下電視機上的開關後，會在螢幕中播放內容。
第一步，要在圖象上製作用來調用javascript的熱區，製作熱區的方和上一章中切割圖象的方法一樣，都是使用工具列最右下方的切割工具（SliceTool）。由於我們構想中的這個javascript是通過按下電視機開關後在螢幕上出現變化，所以需要定義兩個熱區，分別是電視機開關和電視機螢幕。
然後選擇“windows>Object”（Ctrl+I）選項，打開Object面板。先選中電視螢幕的熱區，Object面板即將顯示這個熱區的屬性，其中的連線地址默認為“NoURL(noHREF)”也就是當前網頁的連線（#）；項內容為滑鼠放到圖片上時顯示的提示；這下面那個紅色的靶心是target，用來確定連線標籤的目標的，在這兒就不多說了；最關鍵的是：不要激活target下的“Auto-NameSlices”功能，而需手動給這個切割熱區起一個名字，這樣做是為了在指定behavior時能夠方便的辨認目標。還要注意的是在給slice命名時，不能使用中文，否則生成的javascript代碼會在瀏覽器中長時間報錯。在這個例子中螢幕熱區起的名字是“screen”，再以同樣的方法給電視開關取名為“button”。
接著做一個電視上要顯示的圖象，選擇“File>New”（Ctrl+N）命令新建一個和螢幕熱區大小相同的圖片（注意：尺寸過大或過小都會被javascript縮放到螢幕熱區的大小）。新建檔案後，您可以使用工具列上各類工具隨心所欲地畫出自己喜歡的東東（工具列中各個繪圖工具的使用方法將在以後的教程中做詳細介紹）。對自己的作品滿意了嗎？您畫完後請選擇“File>Export”（Ctrl+Shift+R）將圖象導出為網路圖形。
Fireworks的圖象導出功能非常強大，但現在您只要一路NEXT就可以了，並將生成的gif檔案保存到指定的目錄下。
然後回到剛才編輯的電視機畫面，選定開關熱區，再選擇“Windows>Behaviors”（Ctrl+Alt+H）選項，打開behaviors面板。按下添加按鈕，選擇“SwapImage”，在隨後彈出的SwapImage對話框中的“SwapImageinSlice”選項中選擇“screen”熱區（也可以在右邊的熱區畫面中直接選擇screen熱區，這樣做就可以讓button熱區調用一個使screen熱區產生變化的javascript）；在“SourceofSwap”中選擇“ImageFile”並在瀏覽面板中指定剛才製作的那個gif圖象。最後激活“RestorImageonMouseOut”（激活這個功能後，瀏覽者將滑鼠離開調用javascript的熱區後，發生變化的圖象將恢復正常。
當上面這步完成後，behaviors面板中將出現一個“OnMouseOver”的件處理器，這就說明剛才做的熱區已經成功調用了javascript。但我們期的效果是當滑鼠按下開關後才在電視螢幕中顯示內容，所以請按下“OnMouseOver”旁的下拉選單按鈕，在彈出的選單中選擇“OnClick”。好，到這兒基本上該完工了。想看看作品的效果如何嗎？選擇“File>PreviewinBrowser>Previewin...”（F12）命令，就可以在新視窗中預覽剛才的作品了。
達到預期效果了嗎？滿意的話就可以導出成品了，這兒有個小技巧，由於fireworks的預覽功能已經生成了臨時的圖形和HTML檔案，所以如您使用IE5行預覽的話，可以直接在自己滿意的預覽視窗中將所以文另外儲存，就可以免去導出步驟而得到完整的作品了。如果您沒有IE，那只能乖乖地使用導出功能，具體地導出方法和我們在上一章中所說的靜態切圖的導出方法相同，在這兒就步重複了。
製作動畫
firework合併圖象形成動畫，顧名思義就是將一系列圖片按序排列生成不同的幀而形成動畫（很象Director中的Spacetotime功能），不過這種排列完全是程式自動執行的，免去了大量的手工操作。具體的方法是這樣的（當然使用這種方法的前提是必須有一連串連續的圖片）：選擇“File>OpenMultiple”命令。進入系列圖片所在的目錄，然後按次序將一連串的圖片加入（“Add”命令）對話框左下部的視窗，並且激活“OpenasAnimatio”選項，再按下“Done”按鈕就OK了。
在動畫生成後，按下“Windows>Frame”（Ctrl+Alt+K）命令，您就看到原來的一系列圖片都按次序地從Frame1往下排到底。按下螢幕右下角的播放鍵就可以瀏覽動畫效果了。這種純粹的懶辦法最合適我這樣畫不來線條的人了，一次有只用了10秒鐘就搞定了一個小鳥飛飛的圖片，效果棒極了！
不過，要是手頭沒有現成的連續圖片，那只能勞駕，自己親自動手了。而許多圖畫中有規則的動態效果若是用手工製作，既費時間也未必能夠達到理想的效果。所以Fireworks2提供了一個Tween功能，使用戶可以指定程式生成動態過度效果（感覺就更Flash里的一樣）。
在繪製動畫前，事先必須明確動畫的工作原理。動畫是有不變的物件（object）和會變的物件兩部分組成。通常不變的物是只如背景之類始終在動畫中顯示的物件，而會變的物件是指通過變化形成動畫的物件。所以在製作動畫之前得先製作不變的物件，為此Fire-works2提供了一個共享層的概念（ShareLayer）。
我們都知道，動畫是由一個個不同的幀（Frame）組成的，而共享層就是在所有幀中都顯示的一個層，這樣我們只要將動畫中不變的物件全放在這個層中，以後只需要修改一個幀的共享層中內容就可以使所有的幀都達到相應變化，大大減少了工作量。設定共享層的命令是Layer面版的彈出選單中的“ShareLayer”命令，設定為共享的層在Layer面版中都有一個特定的共享符號（WegbLayer是系統自動設定的共享層，用於放置熱點、切割區）。
在完成不變的物件（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）命令，在彈出視窗中添入所要設定的過度幀數，並且激活“distrubutetoFrame”選框，OK，成功。
最後的一種動畫方法是手工繪製，這可是一件累人的活，而且要手工畫動畫，您必須熟悉套用工具列中的各種繪圖工具。因此，我準備在以後的教程中陸續地向您介紹各種繪圖工具的使用方法。而在這兒要告訴您的是Fireworks2中新增的洋蔥皮功能（OnionSkining），為以後的教程埋下伏筆。
洋蔥皮功能（OnionSkining）就象我的朋友們畫動畫用的半透明的紙一樣，讓用戶在編輯當前幀的同時可以看到此前或此後的幀中的內容。這樣在手繪動畫時可以方便地確定圖案路徑。您可以在Layer面版（Windows>Layer）中找到洋蔥皮功能，其中的選項分別是：
NoOnionSkinning關閉洋蔥皮功能；
ShowNextFrame在當前幀中顯示下一幀的內容；
BeforeandAfter在當前幀中顯示前一幀和下一幀的內容；
ShowAll在當前幀中顯示所有幀中的內容；
CustomEnter讓用戶設定洋蔥皮的顯示功能；
Multi-FrameEditing使用戶可以透過洋蔥皮編輯其他幀中的內容
空說無用，為了給您一個感性認識，我建議您打開一個動畫GIF檔案，然後在Layer面版中試試洋蔥皮功能，就能具體感受到Fireworks的方便。
