- Adobe Animate User Guide
- Introduction to Animate
- Animation
- Animation basics in Animate
- How to use frames and keyframes in Animate
- Frame-by-frame animation in Animate
- How to work with classic tween animation in Animate
- Brush Tool
- Motion Guide
- Motion tween and ActionScript 3.0
- About Motion Tween Animation
- Motion tween animations
- Creating a Motion tween animation
- Using property keyframes
- Animate position with a tween
- How to edit motion tweens using Motion Editor
- Editing the motion path of a tween animation
- Manipulating motion tweens
- Adding custom eases
- Creating and applying Motion presets
- Setting up animation tween spans
- Working with Motion tweens saved as XML files
- Motion tweens vs Classic tweens
- Shape tweening
- Using Bone tool animation in Animate
- Work with character rigging in Animate
- How to use mask layers in Adobe Animate
- How to work with scenes in Animate
- Interactivity
- How to create buttons with Animate
- Convert Animate projects to other document type formats
- Create and publish HTML5 Canvas documents in Animate
- Add interactivity with code snippets in Animate
- Creating custom HTML5 Components
- Using Components in HTML5 Canvas
- Creating custom Components: Examples
- Code Snippets for custom Components
- Best practices - Advertising with Animate
- Virtual Reality authoring and publishing
- Workspace and workflow
- Creating and managing Paint brushes
- Using Google fonts in HTML5 Canvas documents
- Using Creative Cloud Libraries and Adobe Animate
- Use the Stage and Tools panel for Animate
- Animate workflow and workspace
- Using web fonts in HTML5 Canvas documents
- Timelines and ActionScript
- Working with multiple timelines
- Set preferences
- Using Animate authoring panels
- Create timeline layers with Animate
- Export animations for mobile apps and game engines
- Moving and copying objects
- Templates
- Find and Replace in Animate
- Undo, redo, and the History panel
- Keyboard shortcuts
- How to use the timeline in Animate
- Creating HTML extensions
- Optimization options for Images and Animated GIFs
- Export settings for Images and GIFs
- Assets Panel in Animate
- Multimedia and Video
- Transforming and combining graphic objects in Animate
- Creating and working with symbol instances in Animate
- Image Trace
- How to use sound in Adobe Animate
- Exporting SVG files
- Create video files for use in Animate
- How to add a video in Animate
- Draw and create objects with Animate
- Reshape lines and shapes
- Strokes, fills, and gradients with Animate CC
- Working with Adobe Premiere Pro and After Effects
- Color Panels in Animate CC
- Opening Flash CS6 files with Animate
- Work with classic text in Animate
- Placing artwork into Animate
- Imported bitmaps in Animate
- 3D graphics
- Working with symbols in Animate
- Draw lines & shapes with Adobe Animate
- Work with the libraries in Animate
- Exporting Sounds
- Selecting objects in Animate CC
- Working with Illustrator AI files in Animate
- Applying blend modes
- Arranging objects
- Automating tasks with the Commands menu
- Multilanguage text
- Using camera in Animate
- Graphic filters
- Sound and ActionScript
- Drawing preferences
- Drawing with the Pen tool
- Platforms
- Convert Animate projects to other document type formats
- Custom Platform Support
- Create and publish HTML5 Canvas documents in Animate
- Creating and publishing a WebGL document
- How to package applications for AIR for iOS
- Publishing AIR for Android applications
- Publishing for Adobe AIR for desktop
- ActionScript publish settings
- Best practices - Organizing ActionScript in an application
- How to use ActionScript with Animate
- Accessibility in the Animate workspace
- Writing and managing scripts
- Enabling Support for Custom Platforms
- Custom Platform Support Overview
- Working with Custom Platform Support Plug-in
- Debugging ActionScript 3.0
- Enabling Support for Custom Platforms
- Exporting and Publishing
- How to export files from Animate CC
- OAM publishing
- Exporting SVG files
- Export graphics and videos with Animate
- Publishing AS3 documents
- Export animations for mobile apps and game engines
- Exporting Sounds
- Best practices - Tips for creating content for mobile devices
- Best practices - Video conventions
- Best practices - SWF application authoring guidelines
- Best practices - Structuring FLA files
- Best Practices to optimize FLA files for Animate
- ActionScript publish settings
- Specify publish settings for Animate
- Exporting projector files
- Export Images and Animated GIFs
- HTML publishing templates
- Working with Adobe Premiere Pro and After Effects
- Quick share and publish your animations
- Troubleshooting
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
-
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).
-
In the Preferences dialog box, select Auto Format.
-
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
-
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
-
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
-
Place the insertion point at the beginning of the line or at the character where you want the comment to begin.
-
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
-
Select the lines to comment. (The first and last lines of the selection can be partial lines.)
-
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.
If there are comments in between the selected lines of text, a line comment will be applied on all selected lines.
Remove a comment
-
Place the insertion point in the line that contains the comment, or select the block of code that is commented.
-
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).
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.
To search through text in every script in a Animate document, use the Movie Explorer.
Find text
-
In the Actions panel or Script window, click Find or press Control+F (Windows) or Command+F (Macintosh).
-
Enter the search string.
-
Click Find Next.
Find and replace text in a script
-
In the Actions panel or Script window, click Find or press Control+F (Windows) or Command+F (Macintosh).
-
Enter the search string.
-
In the Replace box, enter the new string.
-
Click Find Next.
-
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
-
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
-
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.
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
-
Click between braces {}, brackets [], or parentheses () in your script.
-
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
-
In the Script pane, place the insertion point where you want to locate the first line of the external script.
-
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
-
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).
-
Save the ActionScript (AS) file.
Set text encoding options
-
Select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), and select ActionScript in the Category list.
-
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
-
Select Edit > Preferences (Windows) or Animate > Preferences (Macintosh), and select Warnings in the Category list.
-
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.
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.
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.
Pin a script
-
Click the Timeline for the script to appear in the current frame tab at top left of the Script pane in the Actions panel.
-
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
-
Select the pinned script in the Actions panel.
-
Select View> Unpin Script to unpin the selected script from the Actions panel.
-
Select View> Unpin All Scripts to unpin all the scripts from the Actions panel.
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.
-
In the Actions panel, click an action in your script.
-
Click Target Path .
-
Enter the path to the target instance, or select the target from the list.
-
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.
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();
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
-
In the Actions panel or Script window, select Edit > Preferences (Windows) or Animate > Preferences (Macintosh).
-
Click ActionScript in the Category list.
-
Use the slider to select an amount of delay, in seconds.
Use tooltip-style code hints
-
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).
-
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.
-
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:
-
Display the code hint by typing a period after a variable or object name.
-
To navigate through the code hints, use the Up and Down Arrow keys.
-
To select an item in the menu, press Enter or Tab, or double-click the item.
-
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
-
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
-
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.