Add interactivity with code snippets in Animate CC

Search
Adobe Animate User Guide

On this page

Applies to: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

The Code Snippets panel is designed to make it easy for non-programmers to start using simple JavaScript and ActionScript 3.0 quickly. It lets you add code to your FLA file to enable common functionality. Using the Code Snippets panel does not require knowledge of JavaScript or ActionScript 3.0.

With the Code Snippets panel, you can:

  • Add code that affects the behavior of an object on the Stage

  • Add code that controls the movement of the playhead in the Timeline

  • (CS5.5 only) - Add code that allows touchscreen user-interaction

  • Add new code snippets that you create to the panel

Using the code snippets included with Animate is also a good way to begin learning JavaScript or ActionScript 3.0. By looking at the code in the snippets and following the snippet instructions, you can begin understanding code structure and vocabulary.

Code snippets option in Animate CC
Code snippets option in Animate CC

Before you begin

When working with the Code Snippets panel, it is important to understand these fundamentals of Animate:

  • Many of the code snippets require you to customize a few items in the code. In Animate, you can do this in the Actions panel. Each snippet contains specific instructions for this task.

  • All of the included code snippets are either JavaScript or ActionScript 3.0.

  • Some snippets affect the behavior of an object, allowing it to be clicked or causing it to move or disappear. You apply these snippets to the object on the Stage.

  • Some snippets cause an action to occur immediately when the playhead enters the frame that contains the snippet. You apply these snippets to a Timeline frame.

  • When you apply a code snippet, the code is added to the current frame of the Actions layer in the Timeline. If you have not created an Actions layer yourself, Animate adds one above all other layers in the Timeline.

  • For ActionScript to control an object on the Stage, the object must have an instance name assigned in the Property inspector.

  • You can click the Show Description and Show Code buttons that appear when you select a snippet in the panel.

Add a code snippet to an object or Timeline frame

To add an action that affects an object or the playhead:

  1. Select an object on the Stage or a frame in the Timeline.

    If you select an object that is not a symbol instance, Animate converts the object to a movie clip symbol when you apply the snippet.

    If you select an object that does not already have an instance name, Animate adds one when you apply the snippet.

  2. In the Code Snippets panel (Window > Code Snippets), double-click the snippet you want to apply.

    If you selected an object on the stage, Animate adds the snippet to the Actions panel in the frames containing the selected object.

    If you selected a Timeline frame, Animate adds the snippet to just that frame.

  3. In the Actions panel, view the newly added code and replace any necessary items according to the instructions at the top of the snippet.

Code snippet in actions panel
Code snippet in actions panel

Add new snippets to the Code Snippets panel

You can add new code snippets to the Code Snippets panel in two ways:

  • Enter a snippet in the Create New Code Snippet dialog box.

  • Import a code snippet XML file.

To use the Create New Code Snippet dialog box:

  1. In the Code Snippets panel, choose Create New Code Snippet from the panel menu.

  2. In the dialog box, Enter the Title, Tool tip text, and JavaScript or ActionScript 3.0 code for your snippet.

    You can add any code that is currently selected in the Actions panel by clicking the Auto-Fill button.

  3. Select the Automatically replace instance_name_here check box if your code includes the string “instance_name_here” and you want Animate to replace it with the correct instance name when the snippet is applied.

    Animate adds the new snippet to the Code Snippets panel in a folder called Custom.

To import a code snippet in XML format:

  1. In the Code Snippets panel, choose Import Code Snippets XML from the panel menu.

  2. Select the XML file you want to import and click Open

To see the correct XML format for code snippets, choose Edit Code Snippets XML from the panel menu.

To delete a code snippet, right-click the snippet in the panel and choose Delete Code Snippet from the context menu.