Fireworks4極速教程

教程

一、初識Fireworks4.0

　　Fireworks是一個強大的網頁圖形設計工具，你可以使用它建立和編輯位元影像、向量圖形，還可以非常輕鬆的做出各種網頁設計中常見的效果，比如翻轉圖象，下拉式功能表等，設計完成以後，如果你要在網頁設計中使用，你可以將它輸出為html檔案，還能輸出為可以在photoshop，illustrator和flash等軟體中編輯的格式。

檔案視窗

　　Fireworks 的檔案視窗上有四個標籤，可以同時編輯和預覽圖象，你可以同時預覽四種不同的最佳化設定所產生的效果，選擇最理想的一種設定。

工具條

　　工具條上包括各種選擇、建立、編輯圖象的工具,有的工具按鈕的右下角有一個小三角，說明這個工具包含有幾種不同的形式，按住這個工具不放就能顯示其他的形式。

向量模式與位元影像模式

　　Fireworks 可以進行向量模式與位元影像模式的編輯，在預設狀態下，Fireworks 在開啟時是處於位元影像模式下，你所繪製的圖形是作為向量對象來處理的。當你在編輯它們時，你會看到你是在修改構成向量圖形的路徑。

　　你可以開啟或是輸入位元影像，可以對構成位元影像的像素進行編輯，在處於位元影像狀態下時，畫布帶斜紋的框包圍著。

浮動面板

　　Fireworks的浮動面板包括有layer（圖層），frames(幀），color mixs(顏色混合），behavor(行為)，optimize(最佳化)和object（對象）等。

　　在工作中你可能會發現有些面板經常會用到，你可以把工作起來最方便的面板相片順序儲存起來，使用功能表命令command ->panel layout,如果下次要調出這種相片順序只要command ->panel layout set的子功能表內選擇就行。

　　在工作區的右下角有一排快速啟動欄，點擊快速啟動按鈕就可以很迅速的調出相應的浮動面板。

庫（Library）

　　庫（Library）裡儲存了可以被重複使用的元素，稱為symbol(符號)，你可以建立一個符號或是將已經存在的對象轉化為符號。

　　符號分為圖象、動畫、和按鈕三種，要調用符號只要把它拖到畫布上就可以了，一個符號可以有多個instance（例圖），如果你編輯了符號，那麼畫布上所有的instance（例圖）都會改變。

文 / 5D多媒體 Candy

二、做一個按鈕

畫一個矩形

　　首先我們要在輔助線的協助下，畫一個矩形。

　　1、從菜單上將 View > Guides 的 Show Guides 和 Snap to Guides 選上，這樣就可以顯示輔助線並且確保對齊到輔助線(Guids)。

　　2、單擊工具條上的矩形工具(Rectangle tool) 。

　　3、將矩形工具(Rectangle tool)指標貼近輔助線(Guides)矩形地區的一個角，按下滑鼠並拖動到對角上。

漸層填充

　　為了讓這個矩形更象一個按鈕，我們要給這個矩形進行漸層填充並且加上立體效果。

　　1、開啟fill（填充）面板，然後確保矩形仍然處於選中的狀態，在fill面板上的Fill Category 下拉式功能表上選擇Linear（線型漸層）方式。

　　2、然後在Fill name下拉式功能表上選擇Black，White。

　　3、點擊編輯按鈕（edit）然後把左邊的顏色樣本象右邊拖一點，使黑白漸層更加暗淡一點。

添加效果（Effects）

　　Effects面板可以給圖象和文字加上特別的效果，比如漸層和浮雕。

　　1、如果Effects（效果）面板不可見，從菜單中選擇 Window > Effect。

　　2、在Effects（效果）面板最上面的下拉式功能表中選擇“Bevel and Emboss-Inner Bevel”（漸層和浮雕-內斜面）。

　　3、並且在斜邊形狀的下拉式功能表中選擇Sloped，然後把邊緣寬度設為4。

　　注意：在加上效果以後如果想修改可以點擊Effects面板上的 按鈕。

　　要建立一個JavaScript 按鈕 ，必須先將物件轉化為Symbols(符號),Fireworks中的(符號)是儲存在文檔的庫(Library)中可以重複利用的元素。

轉化為Symbols(符號)

　　1、選定這個矩形地區,從菜單中選擇 Insert > Convert to Symbol.

　　2、在Name(名稱)一欄中填入 MyButton 。

　　3、選擇按鈕(Button)選項，然後單擊“ok”。

　　現在你可以看到，這個按鈕被一層綠色所覆蓋，並且在左下角有一個小箭頭，這層綠色表示這是一個分割區(Slice)。而這個箭頭表明這個矩形地區是儲存在文檔的庫(Library)中Symbols的一個例圖(Instance)。 然後，你將會使用這個圓形的（behavior control ）動作控制器 來建立一個翻轉圖象。

　　4、選擇菜單 Window > Library可以看到在庫(Library)中的按鈕：

給按鈕加上文字

　　1、雙擊這個按鈕開啟按鈕編輯器

　　2、選擇文字工具(Text tool)，然後在按鈕編輯器中的按鈕上單擊滑鼠。

　　3、在文字編輯器(Text Editor)中可以選擇字型選擇，字型大小對齊等，在這裡我們選擇Impact字型, 大小為16-point，置中對齊。顏色設頂為橘黃色。

　　4、輸入“Adventure Planner ”，並單擊ok。

對齊文字

　　對齊按鈕上的文字，你需要使用功能表命令。

　　1、用指標(Pointer)選中按鈕，並且按住shift同時選中文字。

　　2、點擊菜單中的Modify > Align > Center Vertical(垂直中心對齊）

　　3、並且點擊Modify > Align > Center Horizontal（水平中心對齊）這樣將使文字對齊按鈕中心。

建立翻轉效果

　　1、單擊按鈕編輯器的滑過(Over)標籤然後單擊複製彈起映像( Copy Up Graphic)按鈕。在滑過(Over)標籤中的映像是指在已完成的網頁中當滑鼠指標滑過這個按鈕時顯示的映像。

　　2、選中文字，使用fill(填充）面板，將文字變為紅色。

　　3、關閉按鈕編輯器

記得要經常的儲存你的工作哦

預覽一下

　　1、點擊工具面板下面的隱藏切片表徵圖，就可以隱藏掉按鈕上覆蓋的綠色。

　　2、點擊preview標籤，

　　3、把滑鼠移到按鈕上面就可以看到變色的效果了。

給按鈕加上連結

　　1、點擊Object面板上的 Link Wizard （連結嚮導）

　　2、在Link Wizard （連結嚮導）上的link標籤上輸入連結地址。

文 / 5D多媒體 Candy

三、建立動畫

建立一個物體來產生動畫

　　1、建立一個檔案，長和寬都是200pixel

　　2、用矩形工具畫一個矩形，你可以使用你喜歡的任何顏色

動畫的設定

　　1、選中這個矩形，選擇modify菜單Animate->Animated selecation.

　　2、在frame 框中輸入5

　　3、move框中輸入180,這是設定移動的距離像素

　　4、在direction中輸入45,設定移動的角度

　　5、單擊ok,Fireworks 將會問你是否添加新的frame（幀）

　　6、單擊ok，將會自動添加新的幀

　　現在圖中的矩形上的右下角就會加上一個小小的箭頭，表示這是一個動畫符號（animation symbol),一條線表示這個符號的移動路徑，線上的每一個點表示一幀。

動畫預覽

　　你可以直接在工作區內預覽這個動畫

　　1、如果frame（幀）面板不可見，選擇window -> frames

　　2、點擊畫布下方的播放/停止按鈕，就可以播放動畫。

　　3、再次點擊這個按鈕可以停止。

　　4、在frames面板上你可以看到每一幀的動畫

　　現在你可以給這個動畫做一些修改

動畫的編輯

　　可以使用object(對象）面板對動畫進行編輯

　　1、開啟object(對象）面板

　　2、點擊frames面板上的第一幀

　　3、選中這個symbol,在object(對象）面板上就會顯示這個動畫的設定， 4，你可以對這個設定進行修改，比如在scaling（縮放比例）內輸入110，使從第一幀到最後一幀圖象放大10%

　　4，你可以對這個設定進行修改，比如在scaling（縮放比例）內輸入110，使從第一幀到最後一幀圖象放大10%

　　5、在opacity(透明度）左邊的框內輸入10，右邊的框內輸入100，這將使動畫產生透明度的漸層

　　6、在rotation（旋轉）中輸入180， 將使動畫產生180度的旋轉

　　7、再次點擊播放按鈕就可以看看效果了。

編輯運動路徑

　　1、點擊工作區上的symbol,運動路徑就可以顯示出來

　　2、你可以用滑鼠拖動路徑上的第一幀（綠色的點）和最後一幀（紅色的點），來改變它們的位置

　　3、也可以拖動中間的幀（藍色的點），改變整條路徑

　　4、再預覽一下看看吧

輸出gif動畫

　　要在瀏覽器中看到這個動畫，就必須輸出成gif動畫格式或swf格式

　　1、開啟optimize(最佳化）面板

　　2、輸出格式設為animated gif（動畫gif）

　　3、單擊菜單上file -> export命令

　　4、檔案類型選擇 html and images就可以輸出一個html檔案

　　5、你可以用瀏覽器開啟這個動畫來看了

文 / 5D多媒體 Candy

四、熱點和切片

　　熱點（hotspots ）和切片（slices ）是用來建立圖象互動效果的重要工具，熱點和切片被稱為web對象，也就是說，它們不是圖象而是一段html代碼，在層面板上的Web Layer ，你可以查看，選擇和重新命名熱點和切片。

熱點和影象地圖

　　在網頁設計中熱點（hotspots ）和影象地圖（image maps ）被廣泛的使用，熱點是圖象上帶有超級連結的一塊地區，同一副圖上可以有幾個熱點連結到不同的地址，這就是影象地圖。

　　在Fireworks中你可以作出不同形狀的熱點

建立矩形或圓形熱點

　　1、選取矩形或圓形熱點工具

　　

　　2、使用熱點工具在圖象上拖拉畫出你要建立熱點的地區，按住alt鍵可以從中心畫起

建立多邊型熱點

　　1、選擇多邊形熱點工具

　　

　　2、在圖上點擊滑鼠，然後在另一點上點擊，就會自動連起來構成多邊型熱點，就象使用鋼筆工具一樣。

沿選擇的對象邊緣建立熱點

　　1、選擇功能表命令Insert > Hotspot插入熱點

　　2、如果你選擇了不止一個對象，就會跳出一個對話方塊問你是建立一個還是多個熱點。

　　3、你可以選擇single建立一個熱點或是選擇mutiple建立多個熱點

添加連結

　　1、開啟object 面板

　　2、在link框內添入連結地址

　　3、在alt 框內可輸入替代圖象的文字，在圖象下載的過程中這些文字會顯現出來

給切片加上連結的方式也是一樣的

切片

　　切片可以將一副大的圖片分割開來，這樣可以減低圖象的大小，並且能創造互動的效果，如翻轉圖象等，還能將圖象的一些地區用html來代替。

建立規則的切片

　　規則的切片是最常見的

　　1、開啟圖象檔案（File > Open）

　　2、選擇圖象上的一塊地區，

　　3、選擇菜單 insert > slice

　　4、當然你也可以使用切割工具 進行切割

　　切片的地區上將會覆蓋上一層半透明的綠色，切片周圍顯示紅色的導線，在最後輸出以後這些紅色的導線將不會顯現出來。

建立不規則圖形切片

　　1、選擇工具面板上的不規則切割工具

　　2、沿圖象邊緣進行不規則切割

顯示和隱藏切片

　　開啟圖層面板點擊slice（切片）層上眼睛的表徵圖，就可以顯示和隱藏表徵圖

 

五、翻轉圖象

　　除了建立按鈕之外，Fireworks 還可以讓您輕鬆的建立一個奇異的 Javascript 翻轉效果。例如，當滑鼠指標滑過一個按鈕，除了改變這個按鈕的顯示狀態，您還可以讓它改變在這一頁中的其他地區的顯示，在 Fireworks 中，這種翻轉效果被稱作不相交翻轉（disjoint rollover）。

加入引發翻轉的圖象

　　1、開啟圖象

　　2、選擇菜單上的 Insert > Slice，給圖象加上切片

加入新的幀

　　1、在frames(幀）面板上加入新的幀

　　2、選中新增加的這一幀

　　3、用矩形工具畫和一個切片同樣大小的長方形

加上拖放behavior

　　1、選中切片

　　2、將指標點中切片中心的behavior移駐夾，這時指標將變為手的形狀

　　3、按住behavior移駐夾從中心往切片左上方拖動，這時就會出現一條藍色的線條，同時會彈出一個視窗，在下拉的菜單上選擇frame2

　　4、點擊preview標籤，就可以預覽到翻轉的效果了

建立一個不相交翻轉

　　1、選中frame2

　　2、用文字工具輸入文字

　　3、選擇菜單上的Insert > Slice，將文字變為切片

　　4、點中上面的切片上的behavior移駐夾，拖向下面的文字切片

　　5、在彈出的視窗的快顯功能表上確定選中了frame2

　　6、這樣就會建立一個不相交翻轉，當滑鼠掠過上面的圖象時就會顯示下面的文字

六、下拉式功能表

　　建立標題

　　1，建立一個圖象

　　2， 用矩形工具畫一個長方形

　　3,用文字工具輸入文字

　　建立切片

　　選中這個矩形,然後選擇菜單insert -> slice（插入-切片）.

　　加上下拉式功能表

　　1，保持切片處於選中的狀態，選擇菜單insert -> pop menu,插入子功能表

　　2，在彈出的視窗內進行輸入，text(文字）框內輸入子功能表上要顯示的文字

　　3,在link（連結）內輸入要串連的地址

　　4,點擊+按鈕加入下拉式功能表

　　5，重複上面幾步，直到要加入的子功能表項目全部加入完畢

　　6，可以拖拉下面的列表，對子功能表的項目進行排列，也可以進行編輯和刪除

　　7，點擊next進入下一步

　　8，這裡可以對子功能表的外觀進行編輯，有兩種格式的子功能表可以選擇，html格式和圖象格式

　　9，當所有的設定完成後，可以單擊finish退出

子功能表定位

　　1，選中切片，你會發現一條藍色的線組成的子功能表的形狀

　　2，將滑鼠的指標移到菜單的位置，指標會變為手的形狀

　　3，你可以把菜單拖到合適的位置

　　預覽

　　要預覽下拉式功能表的效果，必須要在瀏覽器中進行

　　1，點擊菜單file->preview in browser

　　2，把滑鼠放上去，你就可以看到彈出下拉式功能表的效果了

文 / 5D多媒體 Candy 七、尋找替換顏色 　　1，開啟一個檔案 　　2，開啟尋找替換（Finding and replacing)面板 　　3,在尋找替換（Finding and replacing)面板上面的下拉式功能表上選擇 search document 　　4,在下一個下拉式功能表內選擇find color 　　5，指定find的顏色，將滑鼠移到檔案視窗，在紅色地區上點擊，然後在change to 內指定要替換成的顏色，比如綠色。 　　6，在apply下拉式功能表中選擇fill,最後點擊replace all 按鈕，尋找替換顏色就完成了，圖上所有的紅色都替換成了綠色

文 / 5D多媒體 Candy

八、自動操作

　　錄製command

　　你可以使用history（曆史）面板來建立command ，在下次要執行相同的操作時可以使用command來自動操作可以大大提高工作效率。

1. 建立一個新檔案
2. 在層面板上建立一個新層
3. 用文字工具輸入draft
4. 選擇window菜單上的history開啟曆史面板
5. 你可以看到剛才的操作都被記錄在曆史面板上了

6. 將兩條記錄全部選中，點擊history(曆史）面板右下角的儲存按鈕
7. 在跳出的對話方塊內輸入command的名字，在這裡我們給這個command命名為add draft layer

　　使用command

　　一個command錄製好了，然後在要進行相同的操作的時候就可以使用這個command來自動操作了

　1，建立新檔案

　2，選擇command菜單上的add draft layer，也就是我們剛才儲存的那個command

　3，這樣fireworks就會自動執行同樣的操作了

　　你可以象這樣錄製各種複雜的command，可以包含任意的步數

　　但是在記錄面板上帶有紅色的×的操作是不能被錄製下來的

　　如果你想刪除command

　　可以開啟command菜單選擇edit command list在列表裡選中要刪除的command，點擊delete按鈕就可以了

文 / 5D多媒體 Candy

九、圖象最佳化

　　使用Optimize （最佳化）面板

　　Optimize （最佳化）面板可以很方便的在工作區內進行圖象最佳化，並且同時看到最佳化後的效果，在Optimize （最佳化）面板上預先設定了幾種最佳化設定可供選擇，你也可以按照自己的需要進行設定。

　　切片最佳化

　　你可以對分割的圖象的每一個切片進行不同的最佳化設定，比如你可以將圖象上色彩豐富的部分設定為jpeg格式，色彩單一的部分設定為gif格式。

　　最佳化效果預覽

　　點擊檔案視窗上的Preview （預覽）標籤，你可以預覽最佳化後的效果。點擊2-up標籤和4-up標籤可以比較幾種不同的最佳化設定所產生的效果。

　　JPEG選擇壓縮

　　JPEG選擇壓縮可以對圖象的不同地區選取項目不同的壓縮比率，在圖象比較重要的部分可以選擇較高的品質。不太重要的部分可以壓縮的大一些。

1. 在圖象上畫一個選區
2. 選擇菜單Modify -> Selective JPEG -> Save Selection as JPEG Mask
3. 在彈出的視窗內勾選Enable Selective Quality 並且輸入選擇地區所要設定的壓縮比率
4. 點擊ok後，你就可以在預覽視窗內看到效果了

　　修改JPEG選擇壓縮的地區

1. 選擇菜單Modify > Selective JPEG -> Restore JPEG Mask as Selection，將會出現一個選區
2. 用選擇地區工具或其他工具對選區進行修改
3. 再選擇菜單Modify -> Selective JPEG -> Save Selection as JPEG Mask

　　要取消JPEG選擇壓縮可以選擇菜單Modify -> Selective JPEG -> Remove JPEG Mask

文 / 5D多媒體 Candy

　　十、輸出

　　輸出圖象

　　當圖象最佳化完成以後，就可以輸出了

　　1，選擇File -> Export to 可以直接進行輸出

　　2，選擇Images Only只輸出圖象

　　3，選擇html and images可輸出圖象和html檔案

　　輸出一個地區的圖象

1. 選擇工具條上的輸出地區工具，在圖上畫出需要輸出的地區範圍
2. 雙擊輸出地區，會跳出輸出預覽視窗，在輸出預覽視窗內可以調整圖象輸出的設定
3. 最後按export按鈕就可以輸出圖象了

　　輸出切片

　　將一副大的圖象使用切割工具分成一個個小的切片以後，你就要把這些切片輸出。

1. 選擇File -> Export
2. 在Slicing下有幾個選項

　　None：忽略所有的切片對象，輸出成當前格式的整幅映像。

　　預設的設定是：Export Slice：輸出切片包括所有的行為設定

　　Slice Along Guides：輸出切片，但忽略所有該對象的行為設定

　　如果要只輸出選中的一個或幾個切片，可以勾選下面的Selected Slices Only

　　輸出flash格式

　　你可以將圖象和動畫輸出為flash的swf格式

1. 選擇File -> Export
2. 在檔案類型下拉式功能表內選擇Flash SWF
3. 點擊Options 按鈕進行設定