《建立按钮元》PPT课件.ppt

21-2 建立按鈕元件,大致清楚本章範例的製作流程後, 我們首先要進入元件的製作階段。,按鈕元件的製作概念,建立按鈕元件製作動態按鈕設定 ActionScript 加入行為指令我們在第 6 章曾經介紹過按鈕元件, 其時間軸分為 4 格影格, 每格影格分別代表按鈕元件的一種狀態,按鈕元件的製作概念,一般 (Up) 影格：代表按鈕元件尚未偵測到滑鼠動作的狀態。 滑入 (Over) 影格：代表滑鼠指標移到按鈕元件上的狀態。 按下 (Down) 影格：代表滑鼠指標在按鈕元件上按下滑鼠左鈕的狀態。 感應區 (Hit) 影格：用來設置偵測滑鼠動作的感應區。,製作按鈕元件,請開啟練習檔 21-learn.fla, 再執行插入/新增元件命令建立一個名為按鈕的按鈕元件, 進入按鈕元件的編輯狀態後, 我們要如下表製作按鈕在各影格所呈現的內容,1. 製作一般影格,請點選圖層 1 的一般影格, 再將元件庫中的蜂巢元件拉曳到舞台上, 就完成一般影格的內容了。,2. 製作滑入影格,由於我們要讓按鈕在滑入影格中改變顏色, 所以要先將舞台上的蜂巢實體打散, 再調整顏色。 請點選圖層 1 的滑入影格, 在影格上按右鈕執行插入關鍵影格命令。 請選取舞台上的實體, 再執行修改/打散命令 (或按下 Ctrl + B 鍵), 將實體轉換成形狀, 再如下圖更改蜂巢上方的顏色及陰影處：,2. 製作滑入影格,為了避免不小心更動到內容, 建議您修改完成後選取全部的圖形, 再按下 Ctrl + G 將其群組。,3. 製作按下影格,按下影格我們將利用濾鏡功能來做變化。 請選取圖層 1 的按下影格, 然後按下滑鼠右鈕執行插入空白關鍵影格命令, 再從元件庫將蜂巢拉曳到舞台上, 並對齊舞台上的原點：,3. 製作按下影格,3. 製作按下影格,此處我們選擇插入空白關鍵影格命令, 是因為剛才在滑入影格中, 我們為了調整顏色已將蜂巢實體打散為形狀, 又因為濾鏡套用的對象必須是影片片段元件或按鈕 (或文字), 因此我們不能延用滑入影格的內容。,3. 製作按下影格,開啟濾鏡面板再選取舞台上的蜂巢實體, 然後按下濾鏡面板上的 鈕選擇漸層光暈濾鏡, 再如下圖進行各項設定：,3. 製作按下影格,設定完成後, 請執行視窗/變形命令開啟變形面板, 再選取舞台上的蜂巢, 將其縮小至 90%, 按下影格就完成了。,3. 製作按下影格,4. 製作感應區影格,感應區影格的作用是偵測滑鼠動作, 當滑鼠指標進入感應區, 按鈕元件便會由一般狀態變成滑入狀態。若在感應區內按下滑鼠左鈕, 則按鈕元件就會變成按下狀態。,4. 製作感應區影格,在此例中請於圖層 1 的感應區影格新增關鍵影格, 再按下矩形工具鈕, 然後在舞台上繪製一個包含整個蜂巢的矩形範圍, 顏色及框線則沒有限制, 因為感應區的作用只是在規範區域, 並不會顯示顏色及框線在動畫中。,4. 製作感應區影格,如果只在感應區加入關鍵影格, 表示延續按下影格的內容, 按鈕的感應區就是整個蜂巢實體。但是別忘了我們在按下影格曾經將蜂巢縮小至 90%, 為了讓使用者不會因為些微的差距感覺按鈕沒有作用 (例如按在蜂巢邊緣), 建議您還是在感應區繪製一個較寬鬆的按鈕範圍。,不製作感應區狀態,即使不製作感應區影格, 按鈕元件還是會對滑鼠事件有所反應。在未製作感應區的情況下, 按鈕元件會依照按下影格滑入影格一般影格的順序, 以其中的物件來做為感應區, 例如按下影格中有內容, 就以按下影格中的物件來當做感應區範圍；當按下影格中沒有物件時, 就以滑入影格中的物件來當做感應區範圍。,不製作感應區狀態,雖然可以不繪製感應區的內容, 但不可將其設定為空白關鍵影格, 因為當感應區影格內容被清空時 (完全空白), 按鈕元件也將失去按鈕的作用。,啟動簡易按鈕,按鈕元件製作完成後, 請按下場景 1 回到場景編輯模式, 然後點選按鈕圖層的影格 1, 把剛才完成的按鈕元件拉曳到舞台上, 然後執行控制/啟動簡易按鈕命令 (或按 Ctrl + Alt +