使用手冊取消

在 Animate 中使用程式碼片段增加互動功能

搜尋

上次更新時間 2023年5月24日

「程式碼片段」面板的設計目的在於讓非程式設計師也能夠輕易且快速地開始使用簡單的 JavaScript 和 ActionScript 3.0。它可以讓您將程式碼新增至 FLA 檔案，進而啟用常見功能。使用「程式碼片段」面板並不需要對 JavaScript 或 ActionScript 3.0 有所了解。

透過「程式碼片段」面板，您可以：

新增會影響「舞台」上物件行為的程式碼
新增可控制「時間軸」中播放磁頭移動的程式碼
(限 CS5.5) - 新增可允許觸控螢幕使用者互動的程式碼
新增您建立的新程式碼片段至面板

使用 Animate 所包含的程式碼片段也是開始學習 JavaScript 或 ActionScript 3.0 的好方法。透過查看程式碼片段並遵循片段指示，您就可以開始了解程式碼的結構與詞彙。

開始之前

使用「程式碼片段」面板時，請務必了解 Animate 的這些基本概念：

許多程式碼片段都需要您在程式碼中自訂一些項目。在 Animate 中，您可以在「動作」面板執行這項作業。每個程式碼片段都包含此工作的特定指示。
所有包含的程式碼片段都是 JavaScript 或 ActionScript 3.0。
某些程式碼片段會影響物件的行為，可讓使用者按一下物件或使其移動或消失。您可以將這些程式碼片段套用至「舞台」上的物件。
當播放磁頭進入包含程式碼片段的影格時，某些片段會使某個動作立即發生。您可以將這些片段套用至「時間軸」影格。
套用程式碼片段時，程式碼會新增至「時間軸」中「動作」圖層的目前影格。如果您自己尚未建立「動作」圖層，Animate 會在「時間軸」的最上層新增該圖層。
若要讓 ActionScript 控制「舞台」上的物件，物件必須具有在「屬性」檢測器中指派的實體名稱。
您可以按一下當您在面板中選取片段時，所出現之「顯示說明」和「顯示程式碼」按鈕。

將程式碼片段新增至物件或「時間軸」影格。

若要新增會影響物件或播放磁頭的動作：

選取「舞台」上的物件或「時間軸」中的影格。

如果您選取的物件不是元件實體，則套用片段時，Animate 會將物件轉換為影片片段元件。

如果您選取的物件尚未有實體名稱，在套用片段時，Animate 會新增一個實體名稱。
在「程式碼片段」面板中 (「視窗 > 程式碼片段」)，按兩下您要套用的片段。

如果您選取「舞台」上的物件，Animate 會將片段新增至包含所選物件之影格中的「動作」面板。

如果您選取了「時間軸」影格，Animate 只會將片段新增至該影格。
在「動作」面板中，請檢視新增的程式碼，並根據片段上方的指示來取代任何所需的項目。

將新片段新增至「程式碼片段」面板

您可以用兩種方式將新程式碼片段新增至「程式碼片段」面板：

在「建立新程式碼片段」對話方塊中輸入片段。
匯入程式碼片段 XML 檔案。

若要使用「建立新程式碼片段」對話方塊：

在「程式碼片段」面板中，從面板選單選擇「建立新程式碼片段」。
在對話方塊中，為您的片段輸入「標題」、「工具提示」文字及 JavaScript 或 ActionScript 3.0 程式碼。

您可以按一下「自動填字」按鈕，以新增任何在「動作」面板中目前所選取的程式碼。
如果您的程式碼包括字串「instance_name_here」，而且您希望 Animate 在片段套用時以正確實體名稱取代它，請選取「自動取代 instance_name_here」核取方塊。

Animate 會將新片段新增至名為 Custom 的資料夾中的「程式碼片段」面板。

若要匯入 XML 格式的程式碼片段：

在「程式碼片段」面板中，從面板選單選擇「匯入程式碼片段 XML」。
選取要匯入的 XML 檔案，然後按一下「開啟舊檔」。

若要查看程式碼片段的正確 XML 格式，請從「面板」選單選擇「編輯程式碼片段 XML」。

若要刪除程式碼片段，請以滑鼠右鍵按一下面板中的程式碼片段，從快顯選單中選擇「刪除程式碼片段」。

具有 HTML5 的互動式動畫

某些動畫需要程式碼片段才能支援各種不同發佈平台。想要了解如何使用程式碼片段，讓您的動畫具有互動性嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「元件庫」中，按一下「發佈設定」。
選取「JavScript/HTML」。
在「HTML/JS」索引標籤中，按一下「匯出」並選擇下列選項：
- 檔案名稱：輸入檔案的名稱。
- 存檔類型：選取「HTML」。
按一下「確定」。

如何增強 HTML5 互動式動畫

觀賞影片，了解如何編輯程式碼。

更快、更輕鬆地獲得協助

新的使用者？