Adding basic interactivity

In this lesson, you’ll learn how to do the following:

• Understand interactivity
• Work with the syntax of JavaScript
• Recognize the relationship between JavaScript, jQuery, and the Edge Animate API
• Differentiate triggers, events, and actions
• Add triggers to the Timeline
• Insert labels
• Create actions to respond to events
• Control the behavior of the Timeline playhead
• View and edit script with the Code panel
• Use comments to annotate code
• Hide and show elements to incorporate visual feedback for buttons
• Control animated elements
• Customize the mouse cursor

This lesson will take approximately two hours to complete. Before you begin, download the Lesson05 content.

Getting started

To begin, view the travel guide that you’ll create as you learn to make interactive projects in Adobe Edge Animate.

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.

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, checkboxes, 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.0.1.6.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 you 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.

Timeline triggers

Triggers are the simplest way to add code to your Edge Animate composition. Triggers are executed automatically when the playhead reaches them on the Timeline. You can have multiple triggers along the Timeline. The minimum time interval between triggers is 1/1000th of a second, but practically, you’d never need or want actions to be executed so close together.

Creating a loop

For this slideshow of Burma, you’ll insert a trigger at the end of the Timeline to make the playhead automatically return to the beginning, creating a loop.

Editing triggers

Editing the script for your triggers is simple and easy. The panel that appeared when you added the trigger is always available for modifications, additions, or deletions.

• To edit a trigger, double-click the trigger icon on the Timeline.
• The script panel opens to display the trigger, and you can modify the argument, delete the code, or add new code from the snippet options on the right side of the panel.
• To move a trigger, click and drag the trigger icon on the Timeline to a new position.
• The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.
• To delete a trigger, select the trigger on the Timeline and press the Delete key.

The trigger is removed from the Timeline.

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. Your 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.

Events and actions

So far, you’ve seen how Edge Animate uses triggers to automatically execute JavaScript when the playhead reaches a certain point on the Timeline. You added a trigger at the end of the animation to create a loop. The other two ways with which Edge Animate adds JavaScript is with events and actions.

Events are occurrences that happen in Edge Animate that it can detect and respond to. When an event is detected, you provide actions as a response.

It’s useful to think of interactions in terms of events and actions. When you click on a menu button (event), more options may expand (actions). When you roll over a button (event), a triangular play icon may appear on it (actions). In the next section, you’ll add thumbnail images to the Stage. When the user clicks on each thumbnail (event), the playhead will move to a new position on the Timeline (actions) to show a particular image from the travel slideshow.

Creating the buttons

A button is a basic visual indicator of what the user can interact with. The user usually clicks a button, but many other types of interactions are possible. For example, rollovers, double-clicks, and rollouts are all possible. Edge Animate also provides events unique to mobile devices, such as touches.

You’ll start with the simplest, and most common event, which is the single-click.

Adding the thumbnails

Small, cropped versions of the larger Burma images are provided for you in the images folder.

Adding the events

Each element on the Stage can have its own events and actions. Insert code for individual elements from the far left column of the Timeline or Elements panel. The Open Actions button is indicated by a set of curly brackets.

Adding the actions

Each event must have an accompanying action, or a response, to the event.

Completing the interactivity

Now that you’ve completed the interactivity for the first button, add the same functionality to the remainder.

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.

Creating labels

When the user clicks each thumbnail, Edge Animate moves the playhead to a new time on the Timeline, according to the argument in the stop() method. However, imagine that the client who has commissioned you to develop this slideshow wants the whole sequence to run a little slower. That’s an easy task to do because you can select all of the elements on the Timeline and move all the keyframes and animations forward to lengthen the total amount of time. But doing so causes the times that each image appears on the Stage to change, which would require you to change all the millisecond values in the stop() methods.

There is an alternate approach that would save you time and effort. Instead of using fixed-millisecond times in the stop() methods, you can use labels, which refer to points on the Timeline. Labels can move with your animation, so increasing or decreasing the length of your animation can move the labels proportionately.

Adding labels

Labels appear on the Timeline panel, below the time markers and just above the Actions layer.

Editing labels

There are several ways you can edit labels once you’ve inserted and named them:

• To rename a label, double-click the label name on the Timeline.
• To move a label, click and drag the label on the Timeline to a new position.
• To delete a label, select the label on the Timeline so it is highlighted and press the Delete key.
• To cut, copy or paste a label, right-click on a label and choose your desired option, or use the standard keyboard commands for cut (Ctrl/Command+X), copy (Ctrl/Command+C), and paste (Ctrl/Command+V).

Changing the references to the Timeline

Now that the Timeline contains labels, you can change the references in the JavaScript code.

Adding visual feedback

Most interactive elements on the Web feature visual feedback, which is important to provide clues to the reader that the particular item is interactive. For example, a simple hyperlink on a web page often will change color when you move your mouse over it. A button will highlight when you move your mouse over it, and may appear depressed when you click on it.

You can create these interactions with a combination of events and actions in Edge Animate. You’ll add these events and actions to the thumbnails for visual feedback next.

Adding the mouseover thumbnails

The first question you should ask is, what visual effect do you want to see when a user moves their mouse over the thumbnail images? For this project, you’ll make the grayscale thumbnails become colorized, and a highlight appear around the borders. The first step is to bring colorized versions of the thumbnails on to the Stage.

Hiding the mouseover thumbnails

Since you want to show the colorized version only when the mouse cursor moves over the thumbnail, you must first hide the colorized thumbnails. You can hide the elements by changing their Display property to Off.

Inserting the mouseover event

Each grayscale thumbnail contains a click event. You’ll have to edit each of those elements to incorporate a mouseover event. A mouseover event happens when the user moves their mouse cursor over the selected element. When the mouseover event happens, you'll show the colorized thumbnails.

Inserting the mouseout event

When you preview the Edge Animate project, you’ll notice that the thumbnails become colorized when you move your mouse over them, but they remain in color even after you move your mouse off of them. In order to make the thumbnails revert to their grayscale versions, you need to add one additional event: the mouseout event.

The mouseout event happens when the cursor moves off of an element. You’ll add the mouseout event to the colorized thumbnails (not the grayscale thumbnails) and pair the event with a command that hides the colorized versions. The result: The colorized versions disappear leaving the grayscale version visible again.

Editing the click event

One final fix is needed before all the events and actions work together. You may have noticed that clicking on the buttons don’t move the playhead as you intend. The reason it no longer works is because the colorized thumbnails overlap their grayscale counterparts, which block the click events. Your final step is to remove the click event from the grayscale thumbnails and add them to the colorized thumbnails instead.

Customizing the mouse cursor

In addition to the visual feedback that you can provide by changing the appearance of the button when the user interacts with it, you can also change the appearance of the cursor itself. Often, the default arrow cursor on a desktop or laptop browser changes to a hand (known as the pointer cursor) when it hovers over an interactive element or hyperlink. You can choose to change the cursor to a pointer, or choose from among dozens of other cursor types.

Using the pointer

The Properties panel controls the cursor appearance and allows you to select a custom icon for each element.

Controlling animated elements

So far, you’ve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular elements. You can also add code to control the playback of animated symbols.

Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal animation. With JavaScript, you can control the symbol animations to create more sophisticated interactions. For example, you can create a button that controls a dramatic animated unfurling or closing of a map. Or, you can create a button that controls the animated expansion or collapse of a more info box. The map and the more info box would be Symbols that behave independently on the main Timeline.

For your interactive travel slideshow, you’ll add a button at the top of the Stage that, when rolled over, elegantly animates to reveal information about the images and Burma.

Adding the button and animated symbol

The button and the animated symbol have already been created for you, and are in the Library ready to use.

Play a symbol animation

The symbol is currently stopped at 0 seconds. You’ll add a mouseover event to the triangle button that tells the symbol to begin playing.

Reset the symbol animation

Now, you'll add a mouseout event for the triangle element to move its playhead back to 0 seconds to reset the animation.

Using jQuery Effects

The Edge Animate API offers a nice balance of power, flexibility, and ease-of-use to incorporate interactivity to your designs and animations. Inserting script by simply clicking a button in the script panel is (mostly) foolproof. However, adding a bit of jQuery to your scripts can often make your job easier. As you learned earlier in this lesson, jQuery is a JavaScript library that was written specifically to make selecting elements on a web page and creating animations and transitions simple. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or slide-in and slide-out. Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you see fit. Let’s examine one particular jQuery method, fadeToggle(). The method fadeToggle() animates an element's transparency to fade up or fade down, depending on its current state. If the element is transparent, it will become opaque. If the element is opaque, it will become transparent.

Review

Review questions

1. What's the difference between actions, triggers, and events, and how are they used to create interactivity in Adobe Edge Animate?
2. What's the relationship between the Edge Animate API, jQuery, and JavaScript?
3. How do you create a button?
4. Why would you use a label, and where are they located?
5. What is the Code panel, and how does it differ from the panels for actions and triggers?
6. What does the code sym mean in the Edge Animate API, and how do you use it?

Review answers

1. Actions, triggers, and events are all JavaScript code that you use to create interactivity in Edge Animate. Actions are commands that tell Edge Animate to do something, such as hide or display an element, or load a hyperlink. Triggers are actions that are placed on the Timeline so they are executed at a specific time. Events are things that happen in a composition that Edge Animate can respond to with actions.
2. Edge Animate uses JavaScript to power its animation and interactivity. JavaScript is the standard scripting language for Web browsers. jQuery is a library of well-written JavaScript functions that make it easier to select and animate elements on a web page. The Edge Animate API provides additional functions (based on JavaScript and jQuery) to control elements in your composition.
3. A button is a visual indicator of what the user can interact with. You can create a button by creating an element on the Stage, then clicking the Open Actions button in the Timeline or Elements panel to add an event. In the event tab that opens, insert actions that you want triggered when the event happens.
4. Labels are located at the top of the Timeline. Labels identify specific points in time so that you can refer to label names, rather than fixed milliseconds, in your JavaScript code.
5. The Code panel, which you access by pressing Ctrl+E (Windows)/Command+E (Mac OS), allows you to display all the JavaScript code associated with your current Edge Animate composition. It also shows any code errors and their location in the script. In contrast, panels for adding triggers, events, and actions show only the code for the associated element, or time.  
6. The word sym represents the whole Edge Animate composition, when the statement is on the main Timeline. 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 you want to do something, you first identify the object that you want to control. If you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the script is sym.