建立 HTML 擴充功能

Animate CC 可以透過使用 HTML 擴充功能加以擴充。Adobe Extension Builder 3 可讓您建立適用於 Animate CC 的 HTML 擴充功能。以前您只能使用 SWF 擴充功能來擴充 Animate。然而，Adobe Extension Builder 3 可讓您建立適用於 Creative Cloud 應用程式的 HTML 擴充功能。若要開始使用，您需要下載並安裝 Eclipse 和 Extension Builder 3.0。如需詳細資訊，請造訪這個連結。

若要建立 HTML 擴充功能，請執行下列動作。

1. 啟動 Eclipse。 
2. 在「New Project wizard」(新增專案精靈) 中，建立新的應用程式擴充功能專案。為檔案提供有意義的名稱，然後按一下「Next」(下一步)。
3. 在「New Adobe Application Extension Project」(新增 Adobe 應用程式擴充功能專案) 面板上，選擇「Adobe Animate」。按一下「下一步」。
4. 使用可用的選項設定您的擴充功能：
   
   1. Bundle ID (組合包 ID) 可唯一識別您的擴充功能。
   2. Menu name (選單名稱) 是您擴充功能的顯示名稱。「Menu Name」(選單名稱) 會出現在 Animate CC 的「視窗 > 擴充功能」選單中。
      
   3. Window Details (視窗詳細資料) 會使用這些選項來自訂擴充功能視窗類型和大小。
      
      按「Next」(下一步)。
5. 您可以在後續幾個畫面中進一步為您的擴充功能自訂參考元件庫：
   1. CEP Interface Library (CEP 介面元件庫) 提供可與主機應用程式互動的功能。預設會選取這個選項。
   2. Frameworks (架構) 適用於一般 Javascript 元件庫，例如 jQuery。
      
   3. Services (服務) 包括 Adobe IPC Communication Toolkit，可讓 Adobe 應用程式、擴充功能和外部應用程式之間通訊。其中提供透過 CEP Service Manager 傳送訊息所用的通訊協定，CEP Service Manager 的作用就像 Creative Cloud 通訊中樞一樣。
      
      按一下「Finish」(完成) 即可建立新的 Eclipse 專案。

您可以直接從 Eclipse 執行您的擴充功能：

1. 以滑鼠右鍵按一下專案，並選取「執行身分 > Adobe Flash 擴充功能」。隨即啟動 Animate CC。
2. 在 Animate CC 中，選取「視窗 > 擴充功能」選單項目。 隨即會開啟擴充功能面板。

若要散佈您的擴充功能，您必須將它匯出為 ZXP 套件。然後，Creative Cloud 應用程式上的 Adobe Extension Manager 會下載並執行 ZXP 套件：

1. 在 Eclipse 中，切換至「Script Explorer」(指令碼總管) 檢視，以滑鼠右鍵按一下您的專案，並選取「匯出 > Adobe Extension Builder 3 > Application Extension (應用程式擴充功能)」。隨即會顯示「Export Wizard」(匯出精靈)。
2. 您必須擁有憑證才能簽署擴充功能套件。請瀏覽到現有憑證，或按一下「Create」(建立) 以建立新憑證。
3. 按一下「Finish」(完成)。
4. 匯出完成時，您將會在專案資料夾中看到您擴充功能的 ZXP 套件已準備好可供散佈。

注意：若要安裝，您將需要存取 <extension>\.staged-extension\CSXS\manifest.xml 檔案並更新 host 標籤，以便將 Animate 最小版本設定為 13.0。

您可以使用 Adobe Extension Manager 在 Animate CC 內安裝 HTML 擴充功能。HTML 擴充功能可以協助您擴充 Animate 的各項功能和能力。若要安裝擴充功能，請參閱這個連結。

您可以建置 HTML 擴充功能，然後透過增加控制項、定義行為及取得有關主機 (包括 Animate 和作業系統) 環境的資訊，與 Animate 互動。這可以透過兩種方法完成：

1. 使用 CEP 介面元件庫：CEP 介面元件庫提供的 API 可用來取得有關主機環境和 eval 指令碼的資訊，好讓您可以執行 JSFL。若要深入了解 CEP 介面元件庫，請在 Eclipse 中開啟「Help (說明) > Help Contents (說明內容) > Adobe Extension Builder > References (參考)」。
2. 使用 JSFL：JSFL 指令碼可以透過使用 CEP 介面元件庫的 Eval 指令碼 API 來執行。若要深入了解 JSFL，請參閱這個連結。
   
   除了 JSFL 之外，Animate 內的 CEP 基礎架構還會公開下列事件，這些事件只能在 HTML 面板中使用。
   • com.adobe.events.flash.documentChanged 會因為目前作用中的文件有所變更而觸發。
   • com.adobe.events.flash.timelineChanged 會在您對目前作用中文件的時間軸進行變更時觸發。
   • com.adobe.events.flash.documentSaved 會在您儲存目前文件時觸發。
   • com.adobe.events.flash.documentOpened 會在您開啟新文件時觸發。
   • com.adobe.events.flash.documentClosed 會在您關閉目前作用中的文件時觸發。
   • com.adobe.events.flash.documentNew 會在您建立新文件時觸發。
   • com.adobe.events.flash.layerChanged 會在您選取不同圖層時觸發。
   • com.adobe.events.flash.frameChanged 會在您選取不同影格時觸發。
   • com.adobe.events.flash.selectionChanged 會在您選取舞台上的不同物件時觸發。
   • com.adobe.events.flash.mouseMove 會在您將滑鼠移到「舞台」上方時觸發。

在上面的程式碼片段中：

• csinterface：CEP 介面元件庫的物件。
• com.adobe.events.flash.selectionChanged：變更物件的選取範圍時所觸發的事件。您也可以使用上述任何事件。
• CallbackFunction：偵聽所觸發事件的方法。