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.
Understanding JavaScript

Understanding JavaScript

JavaScript is the scripting language that adds additional functionality to a Web page. Many of the common interface elements on websites, such as pull-down menus, check boxes, or search boxes, are created with JavaScript. Edge Animate also uses JavaScript to power its interactivity, as well as the animations and other effects.

Where the JavaScript lives

Even without adding any interactivity to your composition, your project depends on JavaScript. The JavaScript code is contained in several separate text documents that have the file extension “.js”. Look at the files associated with your Edge Animate composition, 05_workingcopy. There are four JavaScript files within the folder called edge_includes:

  • edge.1.0.0.min.js
  • jquery-1.7.1.min.js
  • jquery.easing.1.3.js
  • json2_min.js

These files contain the basic code required for any Edge Animate composition. There are also additional JavaScript files, which are unique to your project. Those files are located outside the edge_includes folder, and are automatically named with your Edge Animate filename. Your files are named as follows:

  • 05_workingcopy_edge.js
  • 05_workingcopy_edgeActions.js
  • 05_workingcopy_edgePreload.js

When your Web browser first launches your Edge Animate project, it loads the JavaScript code so all the functionality is available when your project plays. All the code is organized as functions, which group commands together. Since each function has a unique name, you can trigger the commands simply by referencing the name of the function. Programmers say that a function is “called,” or that the browser “calls” a function.

jQuery and the Edge Animate API

While JavaScript is useful, it’s meant to control all the details of a Web page, which is powerful but often clumsy and complicated. That’s where jQuery and the Edge Animate API come in handy. jQuery is an open-source JavaScript library that provides an easy way to select, control, and animate elements in a browser. jQuery is not another language, but simply a set of well-written JavaScript functions. If you look again at the JavaScript files in the edge_includes folder, you’ll see that two of those files are, in fact, files for jQuery.

Along with jQuery, Edge Animate provides additional functions it has built for you. The library of JavaScript functions that Edge Animate has built for your use constitute the Edge Animate API (Application Programming Interface).

You can think of JavaScript, jQuery, and the Edge Animate API as different layers of control. The Edge Animate API is the top, most superficial layer of control, jQuery is the middle, and the core JavaScript is the deepest layer. A useful analogy is the control of an automobile. The Edge Animate API would represent the controls you see in the driver’s seat—the steering wheel, the parking brake, or the gas pedal. They allow you to drive the car without needing to know much about its inner workings. They’re created from a combination of levers, dials, and shafts to make controlling your vehicle simple and easy. Those levers, dials, and shafts represent the jQuery level of control. At the most granular level, you have JavaScript, represented by the individual nuts and bolts and gears.

Just as it is so much easier to drive a car using the steering wheel and gas pedal, so it is to control your Edge Animate composition with the Edge Animate API. But in both cases, there’s no reason why you couldn’t tinker with the deeper-level controls for a more customized experience. You can start coding in jQuery and JavaScript to make your own interactivity. You just need to be sure you’re a competent mechanic, or know your way around JavaScript!

In this lesson, you’ll first learn to add interactivity with the Edge Animate API. Later, as you gain more confidence and comfort, you’ll delve a little deeper and insert some jQuery for more sophisticated effects.

Triggers, events, and actions

Edge Animate uses actions, triggers, and events to incorporate JavaScript in your composition.

Actions are the things that Edge Animate can do, which, given the full JavaScript language at its disposal, is quite a lot. Actions can range from loading a hyperlink, to changing a particular visual property of an element on the Stage, to storing a piece of information in a variable for later retrieval.

Triggers are actions that are placed along the Timeline. When the playhead reaches the trigger, the actions are executed. Use triggers when you want code to be synchronized by your animation, and not by user control.

Events are things that happen in a composition that Edge Animate can respond to with an action. Typically, events are user-generated, such as the click of a mouse button, the pressing down of a key, or the tilting of a mobile device. However, events can also happen automatically. For example, the point when the composition is ready (when all the assets and code libraries have been downloaded) is an event. Events are always paired with actions. When an event happens, an action—or set of actions—is executed.

4. Timeline triggers | Next Section Previous Section