圖像變換技術在網頁中經常被用到，即當鼠標移動到某圖像或按鈕上時，會觸發另一個圖形的顯示。在Fireworks中，圖像變換的製作原理就是使「幀」面板中某幀中的圖形對象與來自任何幀的圖像進行交換，從而達到在網頁瀏覽時產生圖形變換的效果。
1、簡單的圖像變換
在Fireworks中製作簡單的圖像變換，就是把「幀」面板中第1幀裡的對象與第2幀中的圖像進行交換。
我們先製作或引入一個按鈕的一般狀態圖，選中圖形後單擊鼠標右鍵，從彈出菜單中選擇「插入切片」或「插入熱點」命令，如圖9—01。
圖9—01
然後在「幀」面板中新增加一幀，並在此幀上引入鼠標經過按鈕時將要變換的圖像，如圖9—02。
圖9—02
選中切片後，啟動「行為」面板，點擊「添加」
指令按鈕，從中選擇「簡單變換圖像」，如圖9—03。
圖9—03
這樣，一個簡單的變換按鈕就製作完成了，按F12鍵就可以在瀏覽器中進行測試了。
圖9—04
可以看到，不管你在第二幀中所導入的圖像有多大，在網頁瀏覽時也只能在相同的切片範圍內看到兩張圖形的變換效果。因此，這種圖像的變換又被稱為「相交變換」。
2、複雜的圖像變換
先在畫布上繪製或引入三個圖形對象，然後同時選中這些對象，並在任意一個對像上單擊右鍵，從彈出菜單中選擇「插入切片」。這時會彈出一個提示窗口，如圖9—07。
圖9—07
選擇「單一」按鈕時，是把選中的全部對像設置在同一個大的切片區域內，而「多重」按鈕則是為所有對象各設置一個獨立的切片區域。在這裡我們選擇「多重」按鈕後，如圖9—08。
圖9—08
接著，我們在「幀」面板內添加三個空白幀，如圖9—09。
圖9—09
在第2幀中引入「小貓」按鈕切片所要變換的圖形，並在該圖形上點擊右鍵選擇「插入切片」命令，如圖9—10。
圖9—10
同樣的，我們在第3和第4幀中也分別引入用於「鸚鵡」和「鮮花」按鈕所要變換的圖像，然後都在圖像上點擊右鍵，選擇「插入切片」項。
圖9—11
接著，點選「小貓」的按鈕切片後使用「行為」面板上的「交換圖像」指令，如圖9—12，從而啟動「交換圖像」的詳細設置對話框（圖9—15）。
圖9—12
或者用鼠標左鍵按住「小貓」按鈕切片中間的圓形控制手柄不放，然後拖拽鼠標到與其進行圖像交換的切片上，這時會出現一條藍色的鏈接曲線，如圖9—13。
圖9—13
鬆開鼠標後會彈出一個「交換圖像」的設置窗口，在下拉菜單上選擇與「小貓」按鈕切片進行交換的圖像所在的幀。在這裡我們選擇「幀2」。
圖9—14
如果點擊「更多選項」按鈕，也可以啟動「交換圖像」的詳細設置對話框，如圖9—15。
圖9—15
在該窗口中，左上邊所列出來的是所有切片區塊的名稱，右邊是所有切片區塊所在位置的縮略圖。在這裡我們可以從中任意選擇一個圖像的切片區塊用來與「小貓」按鈕切片進行圖像交換。
幀編號——選擇交換圖像所在的幀數，在這裡我們選擇的是第2幀；
圖像文件——如果第2幀的圖形沒有事先導入工作區裡，也可以通過這裡另行引入圖像；
預先載入圖像——在瀏覽測試圖像的變換效果時可以預先載入圖像；
鼠標移開時復原圖像——在網頁瀏覽時，當鼠標離開按鈕後，圖形會自動恢復原來的狀態。
設置完成後點擊「確定」按鈕即可回到工作區。此時，「小貓」按鈕的切片和它所要交換的圖形切片間多了一條曲線。它表明這兩個區域已建立了鏈接關係，如圖9—16。
圖9—16
用同樣的方法為「鸚鵡」和「鮮花」按鈕在「交換圖像」對話框中設置不同的交換圖像。三個按鈕切片設置完成後如圖9—17。
圖9—17
按F12鍵即可在瀏覽器上測試製作效果了，如圖9—18。
圖9—18
可以看到，點擊不同的按鈕圖像，就會在不同的位置上顯示相應的變換圖形。因此，這種圖像的變換效果又被稱為「不相交變換」。
要修改設置內容時，選擇切片後，點擊「行為」面板右下角的「編輯」
按鈕即可，如圖9—19。
圖9—19
3、輸出HTML文件
點擊Fireworks菜單欄中的「文件—導出」命令即可把製作的內容輸出為HTML格式的文件，如圖9—20。
圖9—20
文件名——輸入導出文件的名稱；
保存類型——選擇輸出文件的保存格式。默認情況下是以HTML格式輸出；
HTML——導出成HTML文件或把製作內容以GIF圖像格式複製到剪切版中；
切片——可以選擇是否導出切片；
僅已選切片——只導出事先被選取的切片；
僅當前幀——當製作對像有多個幀數時，可以事先選中某幀進行單獨導出；
包括無切片區域——選擇是否將無切片區域一併導出；
將圖像放入子文件夾——可選擇是否把導出的HTML文件與圖片一起放在一個文件夾內。點擊下面的「瀏覽」按鈕可為圖片選擇一個子文件夾進行保存。
