Adobe Animate CC中sym未定义求助：如何通过sym访问库符号

Hey there! It’s super common to run into this sym not defined hiccup when you’re starting out with Adobe Animate and JavaScript. Let’s walk through the most likely issues and how to fix them step by step:

1. You’re using sym outside the correct context #

The sym object is not a global variable—it’s tied directly to a specific symbol instance or the stage, and only exists within the scope of Animate’s timeline scripts or event handlers. If you’re calling sym.$() in a standalone external JS file without targeting the right context, the browser won’t recognize it.

Fix: #

• If you’re working with the stage: Add your code to the stage’s frame script (e.g., the first frame of your main timeline) or bind it to the compositionReady event (this fires when the Animate project finishes loading).
• If you’re working with a specific symbol: Open that symbol’s timeline and add your code to its frame scripts, or attach it to an event (like click or mouseover) on the symbol itself. In this scope, sym will refer to that individual symbol instance.

2. You’re using the wrong name in sym.$() #

sym.$("name") targets the instance name of a symbol on the stage—not the name of the symbol in your library. It’s easy to mix these up!

Fix: #

1. Select the symbol instance on your stage.
2. Open the Properties panel (Window > Properties if it’s hidden).
3. In the "Instance Name" field, type a unique name (e.g., myDraggableItem—no spaces or special characters!).
4. Use that exact instance name in your code: sym.$("myDraggableItem")

3. Your script loading order is messed up #

Animate’s sym.$() is a wrapper for jQuery, so jQuery needs to load before Animate’s main script. If Animate’s scripts load first, sym.$ won’t work properly, and you might get undefined errors.

Fix: #

• Check your project’s HTML file: Make sure the <script> tag for jQuery comes before the Animate-generated <script> tags (look for something like <script src="yourProjectName.js"></script>).
• If you’re using Animate’s publish settings: Go to Publish Settings > HTML > Include JavaScript in HTML, and ensure jQuery is referenced first. You can add the jQuery CDN link manually in the HTML template if needed.

Example: Working Draggable Setup #

Here’s a quick working example to tie it all together:

1. Drag your library symbol to the stage, set its instance name to myDragItem.
2. Go to the main stage’s first frame, open the Actions panel, and paste this:

// Wait for the composition to fully load
sym.compositionReady(function() {
    // Get the draggable instance using its stage instance name
    var dragElement = sym.$("myDragItem");
    
    // Initialize jQueryUI draggable
    dragElement.draggable({
        containment: "parent" // Optional: restrict drag to stage bounds
    });
});

If you need to access sym from an external JS file, you can grab the composition and stage explicitly:

// Replace "YOUR_COMPOSITION_ID" with the ID from your HTML file (look for AdobeAn.getComposition)
var comp = AdobeAn.getComposition("YOUR_COMPOSITION_ID");
var stageSym = comp.getStage();

// Now you can access your symbol instance
var dragItem = stageSym.$("myDragItem");
dragItem.draggable();

内容的提问来源于stack exchange，提问作者Bradley Maples