搭配使用 Animate CC (先前稱為 Flash Professional CC) 和 Flex® 的方式有很多種,包括在 Animate 中建立要用於 Flex® 的自訂圖像和組件。以下教學課程說明多種可同時使用 Animate ® 和 Flex® 的方式。

注意:不建議使用 Animate 與 Flash Builder 之間的「設計」檢視工作流程。從 Flash Builder 4.6 起始此工作流程時,Animate 中會擲回例外。

Flash Builder 的某些工作流程可能無法與最新的 Animate CC 版本 (2017 以後版本) 互通。 

使用 Animate 與 Flash Builder 對 ActionScript 進行編輯與除錯

開始之前

為了啟用這些 Animate/Flash Builder 工作流程,請確認符合下列條件:

  • 必須安裝 Flash CS5 與 Flash Builder 4。

  • 若要從 Flash Builder 啟動 FLA 檔案,您必須在「Package Explorer」面板中指派專案的 Animate 專案特性。

    如需在 Flash Builder 中指派專案特性的詳細資訊,請參閱 Flash Builder 說明。

  • 若要從 Flash Builder 啟動 FLA 檔案,專案必須指派一個 FLA 檔案,以便在專案的 Animate CC 屬性中進行測試與除錯。

從 Flash Builder 測試、除錯與發佈 Animate

在 Animate 中測試與除錯您在 Flash Builder 4 中編輯的檔案:

  • 若要開發 Flash Builder,選擇「執行 > 測試影片」或「執行 > 影片除錯」。請注意,每個選單項目旁邊會有一個 Animate 圖示。關閉 SWF 視窗或除錯工作階段之後,焦點便會返回 Flash Builder,除非與專案關聯的 FLA 檔案中發生了影格指令碼編譯器錯誤。所有錯誤的相關資訊會傳送至 Flash Builder 的「錯誤」面板。

發佈與 Flash Builder 中目前專案關聯的 FLA 檔案:

  • 若要開發 Flash Builder,選擇「專案 > 發佈影片」。請注意,Animate 圖示位於選單命令旁。

從 Animate 在 Flash Builder 中編輯 AS 檔案

建立新的 ActionScript 3.0 類別或介面,並指派 Flash Builder 做為編輯器:

  1. 選擇「檔案 > 新增」。

    新增文件
    新增文件
  2. 請從畫面頂端的索引標籤中選擇您要的目的,例如「角色動畫」、「社交」、「遊戲」、「教育」、「廣告」、「網頁」和「進階」。在「新增文件」對話方塊中,選擇 ActionScript 3.0 類別或 ActionScript 3.0 介面。

  3. 在「建立 ActionScxript 3.0」對話方塊中,選取「Flash Builder」做為建立檔案的應用程式,並按一下「確定」。Flash Builder 便會開啟。

  4. 在 Flash Builder 中,選擇 FLA 檔案或 XFL 檔案以關聯 ActionScript 檔案,並按一下「完成」。

從 Animate 在 Flash Builder 中開啟與編輯 AS 檔案:

  1. 在「元件庫」面板中,以滑鼠右鍵按一下與類別或介面關聯的元件,並選擇「屬性」。

  2. 在「元件屬性」對話方塊中,按一下「編輯類別定義」。

  3. 在顯示的「編輯 ActionScript 3.0」對話方塊中,確認指派給 AS 檔案的編輯器為 Flash Builder,並按一下「確定」。

    如果未指派 Flash Builder 編輯檔案,請選取「Flash Builder」做為編輯類別檔案的應用程式,並按一下「確定」。

    Flash Builder 便會開啟以編輯檔案。

建立組件供 Flex 使用

在 Adobe Animate 中,您可以建立內容供 Adobe® Flex® 應用程式作為組件使用。這類內容可包括視覺元素和 Adobe® ActionScript® 3.0 程式碼。

藉由在 Animate 中建立組件供 Flex 使用,您不但能利用 Animate 靈活的圖像設計功能,還可充分運用 Flex 的功能。

若要在 Animate 中建立 Flex 組件,您必須安裝適用於 Animate 的 Flex 組件套件 (Flex Component Kit)。使用 Adobe Extension Manager 便能安裝這個組件套件。某些版本的組件套件未必支援 Adobe Animate 的全部功能,因此請務必從 www.adobe.com/go/flex_ck_tw 下載最新版組件套件。

如需有關搭配運用 Flex 與 Animate 的詳細資訊,請參閱 Adobe 網站上的 Flex 文件,網址為:www.adobe.com/go/learn_flexresources

在 Animate 中建立 Flex 組件:

  1. 確定已經安裝 Adobe Extension Manager。若要下載 Extension Manager,請造訪位於 www.adobe.com/go/extension_manager_dl_tw 的 Extension Manager 下載頁面。

    根據預設,Extension Manager 會與 Adobe Creative Suite 應用程式一起安裝。

  2. 下載並安裝 Flex 組件套件,網址為 www.adobe.com/go/flex_ck_tw。請務必先結束 Animate 再安裝組件套件。如需有關使用 Adobe Extension Manager 安裝擴充功能的詳細資訊,請參閱 www.adobe.com/go/learn_extension_manager_tw

  3. 啟動 Animate。「命令」選單中會出現兩個新命令:「將元件轉換成 Flex 組件」和「將元件轉換成 Flex 容器」。

  4. 在 Animate 中建立影片片段元件,其中包含您要納入 Flex 組件的圖案和 ActionScript 3.0 程式碼。這些內容必須包含在影片片段元件中,才能轉換成 Flex 組件。

  5. 將影片片段轉換成 Flex 組件之前,請確定已符合 Flex 的下列相容性需求:

    • FLA 檔的影格速率應為 24 fps,並與任何使用該組件的 Flex 專案的影格速率相符。

    • 註冊點應位於影片片段中的 0, 0 座標點。

      注意:為確保影片片段中全部內容的註冊點位於 0, 0 處,請按一下「時間軸」底部的「編輯多個影格」按鈕,選取影片片段時間軸中的所有影格,再選取所有影格的全部內容,然後透過「屬性」檢測器將內容移至 0, 0 處。

  6. 在「元件庫」面板中選取影片片段,然後選擇「命令 > 將元件轉換成 Flex 組件」。

    Animate 會將影片片段轉換成 Flex 組件,將「元件庫」中的組件圖示變更為 Flex 圖示,並將 FlexComponentBase 類別已編譯影片片段匯入「元件庫」中。當下一個步驟建立 Flex 組件 SCW 檔案時,Animate 會在該檔案中嵌入 FlexComponentBase。

    請注意「輸出」面板在 Animate 轉換影片片段期間所顯示的進度訊息。

  7. 選擇「檔案 > 發佈」,建立包含已編譯 Flex 組件的 SWC 檔。Animate 也會從主 FLA 檔案建立 SWF 檔案,但您可以選擇忽略該 SWF 檔案。發佈的組件 SWC 檔如今已可供 Flex 使用。

  8. 若要在 Flex 中使用 SWC 檔,請執行下列其中一項:

    • 從 Animate 複製 SWC 檔案,再貼入 Flex 專案的 bin 資料夾中。

    • 將 SWC 檔加到 Flex 專案的元件庫路徑。如需詳細資訊,請參閱位於 www.adobe.com/go/learn_flexresources 的 Flex Builder 文件。

使用 Flex 中繼資料

如果您要撰寫要用於 Flex 的 ActionScript 3.0 程式碼,則可在程式碼內放入中繼資料,以便將外部檔案嵌入任何包含 ActionScript 程式碼的已發佈 SWF 中。通常,這些 [Embed] 中繼資料宣告的用途是將影像檔、字型、個別元件或其他 SWF 檔嵌入 SWF 中。

請記住,中繼資料是「資料的相關資料」。若要將中繼資料加入 ActionScript,應將中繼資料寫在套用中繼資料的程式碼行之前一行程式碼。這樣一來,編譯器在編譯其後的該行程式碼時,便會將中繼資料納入考量。

例如,假設 button_up.png 影像儲存在 ActionScript 檔案的上一層目錄,則可使用下列 ActionScript 嵌入該影像:

[Embed("../button_up.png")]

private var buttonUpImage:Class;

[Embed] 中繼資料標籤指示編譯器將 button_up.png 檔案嵌入 SWF 檔中,且該影像檔應與名為 buttonUpImage 的變數產生關聯。

如需有關 Flex 如何嵌入含有中繼資料之資源的詳細資訊,請參閱「Flex 3 開發人員指南」中的「嵌入資源」,網址為:www.adobe.com/go/learn_flexresources

如果您使用了像是 [Embed] 中繼資料之類需要有 Flex SDK 的功能,Animate 會在編譯階段提示您將 Flex.SWC 檔案加到 FLA 檔案的元件庫路徑。Flex.SWC 檔含有支援 Flex 中繼資料所需的已編譯類別。請在對話方塊中按一下「更新元件庫路徑」,將 Flex.SWC 加到元件庫路徑。您也可以稍後再經由 ActionScript 發佈設定,將 Flex.SWC 檔加到元件庫路徑。

額外的資源

下列資源提供有關整合 Animate 與 Flash Builder 的額外資訊與範例:

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策