如何使用 Animate CC 建立按鈕

搜尋
Adobe Animate 使用手冊

本頁內容

適用於: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

建立按鈕的基本步驟

  1. 決定何種按鈕類型最符合您的需求。

    按鈕元件

    大多數的人會根據他們的適應性來選擇按鈕元件。按鈕元件包含按鈕狀態專用的內部時間軸。您可以輕鬆地建立看起來不一樣的狀態，例如「一般」、「按下」和「滑入」。此外，按鈕元件也會隨著對使用者動作所做的反應而自動變更狀態。

    影片片段按鈕

    您可以使用影片片段元件來建立複雜的按鈕效果。影片片段元件可以包含幾乎任何類型的內容，其中包括動畫。不過，影片片段元件沒有內建的「一般」、「按下」和「滑入」狀態。請使用 ActionScript 自行建立那些狀態。此按鈕的缺點是，影片片段檔案大於按鈕檔案。

    ActionScript 按鈕組件

    如果您只需要一個標準按鈕或切換按鈕，而且不想過度自訂按鈕，請使用按鈕組件。ActionScript 2.0 和 3.0 兩種按鈕組件都隨附允許狀態變更的內建程式碼。因此，您不必定義按鈕狀態的外觀和行為指令。只要將組件拖曳到「舞台」即可。

    • ActionScript 3.0 按鈕組件允許進行一些自訂。您可以將按鈕繫結到其他組件，並且共享及顯示應用程式資料。這些組件具備輔助功能支援等內建功能。Button、RadioButton 和 CheckBox 組件都可供使用。

    • ActionScript 2.0 按鈕組件無法自訂。組件允許狀態變更。

  2. 定義按鈕狀態。

    一般影格

    使用者未與按鈕互動時的外觀。

    滑過影格

    使用者即將選取按鈕時的外觀。

    滑鼠按下影格

    使用者選取按鈕時的外觀。

    感應區影格

    根據使用者按下動作而反應的區域。定義這個「感應區」影格是選擇性的。如果您的按鈕尺寸小，或者圖像區域不是連續的，則定義這個影格會很有用。

    • 播放期間，在「舞台」上看不見「感應區」影格的內容。

    • 「感應區」影格的圖像是一塊實心區域，其大小足以涵蓋「一般」、「按下」和「滑入」影格的所有圖像元素。

    • 如果您未指定「感應區」影格，則會使用「一般」狀態的影像。

      您可以製作按下或滑入 (也稱為互斥的滑鼠指向效果) 舞台不同區域時會有所反應的按鈕。將「感應區」影格圖像放置在與其他按鈕影格圖像不同的位置。

  3. 讓動作與按鈕產生關聯。

    若要在使用者選取按鈕時有所表示，您可以在「時間軸」加入 ActionScript 程式碼。請將 ActionScript 程式碼放置在與按鈕相同的影格中。「程式碼片段」面板已針對許多常用按鈕預先製作 ActionScript 3.0 程式碼。請參閱使用程式碼片段增加互動功能。

    註解：

    ActionScript 2.0 與 ActionScript 3.0 不相容。如果您的 Animate 版本使用 ActionScript 3.0，則無法將 ActionScript 2.0 程式碼貼入按鈕 (反之亦然)。在從另一個來源將 ActionScript 貼入按鈕之前，請先確認版本是相容的。

建立含有按鈕元件的按鈕

若要使按鈕具有互動性，請將按鈕元件的實體放置於「舞台」上，然後指定動作給實體。將動作指定給 FLA 檔案的根時間軸。請勿新增動作至按鈕元件的時間軸。若要將動作加入按鈕時間軸，請改用影片片段按鈕。

  1. 選擇「編輯 > 取消全選」或按一下「舞台」上的空白區域，以確定沒有選取「舞台」上的任何元件。

  2. 選擇「插入 > 新增元件」。

  3. 在「建立新元件」對話方塊中輸入名稱。元件的「類型」則選取「按鈕」。

    Animate 便會切換到元件編輯模式。「時間軸」會出現變化，顯示四個標示為「一般」、「滑入」、「按下」和「感應區」的連續影格。第一個影格「一般」是一個空白的關鍵影格。

  4. 若要建立「一般」狀態的按鈕影像，請在「時間軸」中選取「一般」影格。然後，使用繪圖工具、匯入圖像，或在「舞台」上放置另一個元件的實體。

    您可以使用按鈕元件內的圖像元件或影片片段元件，但是您無法使用其他按鈕元件。

  5. 在「時間軸」中按一下「滑入」影格，然後選擇「插入 > 時間軸 > 關鍵影格」。

    Animate 會插入一個重製上一個「一般」影格內容的關鍵影格。

  6. 在仍然已選取「滑入」影格的情況下，變更或編輯「舞台」上的按鈕影像，進而建立您想要的「滑入」狀態外觀。

  7. 對「按下」影格和選擇性的「感應區」影格重複步驟 5 及步驟 6。

  8. 若要將聲音指定給按鈕的狀態，請在「時間軸」中選取該狀態的影格，然後選擇「視窗 > 屬性」。然後，從「屬性」檢測器的「聲音」選單中選取聲音。只有已匯入的聲音才會出現在「聲音」選單中。

  9. 完成時，請選擇「編輯 > 編輯文件」。Animate 會讓您回到 FLA 檔案的主時間軸。若要為您在「舞台」上建立的按鈕建立實體，請將按鈕元件從「元件庫」面板拖曳到「舞台」上。

  10. 若要測試按鈕功能，請使用「控制 > 測試」命令。此外，您也可以選擇「控制 > 啟用簡易按鈕」，預覽「舞台」上按鈕元件的狀態。此命令可讓您查看按鈕元件的一般、滑入與按下狀態，而不需使用「控制 > 測試」。

啟用、編輯及測試按鈕元件

根據預設，Animate 會將按鈕元件保持為與您建立時相同的停用狀態。請選取再啟用按鈕，查看按鈕是否會回應滑鼠事件。最佳作法是，工作時停用按鈕並啟用按鈕以快速地測試它們的行為。

  • 若要選取按鈕，請使用「選取」工具拖曳按鈕周圍的選取範圍矩形。

  • 若要啟用或停用「舞台」上的按鈕，請選擇「控制 > 啟動簡易按鈕」。此命令可當做兩個狀態的切換命令使用。

  • 若要移動按鈕，請使用方向鍵。

  • 若要編輯按鈕，請使用「屬性」檢測器。如果未看見檢測器，請選擇「視窗 > 屬性」。

  • 若要測試編寫環境中的按鈕，請選擇「控制 > 啟動簡易按鈕」。

  • 若要測試 Flash Player 中的按鈕，請選擇「控制 > 測試影片 [或「測試場景」]•>•測試」。這是用來測試影片片段按鈕的唯一方法。

  • 若要測試「元件庫預覽」面板中的按鈕，請選取「元件庫」中的按鈕並按一下「播放」。

疑難排解按鈕

使用下列資源可以疑難排解按鈕的常見問題：

其他按鈕資源

下列 TechNotes 包含一些特定按鈕案例的指示：