The Actions pop-up window has been redesigned to be more designer-friendly. The enhanced Actions editor reduces the need to code, making it easier to add interactivity. The new Actions editor is now more approachable for designers to create precision animations, optimizing time, and effort. You can add objects and configure Javascript actions to create event-based elements in your animation.

The new Actions editor visually guides you through the various steps in assigning actions to targets. Actions editor allows you to add Javascript event-based actions and select the targets in the same window.  

Adding actions to the elements is now a simple 2-step process with the new code editor:

1. Pick an Action - If you know the name of the action, you can search for the action using the search box. Else, pick a category to view the actions in it and click the required action.
2. Pick a Target - Targets are grouped under Stage.
   1. Click Stage to view the target elements.
      
   2. Double-click the target element.

Note: When you click Stage, there might be a subcategory for Symbols if your composition contains symbols. For more information on symbols, see Create nested animations with symbols.

The actions are grouped into the following categories:

• Page level
  
• Composition level
  
• Click
• Mouse
• Touch
  
• Swipe
• Timeline 
• Symbol

To know more about how to add actions to an element, let us look at the following example.

Actions editor also provides the following enhancements to help you create rich animations faster and easier:

• Add audio: You can add audio to your animations. For more information, see Add audio to your animation.
• Add video: You can add video to your animation. For more information, see Add video to your animation.
• Add hyperlinks to DPS articles: You can add hyperlinks between the elements of a composition and Adobe DPS articles. For more information, see Hyperlink elements to Adobe DPS articles.
  
• Add code snippets: If there are portions of code that are reused often, save the code as snippets. You can insert them with a single click and modify as and when required.

In the Actions editor, click '+' adjacent to My Snippets, and then click one of the following options:

• Create New  

Click to enter your own code and save it as a snippet. When you click this option, a code window appears. Type your code, click Save, and then enter a name for the snippet.

• Add New From Selection

Click to save the selected portion of the code as a snippet. Enter a name for the snippet in the Actions editor (For example - MySnippet_1). You can select this code snippet to add action to the respective element.

Insert code snippets

1. In the code window of the Actions editor, click at the location where you want to insert the code snippet.
   
2. Click My Snippets.
   
3. Choose the required snippet from the list (For example - MySnippet_1 as shown in figure). The saved snippet gets inserted at the insertion point in the code window.