Home / Articles / Adding Basic Interactivity in Adobe Edge Animate

Adding Basic Interactivity in Adobe Edge Animate

Article Description

Learn how to use Adobe Edge Animate’s built-in code snippets and intuitive panels to add actions to create engaging, user-driven, interactive experiences.
Navigating the Code panel

Navigating the Code panel

Your travel slideshow is now interactive, where users can click to see any of the images. But your code appears to be scattered among many different elements. How can you view all the code for your Edge Animate composition together? The answer is in the Code panel, which you can open by choosing Window > Code, or pressing Ctrl+E (Windows) or Command+E (Mac OS).

Viewing your code

The Code panel displays all the code in your Edge Animate composition—both the code that is automatically generated for every project, and the code that you insert yourself.

  1. Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
  2. The Code panel opens. The Code panel is similar to the other script panels for triggers, events, and actions.

  3. Click on the Full Code button on the far-right side of the panel to toggle between Full Code mode and non-Full Code mode.
  4. In Full Code mode, Edge Animate displays the entire code for the JavaScript file for the Edge Animate composition. Scroll down to see the script for all your thumbnail elements as well as the trigger. The code that this represents is contained in the file 05_workingcopy_edgeActions.js.

    In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the left side of the panel. In addition, there is an option to see the code for the Preloader, which is currently disabled because you haven’t yet added one. In later lessons, you’ll learn about adding a Preloader.

  5. While in non-Full Code mode, click on the Plus button in line with the Stage element.
  6. A hierarchical menu appears that allows you to add an event to the Stage itself, an event to any of the elements on the Stage, or an event to the Timeline.

  7. If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the list and select Delete Action.
  8. In either Full Code or non-Full Code mode, when you make additions and edits to the script, and they are saved in the composition.
9. Creating labels | Next Section Previous Section