中文版ImageReady30實例與操作10

1、第九章 動態(tài)效果設計動 態(tài) 效 果 設 計第九章 動態(tài)效果設計本 章 內 容 GIF動畫 翻轉按鈕 圖像切片 圖像映射 本章小結作為網頁的重要組成部分，GIF動畫、翻轉按鈕的運用越來越廣泛，網絡上幾乎找不到沒有GIF動畫、翻轉按鈕的網頁。而作為先進的網絡圖像切片技術和圖像映射技術，也為制作眩目的網頁提供了靈活的方法。作為專業(yè)的網絡圖像處理軟件，ImageReady 3.0不僅可以優(yōu)化圖像，而且還能夠制作GIF動畫、翻轉按鈕，實施圖像切片、圖像映射等操作，可以說，ImageReady 3.0的技術核心就在于它能夠實現網絡上所需要的各種圖像處理效果。本章我們將重點介紹如何使用ImageReady

2、3.0制作GIF動畫、動態(tài)按鈕，對圖像進行切片以及圖像映射的操作。9.1 GIF動畫動畫是一些表現連續(xù)動作的圖像或者幀被快速播放后而形成的視覺效果。由于每一幀畫面與前一幀畫面都有一些細微的變化，當播放速度很快時，就會產生運動的幻覺，這時就形成了動畫。在ImageReady 3.0中，圖層是創(chuàng)建GIF動畫的基礎，我們可以把動畫的基本要素放在一個圖層上，然后通過一系列的幀改變圖層的位置與顯示屬性，這樣就可以創(chuàng)建GIF動畫了。9.1.1 【動畫】面板在ImageReady 3.0中，制作GIF動畫需要使用【圖層】面板和【動畫】面板。一般地，需要先在【圖層】面板中的各圖層上制作出動畫的畫面，再在【動畫

3、】面板中設置動畫的幀，然后在每一幀上放置不同的畫面。關于圖層的操作，前面已經講過，這里不再贅述。下面認識一下【動畫】面板，【動畫】面板主要用于設置動畫的幀，單擊菜單欄中的【窗口】/【顯示動畫】命令，就會打開【動畫】面板，如圖9.1所示。幀延遲時間幀顯示區(qū)按鈕控制區(qū)圖9.1 【動畫】面板 【幀顯示區(qū)】：用于顯示每一幀中的圖像。 【幀延遲時間】：用于設置每一幀圖像的停留時間。 【按鈕控制區(qū)】：用于控制動畫的設置與播放。各按鈕的功能如圖9.2所示。到第一幀停止動畫新建幀向前一幀向后一幀播放動畫設置漸變動畫刪除幀循環(huán)選項圖9.2 按鈕控制區(qū) 循環(huán)選項：用于設置動畫重復播放的次數，選擇【一次】時，只播放

4、一次，選擇【一直有效】時，則循環(huán)播放。 到第一幀：單擊該按鈕，播放頭跳到動畫的第一幀上。 向后一幀：單擊該按鈕，播放頭向后移動一幀。 停止動畫：單擊該按鈕，則動畫停止播放。 播放動畫：單擊該按鈕，則播放動畫。 向前一幀：單擊該按鈕，播放頭向前移動一幀。 設置漸變動畫：該按鈕用于設置漸變過渡動畫。 新建幀：單擊該按鈕，可以新建動畫幀。圖9.3 【動畫調板選項】對話框 刪除幀：單擊該按鈕，則刪除所選的幀?！緞赢嫛棵姘逯饕糜趧?chuàng)建、查看及設置動畫。在【動畫】面板中，可以自由選擇幀縮略圖的大小，具體操作步驟如下：1) 單擊面板右上角的按鈕，在彈出的面板菜單中選擇【調板選項】命令，則彈出【動畫調板選項】

5、對話框，如圖9.3所示。2) 在對話框中選擇所需的幀縮略圖。3) 單擊按鈕，則【動畫】面板中的幀縮略圖發(fā)生了變化。9.1.2 添加與刪除幀添加與刪除幀是動畫制作過程中使用最頻繁的操作。下面我們分別介紹如何在【動畫】面板中添加與刪除幀。1添加幀添加幀是創(chuàng)建動畫的第一步。在ImageReady 3.0中，如果已經打開了一幅圖像，則圖像將作為新動畫的第一幀顯示在【動畫】面板中，添加幀時，新添加的幀將復制它前一幀的內容，這時，結合【圖層】面板修改幀的內容即可產生動畫。向動畫中添加幀的操作步驟如下：1) 在【動畫】面板中，選擇添加幀的位置。2) 單擊按鈕，或單擊面板菜單中的【新建幀】命令，則向【動畫】面

6、板中添加了幀，新添加的幀是前一個幀的副本。2刪除幀一般情況下，制作完動畫以后，都要檢查一下動畫中是否含有多余的幀，如果有的話，一定要刪除它們。刪除幀的步驟如下：1) 在【動畫】面板中，選擇要刪除的幀。2) 單擊面板下方的按鈕，則彈出一個信息提示框，系統(tǒng)詢問是否要刪除所選的幀，如圖9.4所示。3) 單擊按鈕，則可以刪除所選幀。選擇要刪除的幀后，直接將其拖動到按鈕上，或單擊面板菜單中的【刪除幀】命令，也可刪除所選幀，但此時并不出現信息提示框。4) 如果要刪除整個動畫，則單擊【動畫】面板菜單中的【刪除動畫】命令，這時系統(tǒng)將詢問是否要刪除所有的幀，如圖9.5所示。單擊按鈕，則可以刪除整個動畫。 圖9.

7、4 信息提示框 圖9.5 信息提示框9.1.3 編輯幀編輯幀的過程實質上就是設置動畫的過程，在ImageReady 3.0中編輯幀包括：幀的選擇、復制、反轉、重新排序等操作，下面我們分別進行介紹。1選擇幀在對幀進行操作之前必須選擇幀，所有的操作只對選擇的幀生效。選擇了幀以后，幀中的內容將顯示在圖像窗口中。選擇幀的方法有以下幾種： 在【動畫】面板中，單擊某一幀的縮略圖，則選擇了該幀。 在【動畫】面板或【圖層】面板中，單擊按鈕，則選擇了當前幀后面的一幀；單擊按鈕，則選擇了當前幀前面的一幀；單擊按鈕，則選擇動畫的第一幀。 在【動畫】面板中，按住Shift鍵的同時單擊第一幀和最后一幀，可以選擇多個連續(xù)

8、的幀；按住Ctrl鍵的同時單擊不同的幀，可選擇多個不連續(xù)的幀。 單擊【動畫】面板菜單中的【選擇全部幀】命令，可選擇動畫的所有幀。如果要取消所選的多個幀中的某一個幀，可以在所選幀中，按住Ctrl鍵的同時單擊要取消選擇的幀即可。選擇了多個幀時，只有當前幀的內容顯示在圖像窗口中。在【動畫】面板中，當前幀的周圍顯示有狹細的邊框，所選擇的幀將以高亮度顯示，如圖9.6所示。所選擇的幀當前幀圖9.6 所選擇的幀 2復制和粘貼幀幀與圖層有著密切的聯系，可以把幀認為是一個具有圖層屬性的圖像副本。復制幀時，就是復制圖層的屬性（包括圖層的可見性、位置、效果和其它屬性），通常情況下，粘貼幀時只是向目標幀中粘帖了這些圖

9、層屬性，并不產生新的圖層。復制與粘貼幀的步驟如下：1) 在【動畫】面板中，選擇要復制的一個或多個幀。圖9.7 【粘貼幀】對話框2) 單擊面板菜單中的【拷貝幀】命令，復制選擇的幀。3) 在【動畫】面板中選擇要粘貼幀的位置。4) 單擊面板菜單中的【粘貼幀】命令，則彈出【粘貼幀】對話框，如圖9.7所示。 【替換幀】：選擇該項，則復制的幀將覆蓋掉所選擇的幀。 【在選區(qū)之上粘貼】：選擇該項，則復制的幀將作為新的圖層添加在圖像中。 【在選區(qū)前粘貼】：選擇該項，則復制的幀將粘貼到所選擇的幀之前。 【在選區(qū)后粘貼】：選擇該項，則復制的幀將粘貼到所選擇的幀之后。5) 在對話框中選擇要進行粘貼的方法。6) 單擊按

10、鈕，則可以復制幀。3重新排列幀幀的排列順序直接影響到動畫的效果，在制作動畫的過程中，我們可以根據需要重新排列幀的位置。重新排列幀的步驟如下：1) 在【動畫】面板中，選擇要改變位置的幀。2) 用鼠標拖曳所選擇的幀到目標位置，釋放鼠標，即可改變幀的排列順序。如果拖曳多個不連續(xù)的幀，則幀在新的位置將變?yōu)檫B續(xù)的幀。4反向幀反向幀是制作GIF動畫的一項常用技術，主要用來顛倒動畫的播放效果，如一個由小變大的動畫，反向幀以后，就可以變成一個由大變小的動畫。反向幀的操作步驟如下：1) 選擇要進行反向的幀（必須是連續(xù)的）。2) 單擊【動畫】面板菜單中的【反向幀】命令，則所選擇的連續(xù)的幀即可反轉方向。9.1.4

11、設置幀延遲時間設置幀延遲是創(chuàng)建動畫的一個重要過程，所謂幀延遲是指在播放動畫時每一個幀的停留時間。幀延遲時間以秒為單位，可以保留兩位小數，例如，可以設置幀延遲時間為0.1、0.25秒等。設置幀延遲的具體步驟如下：圖9.8 幀延遲時間菜單1) 在【動畫】面板中，選擇要設置延遲時間的幀。2) 單擊該幀縮略圖右下角的幀延遲時間設置按鈕，則彈出幀延遲時間菜單，如圖9.8所示。3) 在菜單中選擇所需的幀延遲時間，則該時間將顯示在幀縮略圖的底部。4) 如果需要定義幀延遲時間，可以選擇【其它】選項，在彈出的【設置幀延遲】對話框中輸入幀延遲時間，單擊按鈕即可，如圖9.9所示。圖9.9 【設置幀延遲】對話框為動畫

12、中的幀設置幀延遲時間時，如果同時選擇了多個幀，則為一個幀指定幀延遲時間后，其它所選擇的幀也將具有相同的幀延遲時間。在ImageReady 3.0中預覽動畫時，幀延遲時間與動畫的播放時間可能不一致，要得到精確的預覽效果，可以在瀏覽器中預覽動畫。9.1.5 設置動畫循環(huán)在【動畫】面板中，通過設置循環(huán)選項可以控制動畫的循環(huán)播放次數。設置循環(huán)動畫的具體步驟如下：1) 單擊【動畫】面板左下角的【循環(huán)選項】按鈕，則彈出一個下拉菜單，如圖9.10所示。圖9.10 【循環(huán)選項】菜單圖9.11 【設置循環(huán)計數】對話框2) 從下拉菜單中選擇所需的循環(huán)選項：選擇【一次】選項，動畫只播放一次；選擇【一直有效】選項，則

13、動畫循環(huán)播放；選擇【其它】選項，則彈出一個【設置循環(huán)計數】對話框，用于設置動畫循環(huán)的次數，如圖9.11所示。3) 在【播放】文本框中輸入所需的循環(huán)播放次數。4) 單擊按鈕，則動畫將按設定的循環(huán)次數進行播放。9.1.6 實例練習一個簡單的GIF動畫在網頁中使用GIF動畫已經司空見慣了，幾乎每一個網頁中都有，前面，我們已經介紹了一些GIF動畫的制作技術，本節(jié)中，將通過下面制作的GIF動畫，使讀者掌握制作動畫的基本原理。¹制作網頁動畫1) 單擊菜單欄中的【文件】/【打開】命令，打開一幅名稱為back的圖像文件，如圖9.12所示。圖9.12 打開文件2) 設置前景色為黃色，選擇工具箱中的工具

14、，用前面所講的方法，向圖像中輸入文字“乘方工作室”，結果如圖9.13所示。 圖9.13 輸入文字3) 在【圖層】面板中，單擊按鈕，建立一個新圖層【圖層 1】。4) 確?！緢D層 1】層處于被選擇狀態(tài)，按住Ctrl 鍵的同時單擊【乘方工作室】層，則在【圖層 1】上建立了文字的選擇區(qū)域。5) 單擊菜單欄中的【選擇】/【羽化】命令，在彈出的【羽化選區(qū)】對話框中設置參數如圖9.14所示。圖9.14 【羽化選區(qū)】對話框6) 單擊按鈕，羽化選擇區(qū)域。7) 設置前景色為紅色，按下Alt+Delete鍵，將選擇區(qū)域填充為紅色。8) 用同樣的方法，再建立【圖層 2】層、【圖層 3】層，并分別填充為綠色和藍色。9)

15、 在【圖層】面板中，調整各圖層的順序如圖9.15所示。10) 在【動畫】面板中，只有一個幀【1】，連續(xù)單擊兩次按鈕，分別建立幀【2】和幀【3】。11) 選擇幀【1】，在【圖層】面板中隱藏【圖層 2】層和【圖層 3】層，如圖9.16所示。 圖9.15 調整圖層順序 圖9.16 【圖層】面板12) 選擇幀【2】，在【圖層】面板中隱藏【圖層 1】層和【圖層 3】層，如圖9.17所示。13) 選擇幀【3】，在【圖層】面板中隱藏【圖層 1】層和【圖層 2】層，如圖9.18所示。 圖9.17 【圖層】面板 圖9.18 【圖層】面板14) 在【動畫】面板中，設置各幀的幀延遲時間為0.2秒，如圖9.19所示。

16、圖9.19 【動畫】面板15) 單擊【動畫】面板中的按鈕，可以預覽到動畫的效果。9.1.7 設置過渡幀使用【過渡】命令可以在兩個具有不同圖層屬性的幀之間建立一種均勻的過渡效果，從而創(chuàng)建出平滑的漸變動畫。例如，要創(chuàng)建一個淡入淡出的動畫，可以設置開始幀中的圖層不透明度為100%，然后在新的幀中設置圖層的不透明度為0%，這樣，使用【過渡】命令就可以在兩個幀之間創(chuàng)建一個逐漸過渡到透明的動畫。設置過渡幀的步驟如下：1) 選擇一個幀或多個連續(xù)幀。如果選擇了一個幀，則既可以與前一幀產生過渡漸變，也可以與后一幀產生過渡漸變；如果選擇了兩個連續(xù)的幀，則過渡幀添加在兩幀之間；如果選擇了連續(xù)的多個幀，則在第一幀與最

17、后一幀之間存在的幀將被過渡幀所取代。注意，不連續(xù)的幀之間不能產生過渡。2) 【動畫】面板中，單擊按鈕或單擊面板菜單中的【過渡】命令，則彈出【過渡】對話框，如圖9.20所示。圖9.20 【過渡】對話框3) 在【過渡】對話框中設置所需要的參數。4) 單擊按鈕，則添加了漸變幀。在【過渡】對話框中，各參數的作用如下： 【圖層】：用于指定要改變的圖層。選擇【所有圖層】選項，則所有的圖層都發(fā)生變化；選擇【選中的圖層】選項，則只有被選擇幀中圖層發(fā)生變化。 【參數】：用于指定發(fā)生漸變的圖層屬性。選擇【位置】復選框，則圖層中圖像的位置發(fā)生過渡；選擇【不透明度】復選框，則圖層的不透明度發(fā)生過渡；選擇【效果】復選框

18、，則圖層的效果發(fā)生過渡。 【過渡】：用于設置幀之間的過渡。選擇【下一幀】選項， 則與下一幀之間產生過渡幀；選擇【第一幀】選項，則與第一幀之間產生過渡幀；選擇【上一幀】選項，則與前一幀之間產生過渡幀；選擇【最后一幀】選項，則與最后一幀之間產生過渡幀。 【添加幀】：該選項用于設置兩幀之間的過渡幀數，設置該項的值后，【動畫】面板中的幀畫面數將增加相應的畫面幀數。9.1.8 優(yōu)化動畫優(yōu)化動畫與優(yōu)化靜態(tài)圖像一樣，但是ImageReady 3.0中的動畫必須優(yōu)化成GIF格式，因為只有GIF格式的圖像才支持動畫功能。如果將動畫優(yōu)化成JPEG格式，那么最終的網頁上只能顯示出動畫的第一幀內容。優(yōu)化GIF動畫時，

19、ImageReady 3.0應用了專門的抖動算法，以確保抖動圖案在所有幀中保持一致，并防止在播放期間出現閃爍。由于這些附加優(yōu)化選項，使得ImageReady 3.0優(yōu)化GIF動畫時要比優(yōu)化靜態(tài)的GIF圖像需要更長的時間。優(yōu)化動畫的具體步驟如下：1) 單擊【動畫】面板菜單中的【優(yōu)化動畫】命令，則彈出【優(yōu)化動畫】對話框，如圖9.21所示。圖9.21 【優(yōu)化動畫】對話框2) 在對話框中進行選項設置。 選擇【定界框】復選框，則修剪前面已經改變的每一幀，使用這個選項創(chuàng)建的動畫文件比較小。 選擇【刪除冗余像素】復選框，則前面的幀中未轉換的像素變?yōu)橥该?，它是默認選項。應該注意的是，要使該項有效，則【優(yōu)化】面

20、板中的【透明區(qū)域】選項必須處于被選擇狀態(tài)。3) 單擊按鈕，確定該優(yōu)化選項。4) 在【優(yōu)化】面板中，對圖像進行其它選項的優(yōu)化。9.1.9 將動畫保存為QuickTime影片制作完的GIF動畫可以保存為QuickTime影片，這樣，保存后的文件就可以使用QuickTime播放器來播放，還可以在其它支持QuickTime影片格式的應用程序中打開該動畫。將動畫保存為QuickTime影片的步驟如下：1) 單擊菜單欄中的【文件】/【輸出原稿】命令，則彈出【輸出原稿】對話框，如圖9.22所示。2) 從【保存類型】下拉列表中選擇保存類型為“QuickTime影片”。注意：在Windows中，QuickTim

21、e影片格式只有當計算機中安裝了QuickTime時才可見。圖9.22 【輸出原稿】對話框3) 在【文件名】選項中輸入文件名稱。4) 在【保存在】下拉列表中選擇文件的保存位置。5) 單擊按鈕，則彈出【Compression Settings】對話框，如圖9.23所示。6) 根據需要，在【Compression Settings】對話框中進行壓縮設置。7) 單擊按鈕后，則將動畫保存為QuickTime影片。這時，使用QuickTime 播放器就可以播放動畫了，如圖9.24所示。 圖9.23 【Compression Settings】對話框 圖9.24 動畫播放界面9.1.10 實例練習漸變效果的

22、GIF動畫制作動畫是ImageReady 3.0的一項重要功能，它不但能制作出移動、旋轉、縮放等動畫，而且能夠完成淡入淡出、效果漸變等動畫，前面系統(tǒng)介紹了GIF動畫的制作、優(yōu)化等知識，下面我們制作一個漸變效果的GIF動畫。¹制作漸變動畫1) 將前景色、背景色設置為系統(tǒng)缺省色。2) 單擊菜單欄中的【文件】/【新建】命令，在彈出的【新文檔】對話框中設置各項參數，如圖9.25所示。圖9.25 【新文檔】對話框3) 單擊按鈕，建立一個新文件。4) 單擊【圖層】面板中的按鈕，建立一個新圖層【圖層 1】。圖9.26 選擇樣式5) 按下Alt+Delete鍵，將其填充為前景色，然后在【樣式】面板中

23、單擊如圖9.26所示樣式，對【圖層 1】圖層應用樣式。6) 單擊菜單欄中的【圖層】/【拼合圖層】命令，合并所有的圖層。7) 設置前景色為綠色，選擇工具箱中的工具，設置工具選項欄中的參數如圖9.27所示。圖9.27 文字工具選項欄8) 在圖像中單擊鼠標，輸入文字“IMAGEREADY”，結果如圖9.28所示。9) 在【圖層】面板中，用鼠標按住【IMAGEREADY】層向下拖動至按鈕上，復制一個圖層【IMAGEREADY 副本】。圖9.28 輸入文字圖9.29 【徑向模糊】對話框10) 單擊菜單欄中的【圖層】/【柵格化】/【文本】命令，將復制的圖層轉換為普通圖層。11) 單擊菜單欄中的【濾鏡】/【

24、模糊】/【徑向模糊】命令，在彈出的【徑向模糊】對話框中設置各項參數如圖9.29所示。12) 單擊按鈕，圖像效果如圖9.30所示。13) 在【動畫】面板中，只有一個幀【1】，單擊按鈕，再建立一個幀【2】。圖9.30 圖像效果14) 選擇幀【1】，在【圖層】面板中隱藏【IMAGEREADY 副本】層，如圖9.31所示。15) 選擇幀【2】，在【圖層】面板中隱藏【IMAGEREADY】層，如圖9.32所示。16) 在【動畫】面板中，設置幀【1】和幀【2】的幀延遲時間為0.1秒，如圖9.33所示。 圖9.31 【圖層】面板 圖9.32 【圖層】面板圖9.33 設置幀延遲時間17) 選擇幀【1】，單擊【

25、動畫】面板中的按鈕，在彈出的【過渡】對話框中設置各參數如圖9.34所示。圖9.34 【過渡】對話框18) 單擊按鈕，則創(chuàng)建了一個漸變動畫，這時【動畫】面板如圖9.35所示。圖9.35 【動畫】面板19) 單擊【動畫】面板中的按鈕，可以預覽到動畫的效果。9.2 翻轉按鈕所謂翻轉按鈕，是一種具有幾種狀態(tài)的網頁按鈕，即正常時顯示一種狀態(tài)；當光標指向按鈕時顯示一種狀態(tài)；按下按鈕時顯示一種狀態(tài)；按下按鈕后再釋放按鈕又會顯示另一種狀態(tài)。將【翻轉】面板與【圖層】面板結合使用，可以創(chuàng)建豐富多彩的翻轉按鈕，甚至還可以將圖像、動畫作為翻轉狀態(tài)。創(chuàng)建了翻轉按鈕后，ImageReady將以JavaScript代碼的形

26、式將其添加到HTML文件中。9.2.1 【翻轉】面板使用【翻轉】面板可以創(chuàng)建并設置翻轉按鈕的各種狀態(tài)。在【翻轉】面板中顯示了翻轉按鈕各種狀態(tài)的縮略圖，通常情況下，面板中的第一個縮略圖為【正?！繝顟B(tài)。單擊菜單欄中的【窗口】/【顯示翻轉】命令，將打開【翻轉】面板，如圖9.36所示。新建狀態(tài)狀態(tài)顯示列表選擇切片或映射刪除狀態(tài)預覽按鈕 圖9.36 【翻轉】面板 【狀態(tài)顯示列表】：用于顯示翻轉按鈕的各種狀態(tài)。圖9.37 狀態(tài)名稱菜單 【選擇切片或映射】：單擊該按鈕，可以打開一個下拉菜單，選擇切片或圖像映射。 【新建狀態(tài)】：用于新建一個按鈕狀態(tài)，新建的狀態(tài)為前一個狀態(tài)的副本，同時系統(tǒng)自動為狀態(tài)命名，但是用

27、戶可以重新修改狀態(tài)的名稱，單擊名稱右側的按鈕，可以打開一個菜單，從中可以選擇所需的狀態(tài)名稱，如圖9.37所示?！綩ver】：用于定義鼠標指向按鈕時的翻轉狀態(tài)?！綝own】：用于定義按下鼠標左鍵時的翻轉狀態(tài)?！綜lick】：用于定義單擊鼠標時的翻轉狀態(tài)?！綩ut】：用于定義鼠標離開按鈕時的翻轉狀態(tài)?！綰p】：用于定義按下鼠標左鍵之后，再釋放鼠標時的翻轉狀態(tài)?！咀远顟B(tài)】：用于定義一個新的翻轉狀態(tài)（必須創(chuàng)建該狀態(tài)的JavaScript代碼，并添加至網頁的HTML文件中，才能實現自定義翻轉狀態(tài)）。【無】：用于保護圖像的當前狀態(tài)（該狀態(tài)將不出現在網頁中）。 【刪除狀態(tài)】：用于刪除所選的狀態(tài)。 【預覽按

28、鈕】：單擊該按鈕，可以在圖像窗口中直接預覽翻轉按鈕的效果。9.2.2 創(chuàng)建與刪除翻轉狀態(tài)創(chuàng)建與刪除翻轉狀態(tài)是制作翻轉按鈕的基本操作之一，下面我們分別學習這兩種操作方法。1創(chuàng)建翻轉狀態(tài)正常情況下，在【翻轉】面板中只有一個狀態(tài)，即【正?！繝顟B(tài)。制作翻轉按鈕時必須創(chuàng)建翻轉狀態(tài)。創(chuàng)建翻轉狀態(tài)的步驟如下：1) 選擇要添加翻轉效果的切片或圖像映射。2) 在【翻轉】面板中，單擊面板底部的按鈕，或單擊【翻轉】面板菜單中的【新建狀態(tài)】命令，即可創(chuàng)建一個新的狀態(tài)。新的翻轉狀態(tài)與它前面的狀態(tài)是一樣的，除非使用【圖層】面板對圖像進行修改。3) 可以使用ImageReady指定的默認翻轉狀態(tài)，也可以單擊名稱右側的按鈕，

29、在彈出的下拉菜單中可以選擇一個新的翻轉狀態(tài)。4) 在【圖層】面板中修改翻轉狀態(tài)的圖像即可。2刪除翻轉狀態(tài)刪除翻轉狀態(tài)的步驟如下：圖9.38 刪除對話框1) 選擇要刪除的翻轉狀態(tài)，單擊【翻轉】面板下方的按鈕，或者單擊面板菜單中的【刪除狀態(tài)】命令，則彈出一個對話框，如圖9.38所示。2) 單擊按鈕，則刪除所選狀態(tài)。3) 若要刪除所有的翻轉狀態(tài)，則單擊面板菜單中的【刪除翻轉】命令，此時也將彈出一個信息提示框，與圖9.38相似。9.2.3 復制和粘貼翻轉狀態(tài)在ImageReady 3.0中，可以對翻轉狀態(tài)進行復制與粘貼。復制和粘貼翻轉狀態(tài)的步驟如下：1) 選擇一個翻轉狀態(tài)，單擊【翻轉】面板菜單中的【拷

30、貝翻轉狀態(tài)】命令。2) 在【翻轉】面板中，選擇要粘貼翻轉狀態(tài)的位置。3) 單擊【翻轉】面板菜單中的【粘貼翻轉狀態(tài)】命令即可。9.2.4 應用翻轉樣式圖9.39 【樣式】面板翻轉樣式含有翻轉的所有屬性，包括它的狀態(tài)和圖層效果，當向圖層應用了翻轉樣式后，則產生一個基于圖層的圖像切片。向圖層應用翻轉樣式的步驟如下：1) 在【圖層】面板中選擇要應用翻轉樣式的圖層。2) 單擊菜單欄中的【窗口】/【顯示樣式】命令，打開【樣式】面板。3) 單擊【樣式】面板中的翻轉樣式即可（翻轉樣式的左上角有一個三角形標記），如圖9.39所示。9.2.5 向翻轉狀態(tài)中添加動畫在ImageReady 3.0中可以非常容易地創(chuàng)建

31、具有動畫效果的翻轉按鈕，基本操作步驟如下：1) 在【翻轉】面板中創(chuàng)建一個新的翻轉狀態(tài)，也可以直接選擇一個用于觸發(fā)動畫的翻轉狀態(tài)。2) 在【動畫】面板中，為動畫創(chuàng)建幀，并設置動畫效果。如果將動畫添加在翻轉按鈕的【正?！繝顟B(tài)中，那么，當圖像載入到Web瀏覽器中時，將自動播放動畫。9.2.6 實例練習制作一個翻轉按鈕使用翻轉按鈕是增強網頁動態(tài)效果的有效手段，前面我們講述了翻轉按鈕的工作原理與制作方法，下面，制作一個簡單的翻轉按鈕。¹制作翻轉按鈕1) 單擊菜單欄中的【文件】/【新建】命令，建立一個新文件。2) 選擇工具箱中的工具，在圖像中拖曳鼠標，畫一個圓角矩形，如圖9.40所示。3) 在【

32、樣式】面板中，單擊面板菜單中的【按鈕】命令，載入按鈕樣式，然后單擊如圖9.41所示的樣式，則圖像效果如圖9.42所示。4) 選擇工具箱中的工具，該其工具選項欄的參數，在圖像中單擊鼠標，輸入文字“網事悠悠”，結果如圖9.43所示。 圖9.40 繪制圓角矩形 圖9.41 【樣式】面板 圖9.42 圖像效果 圖9.43 輸入文字5) 在【圖層】面板中，將【圖層 1】層復制兩次，得到【圖層1 副本】和【圖層 1 副本2】層，如圖9.44所示。6) 在【圖層】面板中，單擊【圖層 1 副本】層和【圖層 1 副本2】層前的標志，隱藏這兩個圖層中的圖像。7) 單擊【翻轉】面板中的按鈕，則產生一個【Over】狀

33、態(tài)，如圖9.45所示。 圖9.44 【圖層】面板 圖9.45 創(chuàng)建Over狀態(tài)8) 在【圖層】面板中，隱藏【圖層 1】層和【圖層 1 副本2】層，顯示【圖層 1 副本】層，并確?！緢D層 1 副本】層為當前圖層，接著在【樣式】面板中單擊如圖9.46所示的樣式。9) 再單擊【翻轉】面板中的按鈕，則產生一個【Down】狀態(tài)，如圖9.47所示。 圖9.46 選擇樣式 圖9.47 創(chuàng)建Down狀態(tài)10) 在【圖層】面板中，隱藏【圖層 1】層和【圖層 1 副本】層，顯示【圖層 1 副本 2】層，并確?！緢D層 1 副本 2】層為當前圖層，接著單擊如圖9.48所示的樣式。11) 單擊工具箱中的按鈕，可以在IE

34、瀏覽器中預覽到翻轉按鈕的效果。如圖9.49所示是按鈕的三種狀態(tài)。 圖9.48 選擇樣式 圖9.49 按鈕的三種狀態(tài)9.3 圖 像 切 片當網頁中放置了一幅較大的圖片時，網頁的下載時間就比較長。為了加快網頁的下載速度，可以把大圖片分成若干個小圖片，然后再將這些小圖片重新組合成一體，這就是所謂的切片技術，利用ImageReady 3.0提供的切片工具，我們可以很輕松地對圖像實施切片。由用戶使用切片工具創(chuàng)建的切片稱為用戶切片；由系統(tǒng)自動生成的切片稱為自動切片，如圖9.50所示。用戶切片以高亮狀態(tài)顯示，自動切片像蒙上了一層半透明的薄膜。當建立了圖像切片以后，還可以為不同的切片建立超鏈接。用戶切片自動切

35、片圖9.50 圖像切片9.3.1 切片工具組圖9.51 切片工具組切片工具組主要用于建立、編輯圖像切片，其中，切片工具用于建立圖像切片，切片選擇工具用于選擇圖像切片，如圖9.51所示。1切片工具的使用切片工具用于創(chuàng)建圖像切片，具體使用步驟如下：1) 單擊工具箱中的工具，選擇該工具。2) 將光標移動到圖像窗口中，則光標變?yōu)闋睢?) 按下鼠標左鍵，拖曳鼠標即可將圖像進行切片。按下Shift鍵的同時在圖像中拖曳鼠標，可創(chuàng)建正方形的切片。按下Alt鍵的同時在圖像中拖曳鼠標，則以鼠標的落點為中心創(chuàng)建切片。2設置切片區(qū)域的風格使用切片工具創(chuàng)建切片時，可以使用不同風格的創(chuàng)建方式。在工具選項欄中，單擊【樣式】

36、選項后的按鈕，打開下拉列表，可以從中選擇所需的風格，如圖9.52所示。圖9.52 不同的切片風格 【正?！浚哼x擇該選項，則可以任意拖曳鼠標來創(chuàng)建切片。 【約束長寬比】：選擇該選項，在寬度、高度文本框中輸入寬度、高度的比例數，則在圖像窗口中拖曳鼠標，將按照設定的比例創(chuàng)建切片。 【固定大小】：選擇該選項，在寬度、高度中分別輸入切片的寬度與高度值后，只需在圖像窗口中單擊鼠標，即可建立指定大小的切片。3切片選擇工具的使用切片選擇工具主要用于選擇切片，選擇切片的方法如下： 用鼠標單擊某一個切片，可以選擇該切片，同時被選擇的切片周圍出現邊框。 按住Shift鍵的同時單擊不同的切片，可以選擇多個切片。按住C

37、trl鍵，可以在切片工具和切片選擇工具之間互相轉換。9.3.2 【切片】面板【切片】面板主要用于為切片命名、建立超鏈接等操作。單擊菜單欄中的【窗口】/【顯示切片】命令，打開【切片】面板，如圖9.53所示。圖9.53 【切片】面板面板左側顯示的是所選切片及切片文件的大小，右側用于為切片命名、建立超鏈接等操作。 【類型】：用于選擇切片的類型，如圖像類型。 【名稱】：用于顯示被選擇切片的名稱，通過輸入新的名稱，可以為切片重新命名。 【URL】：用于輸入切片對應的超鏈接地址。 【Target】（目標）：用于設置鏈接的目標網頁在哪個窗口中被打開，共有四個選項，分別是：_blank表示在新窗口中打開鏈接的

38、網頁；_self表示在當前文檔的框架中打開鏈接的網頁；_parent表示在當前文檔的父級框架集中打開鏈接的網頁；_top表示在鏈接所在的完整窗口中打開鏈接的網頁。 【信息】：用于輸入在瀏覽器狀態(tài)欄上顯示的文本。 【Alt】（替換）：用于輸入切片的替換文字。 【尺寸】：該選項用于精確指定切片的大小與位置。當選擇了【約束比例】復選框時，可以保持切片的尺寸比例。9.3.3 創(chuàng)建用戶切片在ImageReady 3.0中，可以使用切片工具創(chuàng)建用戶切片，也可以基于選擇區(qū)域或參考線創(chuàng)建用戶切片，使用切片工具創(chuàng)建切片的方法，請參考9.3.1節(jié)中“切片工具的使用”的相關內容，下面我們介紹通過選擇區(qū)域或參考線創(chuàng)建

39、用戶切片的方法。通過選擇區(qū)域創(chuàng)建切片的步驟如下：1) 在圖像窗口中建立選擇區(qū)域。2) 單擊菜單欄中的【切片】/【從選區(qū)中創(chuàng)建切片】命令，即可將選擇區(qū)域創(chuàng)建為用戶切片。在ImageReady 3.0中，基于選擇區(qū)域創(chuàng)建用戶切片時，如果選擇區(qū)域被羽化，則切片將覆蓋整個選擇區(qū)域（包括羽化邊緣）。如果選擇區(qū)域是非矩形，則切片j 一個足夠覆蓋整個選擇區(qū)域的矩形。通過參考線創(chuàng)建切片的步驟如下：1) 在圖像中創(chuàng)建參考線。2) 單擊菜單欄中的【切片】/【從參考線創(chuàng)建切片】命令，則參考線分隔的圖像部分即形成用戶切片。使用參考線創(chuàng)建切片時，原先存在的切片將被刪除。9.3.4 編輯切片在ImageReady 3.0

40、中，對切片的操作命令主要集中在【切片】菜單中，編輯切片的主要內容包括存儲與載入切片選區(qū)、復制與粘貼切片，對齊和排列切片等操作。1存儲與載入切片選區(qū)當選擇了切片以后，為了使切片能夠被反復使用，可以存儲切片選區(qū)，也可清除切片選區(qū)，這樣可以保證快速、準確地選擇指定的切片。存儲切片選區(qū)的步驟如下：1) 選擇要存儲的一個或多個切片。2) 單擊菜單欄中的【切片】/【存儲切片選區(qū)】命令，則彈出一個【存儲切片選區(qū)】對話框，如圖9.54所示。圖9.54 【存儲切片選區(qū)】對話框3) 在【選區(qū)名稱】文本框中輸入名稱。4) 單擊按鈕，則可以存儲切片選區(qū)。存儲了切片選區(qū)之后，在任何需要的時候，都可以隨時將切片選區(qū)重新載

41、入，具體步驟如下：1) 單擊菜單欄中的【切片】/【載入切片選區(qū)】命令，則彈出子菜單，如圖9.55所示。圖9.55 【載入切片選區(qū)】子菜單2) 在子菜單中選擇所需的切片選區(qū)名稱，即可載入所選切片選區(qū)。刪除切片選區(qū)的方法如下：單擊菜單欄中的【切片】/【刪除切片選區(qū)】命令，在彈出的子菜單中選擇要刪除的切片選區(qū)名稱，即可將其刪除。刪除切片選區(qū)并不是刪除切片本身，而是將存儲的切片選區(qū)清除掉。2復制與粘貼切片在ImageReady 3.0中，可以在同一圖像中或在不同圖像間復制與粘貼切片。復制和粘貼切片的步驟如下：1) 選擇要復制的一個或多個切片。2) 單擊【切片】面板菜單中的【復制切片】命令。3) 如果要

42、將切片粘貼到另一個圖像中，則打開該圖像。4) 單擊【切片】面板菜單中的【粘貼切片】命令即可。如果在同一個圖像中粘貼切片，則粘貼的切片將出現在原切片的上方。3對齊與分布用戶切片圖9.56 對齊子菜單在ImageReady 3.0中，對齊與分布用戶切片可以去除多余的自動切片，并產生一個較小的、更有效率的HTML文件。對齊用戶切片的步驟如下：1) 選擇工具箱中的工具，按住Shift鍵的同時單擊要對齊的用戶切片，將它們選中。2) 單擊菜單欄中的【切片】/【對齊】命令，在彈出的子菜單中選擇所需的命令，即可對齊用戶切片，如圖9.56所示。另外，通過單擊切片選擇工具選項欄中的對齊按鈕，可以快速對齊用戶切片。

43、工具選項欄中的對齊按鈕分別是：頂邊對齊、垂直居中對齊、底邊對齊、左邊對齊、水平居中對齊和右邊對齊，如圖9.57所示。圖9.58 分布子菜單 圖9.57 切片選擇工具選項欄分布用戶切片的操作步驟如下：1) 選擇要分布的用戶切片。2) 單擊菜單欄中的【切片】/【分布】命令，在彈出的子菜單中選擇所需的命令，即可分布用戶切片，如圖9.58所示。通過單擊切片選擇工具選項欄中的分布按鈕，也可以實現用戶切片的分布。工具選項欄中的分布按鈕為：頂邊分布、垂直居中分布、底邊分布、左邊分布、水平居中分布和右邊分布，如圖9.57所示。4移動并重設用戶切片的大小創(chuàng)建了用戶切片以后，還可以移動用戶切片的位置并調整其大小。

44、具體步驟如下：1) 用切片選擇工具選擇一個或多個用戶切片。2) 將光標指向切片區(qū)域的內部，拖曳鼠標可以移動切片至新的位置。按住Shift鍵的同時，拖曳鼠標可以限制切片在垂直、水平或45°對角線移動。3) 將光標指向切片四周的邊控制點或角控制點上拖曳，可重新設置切片的大小。9.3.5 實例練習對圖像進行切片前面曾經講過，切片就是把網頁中較大的圖片分解成若干的小圖片，每一個小圖片就稱為一個切片，對圖像實施切片可以加快網頁的下載速度。下面，我們做一個切片練習。¹對圖像切片并建立鏈接1) 單擊菜單欄中的【文件】/【打開】命令，打開一幅圖像文件，如圖9.59所示。2) 單擊工具箱下方

45、的按鈕，將圖像切換到切片工作模式。3) 選擇工具箱中的工具，在圖像窗口中需要切片的部分拖曳鼠標，即產生一個矩形切片，切片周圍出現帶有控制點的實線邊框，如圖9.60所示。4) 單擊菜單欄中的【窗口】/【顯示切片】命令，打開【切片】面板，如圖9.61所示。5) 在【切片】面板的【URL】選項中輸入“”，在【Target】選項中選擇“_blank”，在【信息】選項中輸入“單擊進入乘方網”，在【Alt】選項中輸入替換文本“乘方網”，如圖9.62所示。這樣，我們就將該切片建立了超鏈接。 圖9.59 打開圖像 圖9.60 產生的切片圖9.61 【切片】面板圖9.62 【切片】面板6) 同樣方法，我們可以繼

46、續(xù)對圖像進行切片并建立超鏈接。7) 單擊工具箱中的按鈕，可以在IE中預覽網頁。當光標指向切片時，在瀏覽器的狀態(tài)欄上將出現信息和替換文本，如圖9.63所示。圖9.63 預覽的效果9.4 圖 像 映 射在瀏覽網頁時，經常會遇到這樣的情況：單擊一個圖像的不同區(qū)域，可以跳轉到不同的網頁，這種方式是利用圖像映射建立的超鏈接。圖像映射實際上就是在一幅圖像上創(chuàng)建多個鏈接區(qū)域，通過單擊不同的區(qū)域，可以跳轉至不同的鏈接目標。使用圖像映射和切片創(chuàng)建鏈接的主要區(qū)別在于：使用圖像映射時，輸出的是一個完整的圖像文件；而使用切片時，輸出的是若干個圖像切片。另一個區(qū)別是使用圖像映射可以在圖像中創(chuàng)建圓形、多邊形或矩形的鏈接區(qū)

47、域，而切片只能創(chuàng)建矩形鏈接區(qū)域。相比之下，如果只需要創(chuàng)建矩形鏈接區(qū)域，使用切片比使用圖像映射更具有優(yōu)越性。最好不要在切片中創(chuàng)建包括URL鏈接的圖像映射區(qū)域，因為無論是圖像映射鏈接還是切片鏈接，都可能在某些瀏覽器中被忽略。9.4.1 映射工具組圖9.64 映射工具組映射工具組主要用于建立、編輯圖像映射。映射工具組中有4種映射工具，即矩形圖像映射工具、圓形圖像映射工具、多邊形圖像映射工具和圖像映射選擇工具，如圖9.64所示。矩形圖像映射工具：用于創(chuàng)建矩形圖像映射。圓形圖像映射工具：用于創(chuàng)建圓形圖像映射。多邊圖像形映射工具：用于創(chuàng)建多邊形圖像映射。圖像映射選擇工具：用于選擇和編輯已建立的圖像映射。9

48、.4.2 【圖像映射】面板通過映射工具組中的工具對圖像映射進行操作，不能很精確地定位圖像映射，這時可以使用【圖像映射】面板來實現圖像映射的精確操作，同時還可以為圖像映射建立超鏈接。在【圖像映射】面板中，可以設置圖像映射的名稱、鏈接的URL地址、目標窗口和替換文本等選項。單擊菜單欄中的【窗口】/【顯示圖像映射】命令，將打開【圖像映射】面板，如圖9.65所示。圖9.65 【圖像映射】面板 【尺寸】：用于顯示圖像映射的位置及大小信息（當選擇多邊形圖像映射時沒有該信息顯示）。 【名稱】：用于顯示圖像映射的名稱，該名稱是系統(tǒng)按照圖像映射建立的順序自動設定的，用戶可以重新命名。需要注意的是，如果在同一文檔

49、中使用了多個圖像映射，應保證各圖像映射的名稱是唯一的。 【URL】：用于輸入圖像映射對應的超鏈接地址。 【Target】（目標）：用于設置鏈接的目標文件在哪個窗口中被打開。共有四個選項，分別是：_blank表示在新窗口中打開鏈接的文件，保留原來瀏覽器窗口中已經打開的文件；_self表示在當前文檔的框架中打開鏈接的文件；_parent表示在當前文檔的父級框架集中打開鏈接的文件；_top用鏈接的文件替代瀏覽器窗口，刪除所有的當前框架。 【Alt】（替換）：用于輸入圖像映射的替換文本，即在瀏覽器中，當指向鏈接的圖像映射時將出現的提示性信息。9.4.3 創(chuàng)建與刪除圖像映射1創(chuàng)建圖像映射在ImageRe

50、ady 3.0中，可以使用圖像映射工具或圖層創(chuàng)建圖像映射。選擇映射工具，在圖像中拖曳鼠標可以定義圖像映射，由映射工具創(chuàng)建的圖像映射，可以在【圖像映射】面板中查看并設置選項。使用圖層創(chuàng)建圖像映射時，圖層的內容決定了圖像映射的大小與形狀。當編輯圖層內容時，圖像映射自動更新，用這種方法創(chuàng)建的圖像映射，可以在【圖像映射】面板中查看并設置其選項，但是不能使用【復制】或【對齊】命令。使用映射工具創(chuàng)建圖像映射的步驟如下：1) 選擇工具箱中的工具、工具或工具。2) 對于工具和工具，可以選擇工具選項欄中的【固定大小】復選框，在寬度和高度文本框中輸入相應的值，以指定圖像映射的大小，如圖9.66所示。也可以在圖像中

51、拖曳鼠標可以建立圖像映射。圖9.66 矩形圖像映射工具選項欄3) 如果選擇了工具，則需要在圖像上單擊鼠標左鍵，確定圖像映射的開始點，然后移動鼠標位置并單擊鼠標，可以建立多邊形的圖像映射，如圖9.67所示分別為矩形、圓形、多邊形圖像映射。圖9.67 不同形狀的圖像映射使用圖層創(chuàng)建圖像映射的步驟如下：1) 在【圖層】面板中，選擇要創(chuàng)建圖像映射的圖層，如圖9.68所示。2) 單擊菜單欄中的【圖層】/【基于新建圖層的圖像映射區(qū)域】命令，則產生圖層內容大小的圖像映射，如圖9.69所示。 圖9.68 【圖層】面板 圖9.69 基于圖層建立的圖像映射2刪除圖像映射刪除圖像映射時，可以選擇要刪除的圖像映射，直

52、接按下鍵盤中的Delete鍵或Backspace鍵；也可以單擊【圖像映射】面板菜單中的【刪除圖像映射區(qū)域】命令刪除所選的圖像映射。選擇工具，單擊圖像映射可以選擇該圖像映射，按住Shift鍵的同時單擊圖像映射，可以選擇多個圖像映射。9.4.4 查看圖像映射1顯示或隱藏圖像映射顯示或隱藏圖像映射的方法如下： 反復單擊工具箱底部的按鈕，可以進行顯示或隱藏圖像映射切換。 反復單擊菜單欄中的【視圖】/【顯示】/【圖片】命令，也可以顯示或隱藏圖像映射。 單擊菜單欄中的【視圖】/【顯示額外內容】命令，也可顯示或隱藏圖像映射。2改變圖像映射的屬性圖像映射參數決定了圖像映射在圖像窗口中的顯示屬性。我們可以設置圖

53、像映射邊線、邊線顏色和顏色等參數。設置圖像映射顯示屬性的步驟如下：1) 單擊菜單欄中的【編輯】/【預置】/【圖片】命令，則彈出【預置】對話框，如圖9.70所示。圖9.70 【預置】對話框2) 打開【直線顏色】選項的下拉列表選擇所需的顏色，可改變圖像映射邊線的顏色。3) 在【圖像映射疊加】文本框中輸入一個數值，或者單擊按鈕調整滑塊的位置，可以改變圖像映射覆蓋色的透明度。4) 選擇【僅顯示行】復選框，可以使圖像映射只顯示邊框，而不顯示覆蓋色。5) 選擇【顯示定界框】復選框，可以顯示圖像映射的定界框。6) 單擊按鈕，完成圖像映射屬性的設置。9.4.5 編輯圖像映射編輯圖像映射包括修改、排列、分布圖像映射等操作。1修改圖像映射修改圖像映射的步驟如下：1) 選擇工具箱中的工具，單擊要修改的圖像映射，則圖像映射邊框上將出現控制點。2) 將光標指向邊框內部按下鼠標拖曳，可以移動圖像映射的位置。3) 將光標指向控制點時，光標變?yōu)殡p向箭頭，此時按下鼠標拖曳可修改圖像映射的大小。矩形圖像映射可以改變它的長度和寬度；圓形圖像映射可以修改它的半徑；對于多邊形圖像映射，當圖像映射選擇工具指向它的任意一點時，工具由形狀變?yōu)樾螤睿聪率髽俗箧I拖曳鼠標，