圖像交互技術(shù)在網(wǎng)頁制作當(dāng)中被廣泛的應(yīng)用于按鈕效果和圖像展示當(dāng)中。即當(dāng)鼠標(biāo)指向網(wǎng)頁中的某一圖像時(shí)，會(huì)觸發(fā)另一圖像的顯示。下面就讓我們來看一下具體的操作過程。

　　效果預(yù)覽

　　啟動(dòng)FW后可新建一個(gè)如網(wǎng)頁般大小的畫布。然后用繪圖工具隨意畫上三個(gè)矩形按鈕，并在按鈕上輸入相關(guān)的文字內(nèi)容。當(dāng)然，你也可以使用各類工具繪制出更加美觀的按鈕。在此我在三個(gè)按鈕上分別輸入“手機(jī)”、“攝像機(jī)”和“隨身聽”的字樣。然后把每個(gè)按鈕的對(duì)象及文字選中后使用“修改—組合”命令，使這三個(gè)按鈕成為三個(gè)各自獨(dú)立的組合對(duì)象。接著可按網(wǎng)頁制作時(shí)的需要，將這三個(gè)按鈕進(jìn)行排列對(duì)齊。
　　把這三個(gè)按鈕全部選中，并在任意一個(gè)按鈕上點(diǎn)擊鼠標(biāo)右鍵，然后從彈出菜單中選擇“插入切片”項(xiàng)。這時(shí)會(huì)彈出一個(gè)提示窗口，可直接點(diǎn)擊“多重”按鈕。這樣，就為這三個(gè)按鈕建立了導(dǎo)出切片。如圖01。

　　

　　圖01

　　
　　點(diǎn)擊“幀”面板右下角中的“添加幀”按鈕，新建三個(gè)空白幀。如圖02。

　　

　　圖02

　　　　然后在第2幀中繪制或?qū)胍粡埮c手機(jī)相關(guān)的圖片，放置在合適的位置后，在該圖片上點(diǎn)擊鼠標(biāo)右鍵，從彈出菜單中選擇“插入切片”項(xiàng)。同樣的，在第3和第4幀中也分別導(dǎo)入一張用于與“攝像機(jī)”和“隨身聽”按鈕進(jìn)行交互的圖像，然后都為圖像建立導(dǎo)出切片。如圖03。

　　

　　圖03

　　　　點(diǎn)選“手機(jī)”按鈕的切片，然后用鼠標(biāo)左鍵按住該切片中間的圓形控制圖示不放，拖拽鼠標(biāo)到與其進(jìn)行圖像交換的切片上，這時(shí)在這兩個(gè)切片之間會(huì)出現(xiàn)一條藍(lán)色的鏈接曲線，如圖04。

　　

　　圖04

　　
　　松開鼠標(biāo)后會(huì)立即彈出一個(gè)“交換圖像”的設(shè)置窗口，在下拉菜單上選擇與“手機(jī)”按鈕切片進(jìn)行交換的圖像所在的幀。在這里我們選擇“幀2”。如圖05。

　　

　　圖05

　　
　　用相同的方法繼續(xù)為“攝像機(jī)”和“隨身聽”按鈕在“交換圖像”對(duì)話框中建立各自的圖像切片鏈接。完成后我們就可以按F12鍵在瀏覽器中查看了。怎么樣，效果還不錯(cuò)吧！如圖06。

　　

　　圖06

　　最后通過“文件—導(dǎo)出”選項(xiàng)即可將制作的效果保存為網(wǎng)頁格式了。以后隨時(shí)隨地都可以打開來欣賞一番！

最新評(píng)論