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.
About interactive compositions

About interactive compositions

Interactive compositions change based on the viewer’s actions. For example, when the viewer clicks a button, a different graphic with more information could appear. Interactivity can be simple, such as the click of a button, or it can be more complex, involving different kinds of interactions with the same element—for example, moving your mouse cursor over a button, clicking the button, and moving your mouse cursor off the button are three unique events that could each result in different visual changes on the Stage.

In Edge Animate, you use JavaScript to achieve interactivity. JavaScript is a popular and standard script for Web browsers. JavaScript runs on browsers for desktops as well as on devices such as tablets and mobile phones.

If you have no idea what JavaScript is, or how to write code—don’t panic! Adobe Edge Animate provides an easy interface to add JavaScript to your compositions and integrate common interactive functions. When you get more comfortable with the syntax of the script, you can begin to delve deeper and customize the interactivity.

In this lesson, you’ll learn to create nonlinear navigation, meaning the animation doesn’t have to play straight from the beginning to the end, and stop there. You’ll add code that gets triggered when the playhead reaches a certain point in time. You’ll also add code that moves the playhead to different parts of the Timeline to display particular elements. You’ll also learn to make elements on the Stage respond to different interactions with the mouse cursor.

3. Understanding JavaScript | Next Section Previous Section