建立按钮元件

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