如何使用 Adobe Animate 建立按鈕

上次更新時間 2023年5月24日

Animate (以前稱為 Flash Professional) 中的按鈕是指包含四個影格的元件。 按鈕元件的每個影格代表按鈕的不同狀態:「一般 (Up)」、「滑入 (Over)」、「按下 (Down)」和「感應區 (Hit)」。 這些狀態決定了當滑鼠滑過按鈕,或使用者按下按鈕時,按鈕所呈現的視覺效果。 本文介紹如何建立基本及進階按鈕。

建立基本按鈕

選擇「插入」>「新增符號」,或按Control+F8(Windows)或Command+F8(MacOS)。
注意:在Flash3或更早版本中,取消選取「舞台」上的所有專案,然後選擇「插入」>「建立符號」。

在「元件內容」對話方塊中,輸入新按鈕元件的名稱,並在「行為」選項中選擇「按鈕」。 按一下「確定」。 

Flash切換為元件編輯模式。 時間軸標頭會隨之切換,顯示已分別標註「一般」、「滑入」、「按下」和「感應區」標籤的四個連續影格。 第一個影格「一般」是一個空白的關鍵影格。
若要建立「一般」狀態按鈕影像,請在「舞台」上使用繪圖工具、讀入圖形,或置入另一個元件的實例。 您可以在按鈕內使用影片剪輯或圖形元件, 但不能在按鈕內使用另外一個按鈕。 若要建立動態按鈕,請使用影片剪輯元件。
選取第二個影格「滑入」,再選擇「插入 > 關鍵影格」。 這時「舞台」上會出現第一個影格的按鈕影像。
將按鈕影像變更為「滑入」狀態。 重複步驟 4 和 5 以處理「按下」和「感應區」影格。

注意:播放時無法在「舞台」上看到「點選」畫面,但會定義按一下時回應的按鈕區域。 確定「感應區」影格圖形的實色區域大小足夠容納「一般」、「按下」和「滑入」等影格的所有圖形元素。 它也可以大於在螢幕上看見的按鈕。 若您未指定「感應區」影格,「一般」狀態的物件就會作為「感應區」影格使用。
定義四個按鈕狀態的影像後,請選擇「編輯 > 編輯影片」,接著便可退出「元件編輯」模式。
選擇「視窗 > 元件庫」,開啟元件庫視窗。 在元件庫視窗中尋找按鈕,接著將按鈕元件從元件庫拖曳到舞台上。 這個步驟會在影片中建立按鈕實例。

如需為按鈕實例指定動作的詳細資訊,請參閱您所使用 Animate 版本的適用文件。 文件提供如下:

為按鈕指定簡易動作 (Flash 5)

在「編輯影片」模式中,選擇上述步驟 7 建立的按鈕實例。
選擇「視窗 > 動作」以開啟「動作」面板。
在面板左側的「工作箱」清單中,按一下「基本動作」類別來顯示基本動作。
若要指定動作,請執行以下任一方法:
  • 在「基本動作」類別中按兩下某個動作。
  • 從面板左側的「基本動作」類別中,將某個動作拖到右側的「動作」清單。
  • 按一下「新增 (+)」按鈕,再從蹦現式功能表中選擇動作。
  • 使用鍵盤捷徑。

如果選擇的動作有任何關聯的參數,這些參數會出現在「動作」面板底部的「參數」面板中。 (若該「參數」面板未顯示,請按一下面板右下角的小三角形)。 為該動作選擇或鍵入適當的參數。 例如,下方所示的 gotoAndPlay 動作包含三個參數: 場景類型影格,以及「跳至」與「播放」選項。

為按鈕指定簡易動作 (Flash 4 和較舊版本)

在「編輯影片」模式中,選擇上述步驟 7 建立的按鈕實例。
確定已確實取消選取「控制」功能表中的「啟用按鈕」。

連按兩下按鈕以開啟[執行個體屬性]對話方塊。
注意:在Flash2中,此對話方塊是[連結屬性:按鈕]對話方塊。

在「實例內容」對話方塊中選取「動作」標籤,即可指定動作。 接著,按一下加號 (+) 按鈕,然後按兩下適當的動作。

注意:在Flash2中,使用[連結屬性:按鈕]對話方塊中的[動作]彈出式選單來指派動作。 只能為按鈕指定一個動作。

請確認「控制」功能表中的「啟用按鈕」已經切換回開啟 (旁邊有核取標記)。

如果選擇的動作有任何關聯的參數,這些參數會出現在「動作」面板右側的「參數」面板中。 為該動作選擇或鍵入適當的參數。

建立進階按鈕

熟練建立簡易按鈕的方法後,可繼續嘗試建立更複雜的 Animate 按鈕。 您可以建立不可見的按鈕、具備動態狀態的按鈕,以及具有滑鼠指向效果的按鈕。 

設計複雜按鈕的時候,您必須了解「感應區」狀態。 按鈕的形狀和區域代表按鈕的作用區域。 若要實際體驗「感應區」狀態,請執行下列步驟:

將「通用元件庫」的按鈕導入至「舞台」。 編輯按鈕。

反白選取按鈕「感應區」狀態中的影格,然後插入關鍵影格。 在影片中測試此項行為。

大幅度調整狀態為「感應區」的物件大小,加以測試。

刪除狀態為「感應區」的關鍵影格,加以測試按鈕。

請注意按鈕游標的效果,以及按鈕啟用後出現的「一般」、「滑入」、「按下」等狀態。 

不可見的按鈕

您可以讓「一般」、「滑入」和「按下」狀態保持空白。 若這些狀態空白,請定義「感應區」狀態,這樣其中才會包含內容。

若按鈕的「一般」狀態為空白或甚至隱而不見,按鈕在舞台上會呈現為藍色形狀。 這個形狀大小等於按鈕中下一個關鍵影格的內容大小。 在最後的影片中,這個藍色形狀會隱而不見。

具動態狀態的按鈕

若要在 Animate 中製作動態按鈕,請在要動態顯示的按鈕狀態中放置「影片剪輯」。

為動態按鈕的每個狀態建立影片剪輯。
建立按鈕。
在按鈕狀態中放置影片剪輯,即可動態顯示。

將按鈕置於舞台上。 
注意:無法在動畫編輯器中測試影片片段。 選擇「控制 > 測試影片」,或將其轉存成 SWF 檔案,再進行測試。

在影片中,單一區域的滑鼠指向效果會影響影片的其他區域

若要建立這種效果,請在舞台上適度移動「感應區」狀態元素,使其與按鈕的「滑入」狀態元素位於不同區域。 這個方法適合用來創造簡易滑鼠指向效果。 按鈕的作用區域是在有別於滑鼠指向效果的其他舞台區域。

其他資訊

研究 Animate 隨附的按鈕範例,是學習這些按鈕及其建構方法的極佳方法。 使用第 5 版時,您可以從「視窗 > 通用元件庫 > 按鈕」功能表中取得這些範例按鈕。 若您使用的是第 4 版,則可選擇「元件庫 > 按鈕」來存取這些按鈕。 若使用的是第 2 版,則可從 Xtras 功能表存取範例按鈕的元件庫。

您也可以從第 5 版隨附的「課程」中取得建立按鈕的逐步解說。 在 Flash 中選擇「說明 > 課程 > 06 按鈕」,即可存取該課程。