21-2 建立按钮元件.pptVIP

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] + [B] 鍵), 即可測試按鈕︰ 啟動簡易按鈕 在啟動簡易按鈕模式中, 我們無法編輯或選取按鈕實體, 請再執行一次『控制/啟動簡易按鈕』命令關閉啟動簡易按鈕模式, 恢復到一般編輯狀態。 * *