建立 HTML 擴充功能

Animate 可以透過使用 HTML 擴充功能加以擴充。 Adobe Extension Builder 3 可讓您建立適用於 Animate 的 HTML 擴充功能。 以前您只能使用 SWF 擴充功能來擴充 Animate。 然而，Adobe Extension Builder 3 可讓您建立適用於 Creative Cloud 應用程式的 HTML 擴充功能。 若要開始使用，您需要下載並安裝 Eclipse 和 Extension Builder 3.0。

建立 HTML 擴充功能

若要建立 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 的「視窗 > 擴充功能」選單中。
      
   3. 視窗詳細資料使用這些選項自訂延伸視窗型別和大小。
      
      按一下下一步。
5. 您可以在後續幾個畫面中進一步為您的擴充功能自訂參考元件庫：
   1. CEP Interface Library (CEP 介面元件庫) 提供可與主機應用程式互動的功能。 預設會選取這個選項。
   2. Frameworks (架構) 適用於一般 Javascript 元件庫，例如 jQuery。
      
   3. Services (服務) 包括 Adobe IPC Communication Toolkit，可讓 Adobe 應用程式、擴充功能和外部應用程式之間通訊。 它提供透過CEP Service Manager進行訊息的通訊協定，後者可做為Creative Cloud通訊的中樞。
      
      按一下「完成」來建立新的Eclipse專案。

在 Animate 中針對您的擴充功能進行除錯 

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

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

匯出您的擴充功能

若要散佈您的擴充功能，您必須將它匯出為 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。

在 Animate 中安裝您的擴充功能 

您可以使用 Adobe Extension Manager 在 Animate 內安裝 HTML 擴充功能。 HTML 擴充功能可以協助您擴充 Animate 的各項功能和能力。

為 HTML 擴充功能增加互動功能

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

1. 使用 CEP 介面元件庫：CEP 介面元件庫提供的 API 可用來取得有關主機環境和 eval 指令碼的資訊，好讓您可以執行 JSFL。 若要深入了解 CEP 介面元件庫，請在 Eclipse 中開啟「Help (說明) > Help Contents (說明內容) > Adobe Extension Builder > References (參考)」。
2. 使用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.addEventListener(「com.adobe.events.flash.selectionChanged」， CallbackFunction)

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