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.
Minding your syntax

Minding your syntax

Let’s examine the code that you added in the trigger more closely to learn about JavaScript syntax, or the way words and punctuation work together. Syntax is the grammar of a programming language.

If you’re unfamiliar with program code or scripting, the JavaScript code that Edge Animate inserts may be challenging to decipher. However, once you understand the basic syntax, you’ll find it easier to follow a script.

The code that is in your trigger at 10000 milliseconds appears as follows:

sym.play(0);
  • The first word in the statement is sym. When the statement is on the main Timeline, the word sym represents the whole Edge Animate composition. Edge Animate is organized around the concept of “symbols,” and the root, or base-level symbol, is the Edge Animate Stage. This root symbol contains all the elements and animations in your Edge Animate composition—everything on the Stage or Timeline. In JavaScript, when we want to do something, you first identify the object that you want to control. In this case, since you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the script is sym.
  • The dot operator (.) provides a way to access different commands for the object that you’ve identified (in this case, sym). Objects can be animations, text, or abstract concepts such as the date or particular data. Objects have properties, which describe them, and methods, which are the things that they can do. In your trigger, the method for the sym object is play(). The dot, or period, separates the object and its method.
  • As in English, every open parenthesis must have a corresponding close parenthesis, and the same is true for JavaScript. If you open something, you must close it. All methods have parentheses. You method, play(), has an open and close parenthesis.
  • Each method can have different arguments in between the parentheses, which provide additional information. The play() method requires a single argument, which tells Edge Animate at what point in time (in milliseconds) to begin playing. Methods can have multiple arguments, which are separated by commas.
  • Some arguments require a number, some may need a name, and others may need the words true or false. Whenever you’re entering the name of a file or a URL, use single or double quotation marks. Quotation marks distinguish a String value, which represent a sequence of characters, with other kinds of values.
  • You can add comments to remind you or others of what you are accomplishing with different parts of the script. To add a comment for a single line, start it with two slashes (//). To type a multiline comment, start it with /* and end it with */. Comments are ignored by JavaScript and won’t affect your code at all.
  • The semicolon at the end of the line tells JavaScript that it has reached the end of a complete statement and the end of a line of code. A semicolon is like a period in a sentence.

That’s a lot of information packed into a single line of code! But getting comfortable with the syntax is your first step in getting out from behind the steering wheel and looking under the hood of your car.

6. Creating the buttons | Next Section Previous Section