如何使用 Adobe Animate 建立按鈕

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

建立基本按鈕

  1. 選擇「插入 > 新增元件」,或按 Control+F8 (Windows) 或 Command+F8 (Mac OS)。
    注意: 如果使用 Flash 3 和更新版本,請取消選取舞台上的所有項目,接著選擇「插入 > 建立元件」。

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

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

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

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

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

  1. 在「編輯影片」模式中,選擇上述步驟 7 建立的按鈕實例。
  2. 選擇「視窗 > 動作」以開啟「動作」面板。
  3. 在面板左側的「工作箱」清單中,按一下「基本動作」類別來顯示基本動作。
  4. 若要指定動作,請執行以下任一方法:
    • 在「基本動作」類別中按兩下某個動作。
    • 從面板左側的「基本動作」類別中,將某個動作拖到右側的「動作」清單。
    • 按一下「新增 (+)」按鈕,再從蹦現式功能表中選擇動作。
    • 使用鍵盤捷徑。
  5. 如果選擇的動作有任何關聯的參數,這些參數會出現在「動作」面板底部的「參數」面板中。(若該「參數」面板未顯示,請按一下面板右下角的小三角形)。為該動作選擇或鍵入適當的參數。例如,下方所示的 gotoAndPlay 動作包含三個參數: 場景類型影格,以及「跳至」與「播放」選項。

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

  1. 在「編輯影片」模式中,選擇上述步驟 7 建立的按鈕實例。
  2. 確定已確實取消選取「控制」功能表中的「啟用按鈕」。
  3. 按兩下該按鈕,開啟「實例內容」對話方塊。
    注意: 在 Flash 2 中,這個對話方塊為「連結內容: 按鈕」對話方塊。

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

    注意:
    在 Flash 2 中,請使用「連結內容: 按鈕」對話方塊中的「動作」蹦現式功能表來指定動作。只能為按鈕指定一個動作。
  5. 請確認「控制」功能表中的「啟用按鈕」已經切換回開啟 (旁邊有核取標記)。

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

建立進階按鈕

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

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

  1. 將「通用元件庫」的按鈕導入至「舞台」。編輯按鈕。
  2. 反白選取按鈕「感應區」狀態中的影格,然後插入關鍵影格。在影片中測試此項行為。

  3. 大幅度調整狀態為「感應區」的物件大小,加以測試。
  4. 刪除狀態為「感應區」的關鍵影格,加以測試按鈕。

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

不可見的按鈕

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

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

具動態狀態的按鈕

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

  1. 為動態按鈕的每個狀態建立影片剪輯。
  2. 建立按鈕。
  3. 在按鈕狀態中放置影片剪輯,即可動態顯示。
  4. 將按鈕置於舞台上。 
    注意: 影片剪輯無法在 Animate 編輯器中測試。選擇「控制 > 測試影片」,或將其轉存成 SWF 檔案,再進行測試。

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

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

其他資訊

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

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

更快、更輕鬆地獲得協助

新的使用者?