制作按钮元件.PPT

著作權所有 ? 旗標出版股份有限公司 第 21 章 按鈕元件與行為指令的應用 ─ 血濺骷髏頭 本章提要 動畫元件與流程說明 建立按鈕元件 (Button Symbol) 製作動態按鈕 設定影格標籤與註解 加入 ActionScript 與行為指令 舉一反三時間 － 製作選單功能表 重點說明 這一章我們不僅要帶你製作互動式按鈕元件, 還要讓你見識見識所謂的「動態按鈕」。最後, 還加入簡單的 ActionScript 及行為指令, 看它如何為按鈕元件帶來互動的生命力！ 本章要介紹的是 Flash 互動功能中最基本的按鈕效果。另外, 也將利用按鈕元件結合行為指令做基本的應用。現在就請你開啟範例 ch21.swf 來看看它的效果吧： ch21.swf 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明 元件介紹 本章動畫以骷髏頭為中心, 再加上其他如圓圈、背景…等裝飾性的東西, 並用紅色與黑色來強調視覺效果。所有元件詳列如下︰ 元件介紹 動畫製作流程 本章範例製作流程圖如下︰ 重點說明 本章的動畫範例分為下列 3 個階段： 了解按鈕元件的製作方式與原理。 結合影片片段元件與按鈕元件, 製作出含有動畫效果的動態按鈕 (見 21-3 節)。 加入 ActionScript, 先讓動畫停留在第一格, 等候我們按下按鈕元件。 在按鈕元件上加入行為指令, 以利用滑鼠事件來製作按鈕互動效果。 建立按鈕元件 (Button Symbol) 按鈕元件的製作概念 製作『按鈕』元件 不製作感應區狀態 啟動簡易按鈕 關閉啟動簡易按鈕功能 按鈕元件的製作概念 在第 6 章我們曾經提過按鈕元件的時間軸分為 4 格影格, 每格影格分別代表按鈕元件的 1 種狀態︰ 一般 (Up) 影格：代表按鈕元件尚未偵測到滑鼠動作的初始狀態。 滑入 (Over) 影格：代表滑鼠指標移到按鈕元件上的狀態。 按鈕元件的製作概念 按下 (Down) 影格：代表滑鼠指標在按鈕元件上按下滑鼠左鈕的狀態。 感應區 (Hit) 影格：用來設置偵測滑鼠動作的感應區。 感應區影格的作用是偵測滑鼠動作, 當滑鼠指標進入感應區, 按鈕元件便會由一般狀態變成滑入狀態。若在感應區內按下滑鼠左鈕, 則按鈕元件就會變成按下狀態。 按鈕元件的製作概念 製作『按鈕』元件 請執行『插入 / 新增元件』命令, 建立 1 個名為按鈕的按鈕元件 (或是開啟 ch21-learn1.fla 檔, 直接進入按鈕按鈕元件的編輯狀態)。 下表是按鈕按鈕元件在各狀態下所要呈現的內容, 請依下表製作按鈕按鈕元件的 4 格影格︰ 製作『按鈕』元件 其中, 一般影格的內容是由按鈕紅底、按鈕灰底、黑骷髏這 3 個圖像元件組合成的, 而滑入影格則是將一般影格內容加上紅骷髏圖像元件組合成的。 接著的按下影格就是將滑入影格內容縮小而已, 至於感應區影格, 我們放入按鈕灰底圖像元件做為感應區即可： 製作『按鈕』元件 不製作感應區狀態 其實不製作感應區狀態, 按鈕元件還是會對滑鼠事件有所反應, 因為未製作感應區時, 按鈕元件會依照按下影格→滑入影格→一般影格的順序, 以其中的物件來做為感應區。 例如按下影格中有內容, 就以按下影格中的物件來當做感應區；當按下影格中沒有物件時, 就以滑入影格中的物件來當做感應區, 以此類推。 不製作感應區狀態 凡是當做感應區的影格, 該影格中的所有物件都是感應區。你可以按下描圖紙 鈕來輔助調整感應區的尺寸和位置。 必須注意的是, 若你不打算製作感應區影格中的內容, 絕不可將其設定為空白關鍵影格。因為內容空白的感應區影格表示不要設置感應區, 按鈕元件也就失去功用。 啟動簡易按鈕 按鈕按鈕元件製作完成後, 我們可以點選按鈕圖層的影格 1, 直接把該元件拉入舞台, 然後執行『控制 / 啟動簡易按鈕』命令 (或按 + + 鍵) 進行測試︰ 啟動簡易按鈕 關閉啟動簡易按鈕功能 開啟啟動簡易按鈕後, 你便無法在感應區範圍內使用箭頭工具 來選取按鈕實體。此時, 請用箭頭工具 按一下按鈕實體未在感應區之內的部分, 或是使用圈選方式便可以選取按鈕實體。另外, 再執行一次『控制 / 啟動簡易按鈕』命令關閉啟動簡易按鈕功能, 即可恢復成一般模式。 製作動態按鈕 接著, 我們要進一步將按鈕按鈕元件改造成動態按鈕。 動態按鈕的設計概念 在按鈕元件中插入影片片段元件 動態按鈕的設計概念 由於按鈕元件的每格狀態只有 1 格影格, 所以要讓它動起來的方法, 就是在單一影格中置入可以不斷重複播放的影片片段元件。 在按鈕元件中插入影片片段元件 要加進按鈕按鈕元件裡的是 1 個名為紅骷髏影片的影片片段元件, 這是一段紅色小骷髏循著圓形導引線做順時鐘旋轉的動畫。 我們要將這個