如何使用 Animate 建立按鈕

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

建立按鈕的基本步驟

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

    按鈕元件

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

    影片片段按鈕

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

    ActionScript 按鈕組件

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

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

    • 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 包含一些特定按鈕案例的指示:

Adobe 標誌

登入您的帳戶