建立按钮元课件

1、建立按钮元21-2 建立按鈕元件 大致清楚本章範例的製作流程後, 我們首先要進入元件的製作階段。建立按钮元按鈕元件的製作概念 建立按鈕元件製作動態按鈕設定 ActionScript 加入行為指令我們在第 6 章曾經介紹過按鈕元件, 其時間軸分為 4 格影格, 每格影格分別代表按鈕元件的一種狀態建立按钮元按鈕元件的製作概念 一般一般 (Up) 影格影格：代表按鈕元件尚未偵測到滑鼠動作的狀態。 滑入滑入 (Over) 影格影格：代表滑鼠指標移到按鈕元件上的狀態。 按下按下 (Down) 影格影格：代表滑鼠指標在按鈕元件上按下滑鼠左鈕的狀態。 感應區感應區 (Hit) 影格影格：用來設置偵測滑鼠動作

2、的感應區。建立按钮元製作按鈕元件 請開啟練習檔 21-learn.fla, 再執行插入插入/新增元件新增元件命令建立一個名為按鈕按鈕的按鈕元件, 進入按鈕元件的編輯狀態後, 我們要如下表製作按鈕在各影格所呈現的內容建立按钮元1. 製作一般影格 請點選圖層圖層 1 的一般影格, 再將元件庫元件庫中的蜂巢蜂巢元件拉曳到舞台上, 就完成一般一般影格的內容了。建立按钮元2. 製作滑入影格由於我們要讓按鈕在滑入滑入影格中改變顏色, 所以要先將舞台上的蜂巢蜂巢實體打散, 再調整顏色。 請點選圖層圖層 1 的滑入滑入影格, 在影格上按右鈕執行插入關鍵影格插入關鍵影格命令。1. 請選取舞台上的實體, 再執行修

3、改修改/打散打散命令 (或按下 Ctrl + B 鍵), 將實體轉換成形狀, 再如下圖更改蜂巢上方的顏色及陰影處：建立按钮元2. 製作滑入影格 為了避免不小心更動到內容, 建議您修改完成後選取全部的圖形, 再按下 Ctrl + G 將其群組。建立按钮元3. 製作按下影格按下影格我們將利用濾鏡功能來做變化。1. 請選取圖層圖層 1 的按下按下影格, 然後按下滑鼠右鈕執行插入空白關鍵影格插入空白關鍵影格命令, 再從元件庫元件庫將蜂巢蜂巢拉曳到舞台上, 並對齊舞台上的原點：建立按钮元3. 製作按下影格建立按钮元3. 製作按下影格 此處我們選擇插入空白關鍵影格插入空白關鍵影格命令, 是因為剛才在滑入滑

4、入影格中, 我們為了調整顏色已將蜂巢實體打散為形狀, 又因為濾鏡套用的對象必須是影片片段元件或按鈕 (或文字), 因此我們不能延用滑入滑入影格的內容。建立按钮元3. 製作按下影格 開啟濾鏡濾鏡面板再選取舞台上的蜂巢蜂巢實體, 然後按下濾鏡濾鏡面板上的 鈕選擇漸層光暈漸層光暈濾鏡, 再如下圖進行各項設定：建立按钮元3. 製作按下影格 設定完成後, 請執行視窗視窗/變形變形命令開啟變形變形面板, 再選取舞台上的蜂巢蜂巢, 將其縮小至 90%, 按下影格就完成了。建立按钮元3. 製作按下影格建立按钮元4. 製作感應區影格 感應區感應區影格的作用是偵測滑鼠動作, 當滑鼠指標進入感應區, 按鈕元件便會由

5、一般一般狀態變成滑入滑入狀態。若在感應區感應區內按下滑鼠左鈕, 則按鈕元件就會變成按下按下狀態。建立按钮元4. 製作感應區影格 在此例中請於圖層圖層 1 的感應區感應區影格新增關鍵影格, 再按下矩形工具矩形工具鈕, 然後在舞台上繪製一個包含整個蜂巢的矩形範圍, 顏色及框線則沒有限制, 因為感應區的作用只是在規範區域, 並不會顯示顏色及框線在動畫中。建立按钮元4. 製作感應區影格 如果只在感應區感應區加入關鍵影格, 表示延續按按下下影格的內容, 按鈕的感應區就是整個蜂巢蜂巢實體。但是別忘了我們在按下按下影格曾經將蜂巢縮小至 90%, 為了讓使用者不會因為些微的差距感覺按鈕沒有作用 (例如按在蜂巢

6、邊緣), 建議您還是在感應區感應區繪製一個較寬鬆的按鈕範圍。建立按钮元不製作感應區狀態 即使不製作感應區感應區影格, 按鈕元件還是會對滑鼠事件有所反應。在未製作感應區的情況下, 按鈕元件會依照按下按下影格滑入滑入影格一般一般影格的順序, 以其中的物件來做為感應區, 例如按下按下影格中有內容, 就以按下按下影格中的物件來當做感應區範圍；當按下按下影格中沒有物件時, 就以滑入滑入影格中的物件來當做感應區範圍。建立按钮元不製作感應區狀態 雖然可以不繪製感應區的內容, 但不可將其設定為空白關鍵影格, 因為當感應區感應區影格內容被清空時 (完全空白), 按鈕元件也將失去按鈕的作用。建立按钮元啟動簡易按鈕 按鈕元件製作完成後, 請按下場景場景 1 回到場景編輯模式, 然後點選按鈕按鈕圖層的影格 1, 把剛才完成的按鈕按鈕元件拉曳到舞台上, 然後執行控制控制/啟動簡易按鈕啟動簡易按鈕命令 (或按 Ctrl + Alt + B 鍵), 即可測