FlashCS6中文版基礎(chǔ)教程：第16章 按鈕

1第16章按鈕本章主要介紹按鈕的本質(zhì)、如何創(chuàng)建按鈕、如何測試按鈕以及如何使用按鈕。216.1認識按鈕元件按鈕實際上是4幀的交互影片剪輯。當為元件選擇按鈕行為時，F(xiàn)lash會創(chuàng)建一個包含4幀的時間軸。前3幀顯示按鈕的3種可能狀態(tài)；第4幀定義按鈕的活動區(qū)域。時間軸實際上并不播放，它只是對指針運動和動作做出反應，跳轉(zhuǎn)到相應的幀。要制作一個交互式按鈕，可把該按鈕元件的一個實例放在舞臺上，然后為該實例指定動作。必須將動作分配給文檔中按鈕的實例，而不是分配給按鈕時間軸中的幀。按鈕元件的時間軸上的每一幀都有一個特定的功能。(1)第1幀是彈起狀態(tài)，代表指針沒有經(jīng)過按鈕時該按鈕的狀態(tài)。(2)第2幀是指針經(jīng)過狀態(tài)，代表指針滑過按鈕時該按鈕的外觀。(3)第3幀是按下狀態(tài)，代表單擊按鈕時該按鈕的外觀。(4)第4幀是單擊狀態(tài)，定義響應鼠標單擊的區(qū)域。此區(qū)域在SWF文件中是不可見的。316.2制作按鈕本節(jié)主要講解按鈕的本質(zhì)，并通過簡單動態(tài)按鈕的制作，來講解按鈕的制作方法。要求按鈕的形狀和顏色會隨著鼠標事件而發(fā)生變化。416.2.1按鈕的本質(zhì)在觀看Flash作品時，如果觀眾只能被動地觀看，那么就少了許多的趣味。我們知道按鈕是Flash元件中的一種，使用按鈕是根據(jù)用戶鼠標的動作，使得動畫可以做出相應的反應。這樣通過不同種類、不同作用的按鈕，就可以實現(xiàn)人與Flash之間的交互。在Flash中，按鈕是作為一個元件來制作的。在動畫中合理地使用各種按鈕，可以使動畫更具人性化，操作感更強。516.2.2創(chuàng)建按鈕1.創(chuàng)建按鈕的大致步驟2.創(chuàng)建按鈕的詳細操作步驟616.3使用按鈕使用按鈕包括啟用、編輯和測試按鈕。默認情況下，F(xiàn)lash在創(chuàng)建按鈕時會將它們保持在禁用狀態(tài)，從而可以更容易地選擇和處理這些按鈕。當按鈕處于禁用狀態(tài)時，單擊該按鈕就可以選擇它。當按鈕處于啟用狀態(tài)時，它會響應我們已指定的鼠標事件，就如同SWF文件正在播放時一樣，仍然可以選擇已啟用的按鈕。可在工作時禁用按鈕，然后啟用按鈕以便快速測試其行為。1.啟用和禁用按鈕2.選擇、移動或編輯已啟用的按鈕3.測試按鈕716.4上機實踐操作本范例完成文件：\16\范例按鈕.fla、范例按鈕.swf。多媒體教學路徑：光盤→多媒體教學→第16章。816.4.1實例介紹和展示本例通過運用【新建元件】命令、繪圖工具、【保存】命令等制作一個彈性按鈕。按鈕效果如圖16-24所示。916.4.2擴展形狀啟動FlashCS6，選擇【文件】|【新建】菜單命令，創(chuàng)建一個新空白文檔，文檔大小為200200像素。1016.4.3繪制紅色按鈕(1)在舞臺上按住Shift鍵以及鼠標左鍵不放畫一個正圓，筆觸顏色選擇黑色，無填充色，高和寬為“163”，如圖16-25所示。把這個正圓形拖曳到舞臺以外，以作備用。(2)復制一個圓形，把這個復制的圓形拖曳到舞臺中間，在【工具】面板中單擊【顏料桶工具】按鈕，在【混色器】面板中選擇【類型】為【放射狀漸變】，漸變顏色為從白色到淺黑色(數(shù)值為“#666666”)漸變，鼠標變成時，對準工作區(qū)的圓偏左上單擊，這樣能讓白色的中心點偏左上，立體感更強，如圖16-26所示。在【工具】面板中單擊【選擇工具】按鈕，選中這個圓形，選擇【修改】|【組合】菜單命令，把這個圓形也拖曳到舞臺外面。1116.4.3繪制紅色按鈕(3)再復制一個圓形，拖曳到舞臺中間來。用【任意變形工具】按鈕修改這個圓形，將寬和高的值設(shè)置為“140”，如圖16-27所示。(4)給這個小圓也進行和大圓一樣的漸變填充，這次讓白色的中心點偏右下，如圖16-28所示。把這個小圓的黑邊拖曳到一邊備用，如圖16-29所示。并且把沒有黑邊的小圓進行組合。1216.4.3繪制紅色按鈕(5)現(xiàn)在把這個小圓和大圓的中心位置對齊，放置在一起，如圖16-30所示。記得要把它們進行組合。(6)把小圓的黑邊再次進行漸變填充，白色和數(shù)值為“#FF000”的紅色，白色中心點偏右下。填充顏色后，把黑色邊拖曳到一邊，只把紅色小圓進行組合。按住Shift鍵等比例縮小紅色小球，和步驟(5)中的按鈕中心對齊，放置在一起，這樣按鈕就做好了，如圖16-31所示。1316.4.4繪制黃色按鈕復制一個紅色按鈕，別忘了紅色按鈕是個組合。把中間的紅色部分填充為白色和“#FFFF00”的黃色漸變，白色中心點放在偏左上方，這樣黃色按鈕也做好了，如圖16-32所示。1416.4.5繪制心形(1)繪制一個正圓形，寬和高的值為“53.5”，取消筆觸，填充黑色。再復制一個正圓形，把兩個圓水平緊挨著放置在一起，如圖16-33所示。(2)繪制一個寬和高的值為“96.5”的方形，取消筆觸，填充黑色，并旋轉(zhuǎn)45度，把黑色方形朝上邊的一個角擦去，將這個圖形進行組合，如圖16-34的所示。1516.4.5繪制心形(3)把步驟(1)和步驟(2)中心位置對齊，上下放置一起，用鍵盤上的方向鍵進行微調(diào)，如圖16-35所示。把調(diào)整好的黑色心形分離，使之成為一個形狀。(4)復制一個同樣的心形，填充為紅色漸變，配合紅色按鈕的亮點，白色中心點偏右下。把剛才的黑色心形放置在下層，露出一點，像是陰影的效果，如圖16-36所示。把紅色心形組合，調(diào)整寬為“75.7”、高為“69.5”。1616.4.5繪制心形(5)用同樣的方法繪制一個藍色心形，白色中心點如圖16-37所示。把藍色心形組合，調(diào)整寬為“75.7”、高為“69.5”。1716.4.6分別把紅、藍色心形放置在黃色和紅色按鈕上把紅色心形、藍色心形分別放置在黃色按鈕和紅色按鈕上，效果如圖16-38所示。把紅、藍色心形按鈕分別進行組合。1816.4.7把做好的按鈕轉(zhuǎn)換為元件(1)在【工具】面板中單擊【選擇工具】按鈕，選中紅色心形按鈕，選擇【修改】|【轉(zhuǎn)換為元件】菜單命令，彈出【轉(zhuǎn)換為元件】對話框，設(shè)置【名稱】為“按鈕彈起時”，【類型】為【影片剪輯】，如圖16-39所示，單擊【確定】按鈕。(2)在【工具】面板中單擊【選擇工具】按鈕，再次選中紅色心形按鈕，選擇【修改】|【轉(zhuǎn)換為元件】菜單命令，彈出【轉(zhuǎn)換為元件】對話框，設(shè)置【名稱】為“鼠標按下時”，類型為【影片剪輯】，單擊【確定】按鈕。(3)在【工具】面板中選擇【選擇工具】，選中藍色心形按鈕，選擇【修改】|【轉(zhuǎn)換為元件】菜單命令，彈出【轉(zhuǎn)換為元件】對話框，設(shè)置【名稱】為“鼠標經(jīng)過時”，【類型】為【影片剪輯】，單擊【確定】按鈕。1916.4.8導入聲音素材(1)當我們用“鼠標按下”這個制作的按鈕時，會發(fā)出聲音，這個聲音素材就要我們加入到庫中作為元件。選擇【文件】|【導入】|【導入到庫】菜單命令，彈出【導入到庫】對話框，把我們要用到的聲音文件按路徑找到，選中要導入的聲音文件“Button2”，單擊【打開】按鈕?；螂p擊要導入的聲音文件“Button2”，如圖16-40所示。這時候再看【庫】面板，剛才導入的聲音已經(jīng)存在。(2)選擇【插入】|【新建元件】菜單命令，彈出【創(chuàng)建新元件】對話框，設(shè)置【名稱】為“心形按鈕”，【類型】為【按鈕】，如圖16-41所示。單擊【確定】按鈕。2016.4.8導入聲音素材(3)這時候場景有些變化，如圖16-42所示。(4)當【彈起】幀紅色顯示時，把【庫】面板中的【按鈕彈起時】影片剪輯元件拖曳到舞臺上。選擇【窗口】|【對齊】菜單命令，調(diào)出【對齊】面板，在【工具】面板中單擊【選擇工具】按鈕，選擇【按鈕彈起時】元件，啟用【對齊面板】中的【相對于舞臺分布】復選框，分別單擊【水平對齊】按鈕和【垂直對齊】按鈕，該元件就置于舞臺正中。其他元件也用同樣的方法確保置于舞臺正中。2116.4.8導入聲音素材(5)單擊【指針經(jīng)過】幀，然后右擊，在彈出的快捷菜單中選擇【插入關(guān)鍵幀】命令，把【庫】面板中的【鼠標經(jīng)過時】影片剪輯元件拖曳到舞臺上并對齊。(6)單擊【按下】幀，然后右擊，在彈出的快捷菜單中選擇【插入關(guān)鍵幀】命令，把【庫】面板中的【鼠標按下時】影片剪輯元件拖曳到舞臺上并對齊。(7)把【庫】面板中的聲音文件“Button2”也拖曳到當前【鼠標按下時】元件上，則加入聲音元件后的【按下】幀顯示為。至此，心形按鈕編輯完畢，單擊返回場景模式。2216.4.9把制作好的按鈕元件拖曳到舞臺上(1)把【庫】面板中的【心形按鈕】元件拖曳到舞臺中間，如圖16-43所示。(2)選擇【控制】|【測試影片】菜單命令，會測試播放我們當前正在編輯的文檔，如圖16-44所示。當鼠標經(jīng)過按鈕的時候，按鈕顏色會發(fā)生改變；當鼠