User Guide Cancel

Writing and managing scripts

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

Format code

Your code can be formatted and indented automatically when typing. If you use dynamic font mapping, you ensure that the correct fonts are used for multilingual text.

Set Auto Format options

  1. Do one of the following:
    • From the panel menu  (at the upper-right corner of the Actions panel), select Preferences.

    • In the Script window, select Edit > Preferences (Windows) or Animate > Preferences (Macintosh).

  2. In the Preferences dialog box, select Auto Format.
  3. Select any of the Auto Format options.

    After you set Auto Format options, your settings are applied automatically to the code you write, but not to existing code; you must apply your settings to existing code manually.

Format code according to Auto Format settings

  • Click Auto Format  in the Actions panel or Script window toolbar.
  • From the panel menu (at the upper-right corner of the Actions panel), select Auto Format.
  • Press Control+Shift+F (Windows) or Command+Shift+F (Macintosh).
  • In the Script window, select Tools > Auto Format.

Use dynamic font mapping

  1. To turn dynamic font mapping on or off, select or deselect Use Dynamic Font Mapping in the Preferences dialog box.

    Dynamic font mapping is turned off by default because it increases performance time when you are scripting. If you are working with multilingual text, turn on dynamic font mapping because it helps to ensure that the correct fonts are used.

Use automatic indentation

  1. To turn automatic indentation on or off, select or deselect Automatic Indentation in the Preferences dialog box.

    When automatic indentation is turned on, the text you type after an opening parenthesis “(“ or opening curly brace “{“ is automatically indented according to the Tab Size setting in ActionScript preferences.

    In your scripts, you can indent a line by selecting it and pressing Tab. To remove the indent, select the line and press Shift+Tab.

Comment sections of code

Code comments are parts of code that the ActionScript compiler ignores. A comment line explains what your code is doing, or temporarily deactivates code that you don’t want to delete. Comment a line of code by beginning it with a double slash (//). The compiler ignores all text on that line after the double slash. You can also comment larger blocks of code by placing a slash and asterisk (/*) at the beginning of the block and an asterisk and slash (*/) at the end of the block.

You can type these comment markers manually, or you can use buttons at the top of the Actions panel or Script window to add them.

Comment a line of code

  1. Place the insertion point at the beginning of the line or at the character where you want the comment to begin.
  2. Right-click and select Comment. You can also use the keyboard shortcuts Ctrl + M (Windows) or Command + M or go to Edit > Comment Selection.

A double slash (//) is placed at the insertion point.

Comment multiple lines of code

  1. Select the lines to comment. (The first and last lines of the selection can be partial lines.)
  2. Right-click and select Comment. You can also use the keyboard shortcuts Ctrl + M (Windows) or Command + M or go to Edit > Comment Selection.

Block comment characters are placed at the beginning (/*) and end (*/) of the selection.

Note:

If there are comments in between the selected lines of text, a line comment will be applied on all selected lines.

Remove a comment

  1. Place the insertion point in the line that contains the comment, or select the block of code that is commented.
  2. Right-click and select Uncomment. You can also use the keyboard shortcuts Ctrl + Shift + M (Windows) or Command + Shift + M or go to Edit > Uncomment Selection.

Use syntax coloring

In ActionScript, as in any language, syntax is the way elements are put together to create meaning. If you use incorrect ActionScript syntax, your scripts cannot work.

To highlight syntax errors, set a color-code for parts of your scripts. For example, suppose you set the syntax coloring preference to make keywords appear in blue. When you type var, the word var appears in blue. However, if you mistakenly type vae, the word vae remains black, which shows that you made a typing error.

Do one of the following:

  • Select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), click Code Editor in the Category list, and specify Syntax Coloring settings.

  • With the insertion point in the Script pane, press Control-U (Windows) or Command-U (Macintosh).

Note:

When you write scripts in the Actions panel, commands that are not supported by the version of the player you are targeting appear in yellow in the Actions toolbox. For example, if the Flash Player SWF file version is set to Flash 7, ActionScript that only Flash Player 8 supports appears in yellow in the Actions toolbox.

Using the identifier and keyword list at runtime

On launching Animate, the identifier and keyword lists are read from the resource file and cached. Apart from reading the default lists from the resource, it also scans for additional keywords and identifier list in the Preference folder. It is possible for you to add additional keywords and identifiers by adding ".txt files" in following folders:

  • C:\Users\<Username>[AppData]\Roaming\Adobe\Animate\13.0[ActionscriptKeywords]\

  • C:\Users\<UserName>[AppData]\Roaming\Adobe\Animate\13.0[ActionscriptIdentifiers]\

  • C:\Users\<UserName>[AppData]\Roaming\Adobe\Animate\13.0[JavascriptKeywords]\

  • C:\Users\<UserName>[AppData]\Roaming\Adobe\Animate\13.0[JavascriptIdentifiers]\

Use line numbers and word wrap

When you edit or modify code, line numbers make code easier to scroll and parse. Word wrap helps you avoid horizontally scrolling long lines of code (especially when you work in the authoring environment, or at low screen resolutions).

Enable or disable line numbers

  • In the Script window, select View > Line Numbers.
  • Press Control+Shift+L (Windows) or Command+Shift+L (Macintosh).

Highlight a specific line

  • In the Script window, select Edit > Go To Line.

Enable or disable line word wrap

  • In the Script window, select View > Word Wrap.
  • Press Control+Shift+W (Windows) or Command+Shift+W (Macintosh).

Display hidden characters

Characters such as spaces, tabs, and line breaks are hidden in ActionScript code. You may need to display these characters; for example, you must find and remove double-byte spaces that are not part of a string value, because they cause compiler errors.

  • Press Control+Shift+8 (Windows) or Command+Shift+8 (Macintosh).

The following symbols are used to display hidden characters.

Hidden character

Symbol

Single-byte space

.

Double-byte space

l

Tab

>>

line break


Find text in a script

The Find tool lets you find and replace text strings in your scripts.

Note:

To search through text in every script in a Animate document, use the Movie Explorer.

Find text

  1. In the Actions panel or Script window, click Find  or press Control+F (Windows) or Command+F (Macintosh).
  2. Enter the search string.
  3. Click Find Next.

Find and replace text in a script

  1. In the Actions panel or Script window, click Find  or press Control+F (Windows) or Command+F (Macintosh).
  2. Enter the search string.
  3. In the Replace box, enter the new string.
  4. Click Find Next.
  5. To replace the string, click Replace; to replace all occurrences of the string, click Replace All.

(Deprecated with Animate) Repeat a search in the Actions panel

  1. From the panel menu  (at the upper-right corner of the Actions panel), select Find Again.

(Deprecated with Animate) Repeat a search in the Script window

  1. Select Edit > Find Again.

(Deprecated with Animate) Check syntax and punctuation

You can do a quick check of your ActionScript code without publishing the FLA file.

When you check syntax, the current script is checked. If the current script calls ActionScript classes, those classes are also checked. Other scripts that might be in the FLA file are not checked.

For ActionScript 2.0 files, Check Syntax runs the code through the compiler, generating syntax and compiler errors.

For ActionScript 3.0 files, Check Syntax generates only syntax errors. To generate compiler errors, such as type mismatches, improper return values, and variable or method name misspellings, you must use the Control > Test command.

Check syntax

To check syntax, do one of the following:

  • In the Actions panel or Script window, click Check Syntax .
  • Click in the Script pane, and then press Control+T (Windows) or Command+T (Macintosh). Clicking or typing in the Script pane gives it the focus. If an object on the Stage has the focus, the Transform panel opens instead.

Syntax errors are listed in the Compiler Errors panel.

Note:

In an external ActionScript class file in the Script window, the global classpath (AS2) or source path (AS3) affects the syntax check. Even if the global classpath or source path is set correctly, you might generate errors, because the compiler is not aware that this class is being compiled.

Check for punctuation balance

  1. Click between braces {}, brackets [], or parentheses () in your script.
  2. In Windows, press Control+' (single quote); on the Macintosh, press Command+' (single quote). The text between braces, brackets, or parentheses is highlighted, and you can check that opening punctuation has corresponding closing punctuation.

(Deprecated with Animate) Import and export scripts

You can import a script into the Actions panel or Script window. You can also export your scripts from the Actions panel to external ActionScript files. (When you use the Script window, exporting is unnecessary because you can instead save the AS file.)

If text in your scripts doesn’t look as expected when you open or import a file, change the import encoding preference.

Import an external AS file

  1. In the Script pane, place the insertion point where you want to locate the first line of the external script.
  2. Do one of the following:
    • In the Actions panel, select Import Script from the panel menu, or press Control+Shift+I (Windows) or Command+Shift+I (Macintosh).

    • In the Script window, select File > Import Script or press Control+Shift+I (Windows) or Command+Shift+I (Macintosh).

Export a script from the Actions panel

  1. Select the script to export. Then select Export Script from the Actions Panel menu, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh).
  2. Save the ActionScript (AS) file.

Set text encoding options

  1. Select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), and select ActionScript in the Category list.

  2. Set any of these options:

    Open/Import

    Select UTF-8 Encoding to open or import using Unicode encoding, or select Default Encoding to open or import using the encoding form of the language currently used by your system.

    Save/Export

    Select UTF-8 Encoding to save or export using Unicode encoding, or select Default Encoding to save or export using the encoding form of the language currently used by your system.

Turn the export encoding warning off or on

  1. Select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), and select Warnings in the Category list.

  2. Select or deselect Warn On Encoding Conflicts When Exporting ActionScript Files.

(Deprecated with Animate) Encoding for imported and exported scripts

You can set ActionScript preferences to specify the type of encoding to use in imported or exported ActionScript files. UTF‑8 Encoding is 8‑bit Unicode format, which lets you include text in multiple languages in your file; Default Encoding is the encoding supported by the language your system is currently using, also called the traditional code page.

Note:

When you use a non-English application on an English system, the Test Movie command fails if any part of the SWF file path has characters that cannot be represented by using the Multibyte Character Sets (MBCS) encoding scheme. For example, Japanese paths, which work on a Japanese system, won’t work on an English system. Be sure to use English-only path names on English systems. All areas of the application that use the Test Movie player are subject to this limitation.

Pin scripts in the Actions panel

Use the Pin Script feature to pin tabs of individual scripts in the  Script pane and move them accordingly. This feature is useful if you have not organized the code within your FLA file into one central location or if you are using multiple scripts.

You can pin a script to retain the open location of the code in the Actions panel and toggle between the various open scripts. This can be especially useful when debugging. 

You can also unpin a script or unpin all scripts to unpin a selected script or unpin all scripts from the Actions panel.

In the following figure, the script associated with the current location on the timeline is on Frame 1 of the layer named Cleanup. (The tab at the far left always follows your location along the timeline.) The script is also pinned as shown as the rightmost tab. The following two scripts are pinned:

  • On Frame 1 
  • On Frame 15 of the layer named Intro

Use keyboard shortcuts or click the tabs to move among the pinned scripts. Moving among the various pinned scripts does not change your current position on the timeline. If a new script is selected in Action script navigator, focus moves to the first frame ie Frame 1.

Note:

If the content in the Script pane does not change to reflect the location you select on the timeline, the Script pane is probably showing a pinned script. Click the current frame tab at the top left of the Script pane to show the script associated with your location along the timeline.

A pinned script

Pin a script

  1. Click the Timeline for the script to appear in the current frame tab at top left of the Script pane in the Actions panel.

  2. Do one of the following:
    • Click the Pushpin icon to the right of the tab.
    • Select View> Pin Script to pin the script.

     

Unpin all scripts

  1. Select the pinned script in the Actions panel.

  2. Select View> Unpin Script to unpin the selected script from the Actions panel.

  3. Select View> Unpin All Scripts to unpin all the scripts from the Actions panel.

Unpin Options

Keyboard shortcuts for pinned scripts

When the insertion point is in the Script pane, use the following keyboard shortcuts to work with pinned scripts.

Action

Windows 

Macintosh

Pin script

Control+Shift+= (equal sign)

Command+Shift+=

Unpin script

Control+Shift+- (minus sign)

Command+Shift+-

Insert target paths

Many script actions are meant to affect movie clips, buttons, and other symbol instances. In your code, you can reference symbol instances on a timeline by inserting a target path—the address of the instance you want to target. You can set either an absolute or relative target path. An absolute path contains the entire address of the instance. A relative path contains only the part of the address that is different from the address of the script itself in the FLA file, and will no longer work if the script is moved to another location.

  1. In the Actions panel, click an action in your script.
  2. Click Target Path  .
  3. Enter the path to the target instance, or select the target from the list.
  4. Select either the Absolute or Relative path option.

Use code hints

When you work in the Actions panel or Script window, the software can detect what action you are entering and display a code hint. There are two types of code hint: a tooltip that contains the complete syntax for that action, and a pop-up menu that lists possible ActionScript elements, such as method or property names (sometimes referred to as a form of code completion).

Code hints are enabled by default. By setting preferences, you can disable code hints or determine how quickly they appear. When code hints are disabled in preferences, you can still manually display a code hint for a specific command.

Note:

If you cannot display code hints for a variable or object you created in ActionScript 2.0, but code hints are enabled in ActionScript preferences, make sure you named your variable or object with the proper suffix or that you used strict typing for your variable or object.

Enabling code hinting

You can trigger code hints in various ways.

Strict typing for objects

When you use ActionScript 2.0 and use strict typing for a variable that is based on a built‑in class (such as Button, Array, and so on), the Script pane displays code hints for the variable. For example, suppose you enter the following two lines of code:

var foo:Array = new Array(); 
foo.

As soon as you enter the period (.), Animate displays a list of methods and properties available for Array objects in a pop-up menu, because you typed the variable as an array.

Suffixes and code hints

If you use ActionScript 1.0 or you want to display code hints for objects without strictly typing them, add a suffix to the name of each object when you create it. For example, the suffix that triggers code hinting for the Camera class is _cam. Suppose you type the following code: var my_array = new Array(); var my_cam = Camera.get();

If you then enter my_cam followed by a period, code hints for the Camera object appear.

For objects that appear on the Stage, use the suffix in the Instance Name box in the Property inspector. For example, to display code hints for MovieClip objects, use the Property inspector to assign instance names with the _mc suffix to all MovieClip objects. Then, whenever you type the instance name followed by a period, code hints appear.

var my_array = new Array(); 
var my_cam = Camera.get();
Note:

Although suffixes are not required for triggering code hints when you use strict typing for an object, using suffixes consistently helps make your code understandable.

The following table lists the suffixes that trigger code hints in ActionScript 2.0:

Object type

Variable suffix

Array

_array

Button

_btn

Camera

_cam

Color

_color

ContextMenu

_cm

ContextMenuItem

_cmi

Date

_date

Error

_err

LoadVars

_lv

LocalConnection

_lc

Microphone

_mic

MovieClip

_mc

MovieClipLoader

_mcl

PrintJob

_pj

NetConnection

_nc

NetStream

_ns

SharedObject

_so

Sound

_sound

String

_str

TextField

_txt

TextFormat

_fmt

Video

_video

XML

_xml

XMLNode

_xmlnode

XMLSocket

_xmlsocket

Comments and code hints

You can also use ActionScript comments to specify an object’s class for code hints. In the following example, a comment tells ActionScript that the class of the theObject instance is Object, and so on.

// Object theObject;// Array theArray;// MovieClip theMC;

If you subsequently enter theMC followed by a period, code hints that display the list of MovieClip methods and properties appear. If you enter theArray followed by a period, code hints that display the list of Array methods and properties appear, and so on.

Instead of this technique, however, Adobe recommends that you use strict data typing or suffixes, because these techniques enable code hints automatically and make your code more understandable.

Specify preference settings for automatic code hints

  • In the Actions panel or Script window, select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), click Code Editor in the Category list, and then enable or disable Code Hints.

(Deprecated with Animate) Specify a delay for code hints

  1. In the Actions panel or Script window, select Edit > Preferences (Windows) or Animate > Preferences (Macintosh).

  2. Click ActionScript in the Category list.
  3. Use the slider to select an amount of delay, in seconds.

Use tooltip-style code hints

  1. Display the code hint by typing an opening parenthesis “(“ after an element that requires parentheses (for example, after a method name, a command such as if or do..while, and so on).
    Opening parentheses invoke the code hints

  2. Enter a value for the parameter.

    For multiple parameters, separate the values with commas. For functions or statements, such as the for loop, separate the parameters with semicolons.

    Overloaded commands (functions or methods that can be invoked with different sets of parameters) such as gotoAndPlay() or for display an indicator that lets you select the parameter you want to set. To select the parameter, click the small arrows or press Control+Left Arrow and Control+Right Arrow.

    A code hint with multiple sets of parameters

  3. To dismiss the code hint, do one of the following:
    • Type a closing parenthesis “)”.

    • Click outside the statement.

    • Press Escape.

Use menu-style code hints:

  1. Display the code hint by typing a period after a variable or object name.
    Menu-style code hints

  2. To navigate through the code hints, use the Up and Down Arrow keys.
  3. To select an item in the menu, press Enter or Tab, or double-click the item.
  4. To dismiss the code hint, do one of the following:
    • Select one of the menu items.

    • Click above or below the menu window.

    • Type a closing parenthesis “)” if you’ve already typed an opening parenthesis “(“.

    • Press Escape.

Manually display a code hint

  1. Click in a code location where code hints can appear, such as in the following locations:
    • After the dot (.) following a statement or command, where a property or method must be entered

    • Between parentheses [()] in a method name

  2. Do one of the following:
    • To enable Code Hinting manually, select View > Show Code Hint.

    • Press Control+Spacebar (Windows) or Command+Spacebar (Macintosh).

Code hinting for custom classes

When you create custom ActionScript 3.0 classes, Animate parses the classes and determines the objects, properties, and methods included in them. Animate can then provide code hinting when you write code that refers to the custom classes. Custom class code completion is automatic for any class that you link to any other code with the import command.

Code hinting allows developers to work faster because they don’t have to remember all the objects, methods, and properties used by the class. Designers can work with classes they did not write themselves because they don’t have to have first hand knowledge of how to work with the class.

Code hinting includes the following:

  • Code hinting for nested class references

    When you write nested references, the continued assistance of code hints is helpful.

  • Code hinting for “this”

    When you type “this” in a class file, you get code hints for that same class.

  • Code hinting for “new+<space>”

    When you type “new+<space>”, Animate displays a list of available classes and packages.

  • Code hinting for “import”

    When you type “import + <space>”, Animate displays a list of all the built-in packages and custom packages.

  • Code hinting for SWC libraries

    When you add a SWC library to the library path or the external library path, Animate enables code hinting for all the classes included in the SWC file.

Get help faster and easier

New user?